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—