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#F9C80E
  • activityBar.background#C41E3A
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#F9C80E
  • activityBarBadge.foreground#212121
  • badge.background#F9C80E
  • badge.foreground#212121
  • button.background#C41E3A
  • button.foreground#FFFFFF
  • button.hoverBackground#A3172E
  • dropdown.background#FFFFFF
  • dropdown.border#C41E3A
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFCDD2
  • editor.findMatchHighlightBackground#FF8A80
  • editor.foreground#212121
  • editor.lineHighlightBackground#FFF3E0
  • editor.lineHighlightBorder#FFE0B2
  • editor.selectionBackground#FFEBEE
  • editor.selectionHighlightBackground#FFCDD2
  • editorBracketMatch.background#FFE0B2
  • editorBracketMatch.border#F9C80E
  • editorCursor.foreground#C41E3A
  • editorGroupHeader.tabsBackground#F7F7F7
  • editorIndentGuide.activeBackground#C41E3A
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#C41E3A
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#F9C80E
  • gitDecoration.conflictingResourceForeground#AB47BC
  • gitDecoration.deletedResourceForeground#C41E3A
  • gitDecoration.modifiedResourceForeground#42A5F5
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#FFFFFF
  • input.border#C41E3A
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#F9C80E
  • list.activeSelectionBackground#FFEBEE
  • list.activeSelectionForeground#C41E3A
  • list.focusBackground#FFE0B2
  • list.highlightForeground#F9C80E
  • list.hoverBackground#FFF3E0
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#75757580
  • minimapSlider.background#BDBDBD80
  • minimapSlider.hoverBackground#9E9E9E80
  • panel.background#F7F7F7
  • panel.border#E0E0E0
  • panelTitle.activeBorder#F9C80E
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#6A737D
  • scrollbar.shadow#00000020
  • scrollbarSlider.activeBackground#75757580
  • scrollbarSlider.background#BDBDBD80
  • scrollbarSlider.hoverBackground#9E9E9E80
  • sideBar.background#F7F7F7
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FFFFFF
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#C41E3A
  • statusBar.background#C41E3A
  • statusBar.debuggingBackground#8BC34A
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#F9C80E
  • statusBarItem.hoverBackground#A3172E
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#F9C80E
  • tab.activeForeground#C41E3A
  • tab.border#E0E0E0
  • tab.inactiveBackground#F7F7F7
  • tab.inactiveForeground#6A737D
  • terminal.ansiBlue#42A5F5
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#9CCC65
  • terminal.ansiBrightMagenta#BA68C8
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFD54F
  • terminal.ansiCyan#00ACC1
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#AB47BC
  • terminal.ansiRed#C41E3A
  • terminal.ansiYellow#F9C80E
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#C41E3A
  • titleBar.activeForeground#FFFFFF
  • titleBar.inactiveBackground#E0E0E0
  • titleBar.inactiveForeground#212121

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#E53935
keyword, storage.type, storage.modifier#C41E3Abold
keyword.operator, punctuation.accessor#5C5C5C
variable, variable.other#8BC34A
variable.parameter#00ACC1italic
entity.name.function, support.function#42A5F5
meta.function-call#00ACC1
entity.name.class, entity.name.type.class, support.class#AB47BCbold
entity.name.type, support.type#F57C00
entity.name.type.interface#7E57C2italic
constant.numeric#D32F2F
constant, constant.language, constant.character#00ACC1
constant.language.boolean#C41E3Abold
variable.other.property, support.variable.property#795548
meta.object-literal.key#AB47BC
entity.name.tag, punctuation.definition.tag#C41E3A
entity.other.attribute-name#8BC34Aitalic
punctuation, meta.brace#5C5C5C
string.regexp#F57C00
constant.character.escape#AB47BC
meta.decorator, punctuation.decorator#F9C80E
invalid, invalid.illegal#FF5252strikethrough
markup.heading, entity.name.section#C41E3Abold
markup.bold#C41E3Abold
markup.italic#8BC34Aitalic
markup.underline.link#42A5F5
markup.inline.raw, markup.fenced_code#5C5C5C
support.type.property-name.json#AB47BC
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8BC34A
support.type.property-name.css#F57C00
support.constant.property-value.css#42A5F5