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—