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#E53935
  • activityBar.background#111111
  • activityBar.foreground#E5E5E5
  • activityBarBadge.background#E53935
  • activityBarBadge.foreground#FFFFFF
  • badge.background#E53935
  • badge.foreground#FFFFFF
  • button.background#E53935
  • button.foreground#FFFFFF
  • button.hoverBackground#EF5350
  • dropdown.background#1E1E1E
  • dropdown.border#333333
  • dropdown.foreground#E5E5E5
  • editor.background#0A0A0A
  • editor.findMatchBackground#E53935
  • editor.findMatchHighlightBackground#FF6F00
  • editor.foreground#E5E5E5
  • editor.lineHighlightBackground#1E1E1E
  • editor.lineHighlightBorder#333333
  • editor.selectionBackground#333333
  • editor.selectionHighlightBackground#2A2A2A
  • editorBracketMatch.background#2A2A2A
  • editorBracketMatch.border#E53935
  • editorCursor.foreground#E53935
  • editorGroupHeader.tabsBackground#111111
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#2A2A2A
  • editorLineNumber.activeForeground#E5E5E5
  • editorLineNumber.foreground#777777
  • editorWhitespace.foreground#444444
  • focusBorder#E53935
  • gitDecoration.conflictingResourceForeground#F48FB1
  • gitDecoration.deletedResourceForeground#E53935
  • gitDecoration.modifiedResourceForeground#FF6F00
  • gitDecoration.untrackedResourceForeground#8BC34A
  • input.background#1E1E1E
  • input.border#333333
  • input.foreground#E5E5E5
  • input.placeholderForeground#777777
  • inputOption.activeBorder#E53935
  • list.activeSelectionBackground#333333
  • list.activeSelectionForeground#E5E5E5
  • list.focusBackground#2A2A2A
  • list.highlightForeground#E53935
  • list.hoverBackground#2A2A2A
  • minimap.background#0A0A0A
  • minimapSlider.activeBackground#444444
  • minimapSlider.background#2A2A2A
  • minimapSlider.hoverBackground#333333
  • panel.background#111111
  • panel.border#222222
  • panelTitle.activeBorder#E53935
  • panelTitle.activeForeground#E5E5E5
  • panelTitle.inactiveForeground#777777
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#555555
  • scrollbarSlider.background#333333
  • scrollbarSlider.hoverBackground#444444
  • sideBar.background#121212
  • sideBar.foreground#CCCCCC
  • sideBarSectionHeader.background#111111
  • sideBarSectionHeader.foreground#E5E5E5
  • sideBarTitle.foreground#E5E5E5
  • statusBar.background#111111
  • statusBar.debuggingBackground#FF6F00
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#111111
  • statusBarItem.hoverBackground#222222
  • tab.activeBackground#0A0A0A
  • tab.activeBorder#E53935
  • tab.activeForeground#E5E5E5
  • tab.border#222222
  • tab.inactiveBackground#111111
  • tab.inactiveForeground#777777
  • terminal.ansiBlue#2196F3
  • terminal.ansiBrightBlue#64B5F6
  • terminal.ansiBrightCyan#4DD0E1
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#EF5350
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#00BCD4
  • terminal.ansiGreen#8BC34A
  • terminal.ansiMagenta#E91E63
  • terminal.ansiRed#E53935
  • terminal.ansiYellow#FFEB3B
  • terminal.background#0A0A0A
  • terminal.foreground#E5E5E5
  • titleBar.activeBackground#111111
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#0A0A0A
  • titleBar.inactiveForeground#777777

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#E53935bold
keyword.operator, punctuation.accessor#FF6F00
variable, variable.other#E5E5E5
variable.parameter#FF6F00italic
entity.name.function, support.function#2196F3
meta.function-call#64B5F6
entity.name.class, entity.name.type.class, support.class#F48FB1bold
entity.name.type, support.type#FFEB3B
entity.name.type.interface#00BCD4italic
constant.numeric#FF6F00
constant, constant.language, constant.character#E53935
constant.language.boolean#E53935bold
variable.other.property, support.variable.property#FFEB3B
meta.object-literal.key#2196F3
entity.name.tag, punctuation.definition.tag#E53935
entity.other.attribute-name#FFEB3Bitalic
punctuation, meta.brace#777777
string.regexp#FF6F00
constant.character.escape#FF6F00
meta.decorator, punctuation.decorator#F48FB1
invalid, invalid.illegal#EF5350strikethrough
markup.heading, entity.name.section#E53935bold
markup.bold#E53935bold
markup.italic#E5E5E5italic
markup.underline.link#2196F3
markup.inline.raw, markup.fenced_code#FFEB3B
support.type.property-name.json#2196F3
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#F48FB1
support.type.property-name.css#FF6F00
support.constant.property-value.css#8BC34A