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#f9a825
  • activityBar.background#181818
  • activityBar.foreground#c62828
  • activityBarBadge.background#c62828
  • activityBarBadge.foreground#ffffff
  • badge.background#f9a825
  • badge.foreground#000000
  • button.background#c62828
  • button.foreground#ffffff
  • button.hoverBackground#d32f2f
  • dropdown.background#2a2a2a
  • dropdown.border#444444
  • dropdown.foreground#e0e0e0
  • editor.background#1b1b1b
  • editor.findMatchBackground#d32f2f80
  • editor.findMatchHighlightBackground#d32f2f40
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2a2a2a
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#c6282840
  • editor.selectionHighlightBackground#f9a82530
  • editorBracketMatch.background#c6282830
  • editorBracketMatch.border#c62828
  • editorCursor.foreground#ffeb3b
  • editorGroupHeader.tabsBackground#1b1b1b
  • editorIndentGuide.activeBackground#777777
  • editorIndentGuide.background#444444
  • editorLineNumber.activeForeground#f9a825
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#555555
  • focusBorder#f9a825
  • gitDecoration.conflictingResourceForeground#e91e63
  • gitDecoration.deletedResourceForeground#c62828
  • gitDecoration.modifiedResourceForeground#f9a825
  • gitDecoration.untrackedResourceForeground#8bc34a
  • input.background#2a2a2a
  • input.border#444444
  • input.foreground#e0e0e0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#c62828
  • list.activeSelectionBackground#c6282840
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#c6282840
  • list.highlightForeground#f9a825
  • list.hoverBackground#2a2a2a
  • minimap.background#1b1b1b
  • minimapSlider.activeBackground#666666
  • minimapSlider.background#44444480
  • minimapSlider.hoverBackground#555555
  • panel.background#212121
  • panel.border#111111
  • panelTitle.activeBorder#c62828
  • panelTitle.activeForeground#f9a825
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#666666
  • scrollbarSlider.background#44444480
  • scrollbarSlider.hoverBackground#555555
  • sideBar.background#212121
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#1e1e1e
  • sideBarSectionHeader.foreground#c62828
  • sideBarTitle.foreground#f9a825
  • statusBar.background#c62828
  • statusBar.debuggingBackground#d32f2f
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#424242
  • statusBarItem.hoverBackground#d84315
  • tab.activeBackground#1e1e1e
  • tab.activeBorder#c62828
  • tab.activeForeground#f9a825
  • tab.border#111111
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196f3
  • terminal.ansiBrightBlue#64b5f6
  • terminal.ansiBrightCyan#26c6da
  • terminal.ansiBrightGreen#aed581
  • terminal.ansiBrightMagenta#f06292
  • terminal.ansiBrightRed#ef5350
  • terminal.ansiBrightYellow#ffeb3b
  • terminal.ansiCyan#00bcd4
  • terminal.ansiGreen#8bc34a
  • terminal.ansiMagenta#e91e63
  • terminal.ansiRed#c62828
  • terminal.ansiYellow#f9a825
  • terminal.background#1b1b1b
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#f9a825
  • titleBar.inactiveBackground#111111
  • titleBar.inactiveForeground#555555

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#777777italic
string, string.quoted, string.template#8bc34a
keyword, storage.type, storage.modifier#c62828bold
keyword.operator, punctuation.accessor#f9a825
variable, variable.other#64b5f6
variable.parameter#00bcd4italic
entity.name.function, support.function#e91e63
meta.function-call#e91e63
entity.name.class, entity.name.type.class, support.class#ff9800bold
entity.name.type, support.type#2196f3
entity.name.type.interface#009688italic
constant.numeric#9c27b0
constant, constant.language, constant.character#009688
constant.language.boolean#c62828bold
variable.other.property, support.variable.property#f9a825
meta.object-literal.key#26c6da
entity.name.tag, punctuation.definition.tag#c62828
entity.other.attribute-name#8bc34aitalic
punctuation, meta.brace#bbbbbb
string.regexp#e91e63
constant.character.escape#ff9800
meta.decorator, punctuation.decorator#2196f3
invalid, invalid.illegal#ff1744strikethrough
markup.heading, entity.name.section#f9a825bold
markup.bold#ff9800bold
markup.italic#009688italic
markup.underline.link#00bcd4
markup.inline.raw, markup.fenced_code#8bc34a
support.type.property-name.json#2196f3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#e91e63
support.type.property-name.css#ff9800
support.constant.property-value.css#009688