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#D32F2F
  • activityBar.background#ECEFF1
  • activityBar.foreground#212121
  • activityBarBadge.background#D32F2F
  • activityBarBadge.foreground#FFFFFF
  • badge.background#D32F2F
  • badge.foreground#FFFFFF
  • button.background#D32F2F
  • button.foreground#FFFFFF
  • button.hoverBackground#D32F2F88
  • dropdown.background#EEEEEE
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FF980044
  • editor.findMatchHighlightBackground#FF980022
  • editor.foreground#212121
  • editor.lineHighlightBackground#E3F2FD80
  • editor.lineHighlightBorder#BBDEFB
  • editor.selectionBackground#D32F2F33
  • editor.selectionHighlightBackground#D32F2F22
  • editorBracketMatch.background#D32F2F33
  • editorBracketMatch.border#D32F2F
  • editorCursor.foreground#D32F2F
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#BDBDBD88
  • editorIndentGuide.background#BDBDBD44
  • editorLineNumber.activeForeground#D32F2F
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#D32F2F
  • gitDecoration.conflictingResourceForeground#FBC02D
  • gitDecoration.deletedResourceForeground#D50000
  • gitDecoration.modifiedResourceForeground#D32F2F
  • gitDecoration.untrackedResourceForeground#388E3C
  • input.background#EEEEEE
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#D32F2F
  • list.activeSelectionBackground#D32F2F66
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#D32F2F44
  • list.highlightForeground#D32F2F
  • list.hoverBackground#D32F2F33
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#D32F2F66
  • minimapSlider.background#D32F2F22
  • minimapSlider.hoverBackground#D32F2F44
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#D32F2F
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#D32F2F88
  • scrollbarSlider.background#BDBDBD44
  • scrollbarSlider.hoverBackground#BDBDBD88
  • sideBar.background#F5F5F5
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#D32F2F
  • statusBar.debuggingBackground#FF9800
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#ECEFF1
  • statusBarItem.hoverBackground#D32F2F55
  • tab.activeBackground#FAFAFA
  • tab.activeBorder#D32F2F
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#1976D2
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#0097A7
  • terminal.ansiGreen#388E3C
  • terminal.ansiMagenta#C2185B
  • terminal.ansiRed#D32F2F
  • terminal.ansiYellow#FBC02D
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#ECEFF1
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#757575italic
string, string.quoted, string.template#FF6F00
keyword, storage.type, storage.modifier#D32F2Fbold
keyword.operator, punctuation.accessor#1976D2
variable, variable.other#212121
variable.parameter#1976D2italic
entity.name.function, support.function#C2185B
meta.function-call#E64A19
entity.name.class, entity.name.type.class, support.class#388E3Cbold
entity.name.type, support.type#7B1FA2
entity.name.type.interface#F57C00italic
constant.numeric#FBC02D
constant, constant.language, constant.character#FBC02D
constant.language.boolean#C2185Bbold
variable.other.property, support.variable.property#0097A7
meta.object-literal.key#0097A7
entity.name.tag, punctuation.definition.tag#D32F2F
entity.other.attribute-name#E64A19italic
punctuation, meta.brace#9E9E9E
string.regexp#7B1FA2
constant.character.escape#C2185B
meta.decorator, punctuation.decorator#F57C00
invalid, invalid.illegal#D50000strikethrough
markup.heading, entity.name.section#D32F2Fbold
markup.bold#C2185Bbold
markup.italic#757575italic
markup.underline.link#1976D2
markup.inline.raw, markup.fenced_code#009688
support.type.property-name.json#D32F2F
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#E64A19
support.type.property-name.css#388E3C
support.constant.property-value.css#0097A7