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#e0e0e0
  • activityBar.foreground#424242
  • activityBarBadge.background#d32f2f
  • activityBarBadge.foreground#fafafa
  • badge.background#d32f2f
  • badge.foreground#fafafa
  • button.background#d32f2f
  • button.foreground#ffffff
  • button.hoverBackground#c62828
  • dropdown.background#ffffff
  • dropdown.border#c0c0c0
  • dropdown.foreground#212121
  • editor.background#fafafa
  • editor.findMatchBackground#ef9a9a44
  • editor.findMatchHighlightBackground#ef9a9a22
  • editor.foreground#212121
  • editor.lineHighlightBackground#e3f2fd40
  • editor.lineHighlightBorder#90caf940
  • editor.selectionBackground#90caf966
  • editor.selectionHighlightBackground#bbdefb33
  • editorBracketMatch.background#ffcc8077
  • editorBracketMatch.border#d32f2f
  • editorCursor.foreground#d32f2f
  • editorGroupHeader.tabsBackground#fafafa
  • editorIndentGuide.activeBackground#bdbdbd
  • editorIndentGuide.background#e0e0e0
  • editorLineNumber.activeForeground#d32f2f
  • editorLineNumber.foreground#9e9e9e
  • editorWhitespace.foreground#c0c0c0
  • focusBorder#d32f2f
  • gitDecoration.conflictingResourceForeground#fbc02d
  • gitDecoration.deletedResourceForeground#d32f2f
  • gitDecoration.modifiedResourceForeground#1976d2
  • gitDecoration.untrackedResourceForeground#388e3c
  • input.background#ffffff
  • input.border#c0c0c0
  • input.foreground#212121
  • input.placeholderForeground#9e9e9e
  • inputOption.activeBorder#d32f2f
  • list.activeSelectionBackground#bbdefb
  • list.activeSelectionForeground#212121
  • list.focusBackground#bbdefb
  • list.highlightForeground#d32f2f
  • list.hoverBackground#e3f2fd66
  • minimap.background#fafafa
  • minimapSlider.activeBackground#d32f2f66
  • minimapSlider.background#d32f2f22
  • minimapSlider.hoverBackground#d32f2f44
  • panel.background#f5f5f5
  • panel.border#e0e0e0
  • panelTitle.activeBorder#d32f2f
  • panelTitle.activeForeground#d32f2f
  • panelTitle.inactiveForeground#9e9e9e
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#d32f2f88
  • scrollbarSlider.background#9e9e9e44
  • scrollbarSlider.hoverBackground#9e9e9e66
  • sideBar.background#f5f5f5
  • sideBar.foreground#424242
  • sideBarSectionHeader.background#e0e0e0
  • sideBarSectionHeader.foreground#424242
  • sideBarTitle.foreground#424242
  • statusBar.background#e0e0e0
  • statusBar.debuggingBackground#d32f2f
  • statusBar.foreground#212121
  • statusBar.noFolderBackground#f5f5f5
  • statusBarItem.hoverBackground#d6d6d6
  • tab.activeBackground#ffffff
  • tab.activeBorder#d32f2f
  • tab.activeForeground#212121
  • tab.border#c0c0c0
  • tab.inactiveBackground#f5f5f5
  • tab.inactiveForeground#9e9e9e
  • terminal.ansiBlue#1976d2
  • terminal.ansiBrightBlue#2196f3
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#66bb6a
  • terminal.ansiBrightMagenta#ab47bc
  • terminal.ansiBrightRed#e57373
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#0097a7
  • terminal.ansiGreen#388e3c
  • terminal.ansiMagenta#7b1fa2
  • terminal.ansiRed#d32f2f
  • terminal.ansiYellow#fbc02d
  • terminal.background#fafafa
  • terminal.foreground#212121
  • titleBar.activeBackground#e0e0e0
  • titleBar.activeForeground#212121
  • titleBar.inactiveBackground#f0f0f0
  • titleBar.inactiveForeground#9e9e9e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9e9e9eitalic
string, string.quoted, string.template#00695c
keyword, storage.type, storage.modifier#d32f2fbold
keyword.operator, punctuation.accessor#1976d2
variable, variable.other#424242
variable.parameter#00695citalic
entity.name.function, support.function#0d47a1
meta.function-call#1565c0
entity.name.class, entity.name.type.class, support.class#e65100bold
entity.name.type, support.type#6d4c41
entity.name.type.interface#7b1fa2italic
constant.numeric#ff8f00
constant, constant.language, constant.character#f57c00
constant.language.boolean#ff8f00bold
variable.other.property, support.variable.property#5e35b1
meta.object-literal.key#c0ca33
entity.name.tag, punctuation.definition.tag#d84315
entity.other.attribute-name#ad1457italic
punctuation, meta.brace#424242
string.regexp#ffb300
constant.character.escape#d84315
meta.decorator, punctuation.decorator#6a1b9a
invalid, invalid.illegal#b71c1cstrikethrough
markup.heading, entity.name.section#d32f2fbold
markup.bold#f57c00bold
markup.italic#ad1457italic
markup.underline.link#1565c0
markup.inline.raw, markup.fenced_code#00695c
support.type.property-name.json#d32f2f
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#ad1457
support.type.property-name.css#1565c0
support.constant.property-value.css#00695c