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#C62828
  • activityBar.background#E3E8F0
  • activityBar.foreground#2B2F36
  • activityBarBadge.background#C62828
  • activityBarBadge.foreground#FFFFFF
  • badge.background#C62828
  • badge.foreground#FFFFFF
  • button.background#C62828
  • button.foreground#FFFFFF
  • button.hoverBackground#B71C1C
  • dropdown.background#EBEEF3
  • dropdown.border#D7DDE5
  • dropdown.foreground#2B2F36
  • editor.background#F5F7FA
  • editor.findMatchBackground#C6282830
  • editor.findMatchHighlightBackground#C6282820
  • editor.foreground#2B2F36
  • editor.lineHighlightBackground#C6282810
  • editor.lineHighlightBorder#C6282810
  • editor.selectionBackground#C6282840
  • editor.selectionHighlightBackground#C6282820
  • editorBracketMatch.background#3A96A520
  • editorBracketMatch.border#3A96A5
  • editorCursor.foreground#C62828
  • editorGroupHeader.tabsBackground#F5F7FA
  • editorIndentGuide.activeBackground#6B7A89A0
  • editorIndentGuide.background#6B7A8940
  • editorLineNumber.activeForeground#2B2F36
  • editorLineNumber.foreground#6B7A89
  • editorWhitespace.foreground#6B7A89
  • focusBorder#C62828
  • gitDecoration.conflictingResourceForeground#9C27B0
  • gitDecoration.deletedResourceForeground#C62828
  • gitDecoration.modifiedResourceForeground#C62828
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#EBEEF3
  • input.border#D7DDE5
  • input.foreground#2B2F36
  • input.placeholderForeground#6B7A89
  • inputOption.activeBorder#C62828
  • list.activeSelectionBackground#C6282840
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#C6282830
  • list.highlightForeground#C62828
  • list.hoverBackground#C6282810
  • minimap.background#F5F7FA
  • minimapSlider.activeBackground#6B7A8966
  • minimapSlider.background#6B7A8922
  • minimapSlider.hoverBackground#6B7A8944
  • panel.background#F5F7FA
  • panel.border#D7DDE5
  • panelTitle.activeBorder#C62828
  • panelTitle.activeForeground#2B2F36
  • panelTitle.inactiveForeground#6B7A89
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#6B7A4488
  • scrollbarSlider.background#6B7A8944
  • scrollbarSlider.hoverBackground#6B7A4466
  • sideBar.background#EBEEF3
  • sideBar.foreground#2B2F36
  • sideBarSectionHeader.background#D7DDE5
  • sideBarSectionHeader.foreground#2B2F36
  • sideBarTitle.foreground#2B2F36
  • statusBar.background#C62828
  • statusBar.debuggingBackground#C62828
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#D7DDE5
  • statusBarItem.hoverBackground#C6282880
  • tab.activeBackground#F5F7FA
  • tab.activeBorder#C62828
  • tab.activeForeground#2B2F36
  • tab.border#D7DDE5
  • tab.inactiveBackground#EBEEF3
  • tab.inactiveForeground#6B7A89
  • terminal.ansiBlue#3A96A5
  • terminal.ansiBrightBlue#5C6BC0
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#AB47BC
  • terminal.ansiBrightRed#FF5252
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#26A69A
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#9C27B0
  • terminal.ansiRed#C62828
  • terminal.ansiYellow#FFB300
  • terminal.background#F5F7FA
  • terminal.foreground#2B2F36
  • titleBar.activeBackground#D7DDE5
  • titleBar.activeForeground#2B2F36
  • titleBar.inactiveBackground#EBEEF3
  • titleBar.inactiveForeground#6B7A89

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7A89italic
string, string.quoted, string.template#26A69A
keyword, storage.type, storage.modifier#C62828bold
keyword.operator, punctuation.accessor#FF9800
variable, variable.other#2B2F36
variable.parameter#26A69Aitalic
entity.name.function, support.function#3A96A5
meta.function-call#C62828
entity.name.class, entity.name.type.class, support.class#9C27B0bold
entity.name.type, support.type#5C6BC0
entity.name.type.interface#4CAF50italic
constant.numeric#FFB300
constant, constant.language, constant.character#4CAF50
constant.language.boolean#C62828bold
variable.other.property, support.variable.property#5C6BC0
meta.object-literal.key#5C6BC0
entity.name.tag, punctuation.definition.tag#C62828
entity.other.attribute-name#9C27B0italic
punctuation, meta.brace#6B7A89
string.regexp#C62828
constant.character.escape#9C27B0
meta.decorator, punctuation.decorator#FFB300
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#C62828bold
markup.bold#FFB300bold
markup.italic#FF9800italic
markup.underline.link#5C6BC0
markup.inline.raw, markup.fenced_code#26A69A
support.type.property-name.json#5C6BC0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#9C27B0
support.type.property-name.css#5C6BC0
support.constant.property-value.css#4CAF50