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#ff9e4a
  • activityBar.background#1a1a1a
  • activityBar.foreground#e0e0e0
  • activityBarBadge.background#ff9e4a
  • activityBarBadge.foreground#1a1a1a
  • badge.background#ff9e4a
  • badge.foreground#1a1a1a
  • button.background#ff9e4a
  • button.foreground#1a1a1a
  • button.hoverBackground#ffb785
  • dropdown.background#252525
  • dropdown.border#ff9e4a
  • dropdown.foreground#e0e0e0
  • editor.background#1a1a1a
  • editor.findMatchBackground#ffb78560
  • editor.findMatchHighlightBackground#ffb78540
  • editor.foreground#e0e0e0
  • editor.lineHighlightBackground#2b2b2b40
  • editor.lineHighlightBorder#ff9e4a
  • editor.selectionBackground#ff9e4a60
  • editor.selectionHighlightBackground#ff9e4a40
  • editorBracketMatch.background#ff9e4a33
  • editorBracketMatch.border#ff9e4a
  • editorCursor.foreground#ff9e4a
  • editorGroupHeader.tabsBackground#1a1a1a
  • editorIndentGuide.activeBackground#ff9e4a
  • editorIndentGuide.background#2a2a2a
  • editorLineNumber.activeForeground#ff9e4a
  • editorLineNumber.foreground#5a6a73
  • editorWhitespace.foreground#5a6a73
  • focusBorder#ff9e4a
  • gitDecoration.conflictingResourceForeground#ffcc66
  • gitDecoration.deletedResourceForeground#ff9e4a
  • gitDecoration.modifiedResourceForeground#ff9e4a
  • gitDecoration.untrackedResourceForeground#ffb785
  • input.background#252525
  • input.border#ff9e4a
  • input.foreground#e0e0e0
  • input.placeholderForeground#5a6a73
  • inputOption.activeBorder#ff9e4a
  • list.activeSelectionBackground#ff9e4a10
  • list.activeSelectionForeground#e0e0e0
  • list.focusBackground#ff9e4a30
  • list.highlightForeground#ff9e4a
  • list.hoverBackground#ff9e4a20
  • minimap.background#1a1a1a
  • minimapSlider.activeBackground#ff9e4a66
  • minimapSlider.background#ff9e4a22
  • minimapSlider.hoverBackground#ff9e4a44
  • panel.background#1a1a1a
  • panel.border#252525
  • panelTitle.activeBorder#ff9e4a
  • panelTitle.activeForeground#e0e0e0
  • panelTitle.inactiveForeground#5a6a73
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#ff9e4a88
  • scrollbarSlider.background#2a2a2a60
  • scrollbarSlider.hoverBackground#2a2a2a88
  • sideBar.background#252525
  • sideBar.foreground#e0e0e0
  • sideBarSectionHeader.background#2b2b2b
  • sideBarSectionHeader.foreground#ff9e4a
  • sideBarTitle.foreground#ff9e4a
  • statusBar.background#ff9e4a
  • statusBar.debuggingBackground#ffb785
  • statusBar.foreground#1a1a1a
  • statusBar.noFolderBackground#252525
  • statusBarItem.hoverBackground#ffb785
  • tab.activeBackground#1a1a1a
  • tab.activeBorder#ff9e4a
  • tab.activeForeground#e0e0e0
  • tab.border#1a1a1a
  • tab.inactiveBackground#252525
  • tab.inactiveForeground#8a9ba5
  • terminal.ansiBlue#4ec9b0
  • terminal.ansiBrightBlue#72d6ea
  • terminal.ansiBrightCyan#96f7d2
  • terminal.ansiBrightGreen#a6e68c
  • terminal.ansiBrightMagenta#e2a2e0
  • terminal.ansiBrightRed#ffb785
  • terminal.ansiBrightYellow#ffdf99
  • terminal.ansiCyan#6be6c3
  • terminal.ansiGreen#8fdc82
  • terminal.ansiMagenta#c78cd8
  • terminal.ansiRed#ff9e4a
  • terminal.ansiYellow#ffcc66
  • terminal.background#1a1a1a
  • terminal.foreground#e0e0e0
  • titleBar.activeBackground#1a1a1a
  • titleBar.activeForeground#e0e0e0
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#8a9ba5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5a6a73italic
string, string.quoted, string.template#6be6c3
keyword, storage.type, storage.modifier#ff9e4abold
keyword.operator, punctuation.accessor#4ec9b0
variable, variable.other#b0b0b0
variable.parameter#b0b0b0italic
entity.name.function, support.function#8fdc82
meta.function-call#8fdc82
entity.name.class, entity.name.type.class, support.class#ffcc66bold
entity.name.type, support.type#ffcc66
entity.name.type.interface#ffcc66italic
constant.numeric#a6e68c
constant, constant.language, constant.character#a6e68c
constant.language.boolean#ff9e4abold
variable.other.property, support.variable.property#b0b0b0
meta.object-literal.key#b0b0b0
entity.name.tag, punctuation.definition.tag#ffcc66
entity.other.attribute-name#4ec9b0italic
punctuation, meta.brace#5a6a73
string.regexp#ff9e4a
constant.character.escape#ff9e4a
meta.decorator, punctuation.decorator#8fdc82
invalid, invalid.illegal#ff9e4astrikethrough
markup.heading, entity.name.section#ff9e4abold
markup.bold#ffcc66bold
markup.italic#5a6a73italic
markup.underline.link#ff9e4a
markup.inline.raw, markup.fenced_code#6be6c3
support.type.property-name.json#4ec9b0
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#8fdc82
support.type.property-name.css#4ec9b0
support.constant.property-value.css#ff9e4a