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#00BFA5
  • activityBar.background#FFFFFF
  • activityBar.foreground#212121
  • activityBarBadge.background#00BFA5
  • activityBarBadge.foreground#FFFFFF
  • badge.background#00BFA5
  • badge.foreground#FFFFFF
  • button.background#00BFA5
  • button.foreground#FFFFFF
  • button.hoverBackground#0097A7
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FAFAFA
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF9C4
  • editor.foreground#212121
  • editor.lineHighlightBackground#E8E8E8
  • editor.lineHighlightBorder#BDBDBD
  • editor.selectionBackground#B2EBF2
  • editor.selectionHighlightBackground#D1C4E9
  • editorBracketMatch.background#B2EBF2
  • editorBracketMatch.border#00BFA5
  • editorCursor.foreground#00BFA5
  • editorGroupHeader.tabsBackground#FAFAFA
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#757575
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#00BFA5
  • gitDecoration.conflictingResourceForeground#E91E63
  • gitDecoration.deletedResourceForeground#F44336
  • gitDecoration.modifiedResourceForeground#FF9800
  • gitDecoration.untrackedResourceForeground#4CAF50
  • input.background#FFFFFF
  • input.border#BDBDBD
  • input.foreground#212121
  • input.placeholderForeground#9E9E9E
  • inputOption.activeBorder#00BFA5
  • list.activeSelectionBackground#B3E5FC
  • list.activeSelectionForeground#212121
  • list.focusBackground#B3E5FC
  • list.highlightForeground#00BFA5
  • list.hoverBackground#E3F2FD
  • minimap.background#FAFAFA
  • minimapSlider.activeBackground#757575
  • minimapSlider.background#BDBDBD
  • minimapSlider.hoverBackground#9E9E9E
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#00BFA5
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#9E9E9E
  • scrollbarSlider.background#E0E0E0
  • scrollbarSlider.hoverBackground#BDBDBD
  • sideBar.background#FFFFFF
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#FAFAFA
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#EEEEEE
  • statusBar.debuggingBackground#00BFA5
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#EEEEEE
  • statusBarItem.hoverBackground#E0E0E0
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#00BFA5
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#757575
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#F06292
  • terminal.ansiBrightRed#E57373
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FAFAFA
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F5F5F5
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#009688
keyword, storage.type, storage.modifier#FFC107bold
keyword.operator, punctuation.accessor#FF9800
variable, variable.other#212121
variable.parameter#757575italic
entity.name.function, support.function#1976D2
meta.function-call#1565C0
entity.name.class, entity.name.type.class, support.class#6A1B9Abold
entity.name.type, support.type#7E57C2
entity.name.type.interface#AD1457italic
constant.numeric#F57C00
constant, constant.language, constant.character#FF5722
constant.language.boolean#D32F2Fbold
variable.other.property, support.variable.property#009688
meta.object-literal.key#795548
entity.name.tag, punctuation.definition.tag#D50000
entity.other.attribute-name#3E2723italic
punctuation, meta.brace#616161
string.regexp#C51162
constant.character.escape#E91E63
meta.decorator, punctuation.decorator#8E24AA
invalid, invalid.illegal#B00020strikethrough
markup.heading, entity.name.section#0D47A1bold
markup.bold#212121bold
markup.italic#424242italic
markup.underline.link#1565C0
markup.inline.raw, markup.fenced_code#00796B
support.type.property-name.json#7B1FA2
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#00695C
support.type.property-name.css#BF360C
support.constant.property-value.css#EF6C00