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#5A7FA3
  • activityBar.background#211D17
  • activityBar.foreground#B68F55
  • activityBarBadge.background#5A7FA3
  • activityBarBadge.foreground#1A1510
  • badge.background#5A7FA3
  • badge.foreground#1A1510
  • button.background#2A2420
  • button.foreground#E0D8C9
  • button.hoverBackground#3A332C
  • dropdown.background#221F19
  • dropdown.border#2A2420
  • dropdown.foreground#E0D8C9
  • editor.background#1A1510
  • editor.findMatchBackground#B68F5544
  • editor.findMatchHighlightBackground#B68F5522
  • editor.foreground#E0D8C9
  • editor.lineHighlightBackground#2E2822
  • editor.lineHighlightBorder#5A7FA3
  • editor.selectionBackground#5A7FA380
  • editor.selectionHighlightBackground#5A7FA340
  • editorBracketMatch.background#5A7FA333
  • editorBracketMatch.border#5A7FA3
  • editorCursor.foreground#5A7FA3
  • editorGroupHeader.tabsBackground#1A1510
  • editorIndentGuide.activeBackground#4A3F3A88
  • editorIndentGuide.background#4A3F3A44
  • editorLineNumber.activeForeground#B68F55
  • editorLineNumber.foreground#4A3F3A
  • editorWhitespace.foreground#4A3F3A
  • focusBorder#5A7FA3
  • gitDecoration.conflictingResourceForeground#C97438
  • gitDecoration.deletedResourceForeground#A8584F
  • gitDecoration.modifiedResourceForeground#5A7FA3
  • gitDecoration.untrackedResourceForeground#8A9F6C
  • input.background#221F19
  • input.border#2A2420
  • input.foreground#E0D8C9
  • input.placeholderForeground#5C5C5C
  • inputOption.activeBorder#5A7FA3
  • list.activeSelectionBackground#5A7FA3
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#5A7FA3
  • list.highlightForeground#5A7FA3
  • list.hoverBackground#5A7FA340
  • minimap.background#1A1510
  • minimapSlider.activeBackground#5A7FA366
  • minimapSlider.background#5A7FA322
  • minimapSlider.hoverBackground#5A7FA344
  • panel.background#1A1510
  • panel.border#2A2420
  • panelTitle.activeBorder#5A7FA3
  • panelTitle.activeForeground#5A7FA3
  • panelTitle.inactiveForeground#B68F55
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A7FA388
  • scrollbarSlider.background#4A3F3A44
  • scrollbarSlider.hoverBackground#4A3F3A88
  • sideBar.background#221F19
  • sideBar.foreground#E0D8C9
  • sideBarSectionHeader.background#1F1B15
  • sideBarSectionHeader.foreground#5A7FA3
  • sideBarTitle.foreground#5A7FA3
  • statusBar.background#2A2420
  • statusBar.debuggingBackground#5A7FA3
  • statusBar.foreground#E0D8C9
  • statusBar.noFolderBackground#211D17
  • statusBarItem.hoverBackground#3A332C
  • tab.activeBackground#2A2420
  • tab.activeBorder#5A7FA3
  • tab.activeForeground#FFFFFF
  • tab.border#1A1510
  • tab.inactiveBackground#221F19
  • tab.inactiveForeground#B68F55
  • terminal.ansiBlue#5A7FA3
  • terminal.ansiBrightBlue#7B9FCB
  • terminal.ansiBrightCyan#96B8D4
  • terminal.ansiBrightGreen#A0B78F
  • terminal.ansiBrightMagenta#B78FA0
  • terminal.ansiBrightRed#C0756D
  • terminal.ansiBrightYellow#D8965A
  • terminal.ansiCyan#7BA5C4
  • terminal.ansiGreen#8A9F6C
  • terminal.ansiMagenta#9F6C8A
  • terminal.ansiRed#A8584F
  • terminal.ansiYellow#C97438
  • terminal.background#1A1510
  • terminal.foreground#E0D8C9
  • titleBar.activeBackground#211D17
  • titleBar.activeForeground#E0D8C9
  • titleBar.inactiveBackground#1A1510
  • titleBar.inactiveForeground#B68F55

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C5C5Citalic
string, string.quoted, string.template#C97438
keyword, storage.type, storage.modifier#5A7FA3bold
keyword.operator, punctuation.accessor#7BA5C4
variable, variable.other#E0D8C9
variable.parameter#B68F55italic
entity.name.function, support.function#7BA5C4
meta.function-call#B68F55
entity.name.class, entity.name.type.class, support.class#5A7FA3bold
entity.name.type, support.type#7BA5C4
entity.name.type.interface#8A9F6Citalic
constant.numeric#C97438
constant, constant.language, constant.character#B68F55
constant.language.boolean#A8584Fbold
variable.other.property, support.variable.property#B68F55
meta.object-literal.key#7BA5C4
entity.name.tag, punctuation.definition.tag#5A7FA3
entity.other.attribute-name#8A9F6Citalic
punctuation, meta.brace#7BA5C4
string.regexp#C97438
constant.character.escape#9F6C8A
meta.decorator, punctuation.decorator#C97438
invalid, invalid.illegal#A8584Fstrikethrough
markup.heading, entity.name.section#5A7FA3bold
markup.bold#C97438bold
markup.italic#8A9F6Citalic
markup.underline.link#7BA5C4
markup.inline.raw, markup.fenced_code#8A9F6C
support.type.property-name.json#7BA5C4
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#C97438
support.type.property-name.css#7BA5C4
support.constant.property-value.css#B68F55