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#000000
  • activityBar.background#FFFFFF
  • activityBar.foreground#212121
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#FFFFFF
  • badge.background#000000
  • badge.foreground#FFFFFF
  • button.background#000000
  • button.foreground#FFFFFF
  • button.hoverBackground#424242
  • dropdown.background#FFFFFF
  • dropdown.border#BDBDBD
  • dropdown.foreground#212121
  • editor.background#FFFFFF
  • editor.findMatchBackground#FFEB3B
  • editor.findMatchHighlightBackground#FFF176
  • editor.foreground#212121
  • editor.lineHighlightBackground#EEEEEE
  • editor.lineHighlightBorder#CCCCCC
  • editor.selectionBackground#B3E5FC
  • editor.selectionHighlightBackground#81D4FA
  • editorBracketMatch.background#C8E6C9
  • editorBracketMatch.border#66BB6A
  • editorCursor.foreground#000000
  • editorGroupHeader.tabsBackground#F5F5F5
  • editorIndentGuide.activeBackground#9E9E9E
  • editorIndentGuide.background#E0E0E0
  • editorLineNumber.activeForeground#212121
  • editorLineNumber.foreground#9E9E9E
  • editorWhitespace.foreground#BDBDBD
  • focusBorder#2196F3
  • 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#000000
  • list.activeSelectionBackground#B3E5FC
  • list.activeSelectionForeground#212121
  • list.focusBackground#90CAF9
  • list.highlightForeground#000000
  • list.hoverBackground#E3F2FD
  • minimap.background#FFFFFF
  • minimapSlider.activeBackground#78909C
  • minimapSlider.background#B0BEC5
  • minimapSlider.hoverBackground#90A4AE
  • panel.background#FAFAFA
  • panel.border#E0E0E0
  • panelTitle.activeBorder#000000
  • panelTitle.activeForeground#212121
  • panelTitle.inactiveForeground#757575
  • scrollbar.shadow#BDBDBD
  • scrollbarSlider.activeBackground#90A4AE
  • scrollbarSlider.background#E0E0E0
  • scrollbarSlider.hoverBackground#B0BEC5
  • sideBar.background#FAFAFA
  • sideBar.foreground#212121
  • sideBarSectionHeader.background#E0E0E0
  • sideBarSectionHeader.foreground#212121
  • sideBarTitle.foreground#212121
  • statusBar.background#000000
  • statusBar.debuggingBackground#D32F2F
  • statusBar.foreground#FFFFFF
  • statusBar.noFolderBackground#757575
  • statusBarItem.hoverBackground#424242
  • tab.activeBackground#FFFFFF
  • tab.activeBorder#000000
  • tab.activeForeground#212121
  • tab.border#E0E0E0
  • tab.inactiveBackground#F5F5F5
  • tab.inactiveForeground#9E9E9E
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#26C6DA
  • terminal.ansiBrightGreen#81C784
  • terminal.ansiBrightMagenta#EC407A
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#4CAF50
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#F44336
  • terminal.ansiYellow#FFEB3B
  • terminal.background#FFFFFF
  • terminal.foreground#212121
  • titleBar.activeBackground#FFFFFF
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#F0F0F0
  • titleBar.inactiveForeground#757575

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9E9E9Eitalic
string, string.quoted, string.template#388E3C
keyword, storage.type, storage.modifier#1976D2bold
keyword.operator, punctuation.accessor#616161
variable, variable.other#D32F2F
variable.parameter#757575italic
entity.name.function, support.function#7B1FA2
meta.function-call#512DA8
entity.name.class, entity.name.type.class, support.class#0D47A1bold
entity.name.type, support.type#00695C
entity.name.type.interface#5D4037italic
constant.numeric#F57C00
constant, constant.language, constant.character#C2185B
constant.language.boolean#C62828bold
variable.other.property, support.variable.property#00796B
meta.object-literal.key#5E35B1
entity.name.tag, punctuation.definition.tag#D81B60
entity.other.attribute-name#6D4C41italic
punctuation, meta.brace#9E9E9E
string.regexp#8E24AA
constant.character.escape#E64A19
meta.decorator, punctuation.decorator#5C6BC0
invalid, invalid.illegal#B71C1Cstrikethrough
markup.heading, entity.name.section#283593bold
markup.bold#0D47A1bold
markup.italic#5E35B1italic
markup.underline.link#1565C0
markup.inline.raw, markup.fenced_code#424242
support.type.property-name.json#039BE5
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#2962FF
support.type.property-name.css#00897B
support.constant.property-value.css#F9A825