Skip to main content
Coding Theme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.activeBorder#C41E3A
  • activityBar.background#003366
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#C41E3A
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D4A017
  • badge.foreground#FFFFFF
  • button.background#C41E3A
  • button.foreground#FFFFFF
  • button.hoverBackground#E53935
  • dropdown.background#FFFFFF
  • dropdown.border#E0E0E0
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackgroundrgba(255,255,0,0.3)
  • editor.findMatchHighlightBackgroundrgba(255,165,0,0.2)
  • editor.foreground#212121
  • editor.lineHighlightBackground#E8F0FE
  • editor.lineHighlightBorder#B0C4DE
  • editor.selectionBackgroundrgba(196,30,58,0.3)
  • editor.selectionHighlightBackgroundrgba(212,160,23,0.2)
  • editorBracketMatch.background#D4A01733
  • editorBracketMatch.border#C41E3A
  • editorCursor.foreground#C41E3A
  • editorGroupHeader.tabsBackground#F8F0E3
  • editorIndentGuide.activeBackground#C41E3A
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#003366
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#C41E3A
  • gitDecoration.conflictingResourceForeground#E53935
  • gitDecoration.deletedResourceForeground#C41E3A
  • gitDecoration.modifiedResourceForeground#1976D2
  • gitDecoration.untrackedResourceForeground#43A047
  • input.background#FFFFFF
  • input.border#E0E0E0
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#C41E3A
  • list.activeSelectionBackground#D4A017
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#C41E3A33
  • list.highlightForeground#C41E3A
  • list.hoverBackground#E0E0E0
  • minimap.background#F8F0E3
  • minimapSlider.activeBackground#757575
  • minimapSlider.background#BDBDBD
  • minimapSlider.hoverBackground#9E9E9E
  • panel.background#F8F0E3
  • panel.border#E0E0E0
  • panelTitle.activeBorder#C41E3A
  • panelTitle.activeForeground#003366
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#757575
  • scrollbarSlider.background#BDBDBD66
  • scrollbarSlider.hoverBackground#9E9E9E
  • sideBar.background#F8F0E3
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#003366
  • sideBarTitle.foreground#003366
  • statusBar.background#003366
  • statusBar.debuggingBackground#C41E3A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#D4A017
  • statusBarItem.hoverBackground#555555
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#C41E3A
  • tab.activeForeground#003366
  • tab.border#E0E0E0
  • tab.inactiveBackground#F8F0E3
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#2196F3
  • terminal.ansiBrightCyan#00BCD4
  • terminal.ansiBrightGreen#66BB6A
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#E53935
  • terminal.ansiBrightYellow#FFEB3B
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#43A047
  • terminal.ansiMagenta#8E24AA
  • terminal.ansiRed#C41E3A
  • terminal.ansiYellow#FDD835
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#003366
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#777777

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#D4A017
keyword, storage.type, storage.modifier#003366bold
keyword.operator, punctuation.accessor#C41E3A
variable, variable.other#F2C1D1
variable.parameter#8E24AAitalic
entity.name.function, support.function#0097A7
meta.function-call#1976D2
entity.name.class, entity.name.type.class, support.class#003366bold
entity.name.type, support.type#43A047
entity.name.type.interface#F2C1D1italic
constant.numeric#FF9800
constant, constant.language, constant.character#D4A017
constant.language.boolean#C41E3Abold
variable.other.property, support.variable.property#0097A7
meta.object-literal.key#1976D2
entity.name.tag, punctuation.definition.tag#C41E3A
entity.other.attribute-name#8E24AAitalic
punctuation, meta.brace#9E9E9E
string.regexp#43A047
constant.character.escape#FF9800
meta.decorator, punctuation.decorator#F2C1D1
invalid, invalid.illegal#FF0000strikethrough
markup.heading, entity.name.section#003366bold
markup.bold#C41E3Abold
markup.italic#F2C1D1italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#0097A7
support.type.property-name.json#1976D2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F2C1D1
support.type.property-name.css#003366
support.constant.property-value.css#43A047
themesmith by CyberBoost - VS Code Theme