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#D8A657
  • activityBar.background#26232D
  • activityBar.foreground#D8A657
  • activityBarBadge.background#D8A657
  • activityBarBadge.foreground#1E1B24
  • badge.background#D8A657
  • badge.foreground#1E1B24
  • button.background#5A7D8F
  • button.foreground#FFFFFF
  • button.hoverBackground#5A7D8FCC
  • dropdown.background#26232D
  • dropdown.border#5A7D8F
  • dropdown.foreground#E2E0E6
  • editor.background#1E1B24
  • editor.findMatchBackground#D8A65766
  • editor.findMatchHighlightBackground#D8A65733
  • editor.foreground#E2E0E6
  • editor.lineHighlightBackground#26232D80
  • editor.lineHighlightBorder#D8A657
  • editor.selectionBackground#D8A65744
  • editor.selectionHighlightBackground#D8A65722
  • editorBracketMatch.background#D8A65733
  • editorBracketMatch.border#D8A657
  • editorCursor.foreground#D8A657
  • editorGroupHeader.tabsBackground#1E1B24
  • editorIndentGuide.activeBackground#5A7D8F88
  • editorIndentGuide.background#5A7D8F44
  • editorLineNumber.activeForeground#D8A657
  • editorLineNumber.foreground#6B6A7B
  • editorWhitespace.foreground#5A7D8F
  • focusBorder#D8A657
  • gitDecoration.conflictingResourceForeground#D8A657
  • gitDecoration.deletedResourceForeground#C94F4F
  • gitDecoration.modifiedResourceForeground#D8A657
  • gitDecoration.untrackedResourceForeground#E8C47F
  • input.background#26232D
  • input.border#5A7D8F
  • input.foreground#E2E0E6
  • input.placeholderForeground#6B6A7B
  • inputOption.activeBorder#D8A657
  • list.activeSelectionBackground#26232D
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#26232D
  • list.highlightForeground#D8A657
  • list.hoverBackground#26232D66
  • minimap.background#1E1B24
  • minimapSlider.activeBackground#5A7D8F66
  • minimapSlider.background#5A7D8F22
  • minimapSlider.hoverBackground#5A7D8F44
  • panel.background#1E1B24
  • panel.border#26232D
  • panelTitle.activeBorder#D8A657
  • panelTitle.activeForeground#D8A657
  • panelTitle.inactiveForeground#6B6A7B
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#5A7D8FCC
  • scrollbarSlider.background#5A7D8F44
  • scrollbarSlider.hoverBackground#5A7D8F88
  • sideBar.background#1E1B24
  • sideBar.foreground#E2E0E6
  • sideBarSectionHeader.background#26232D
  • sideBarSectionHeader.foreground#D8A657
  • sideBarTitle.foreground#D8A657
  • statusBar.background#26232D
  • statusBar.debuggingBackground#D8A657
  • statusBar.foreground#E2E0E6
  • statusBar.noFolderBackground#26232D
  • statusBarItem.hoverBackground#5A7D8F66
  • tab.activeBackground#26232D
  • tab.activeBorder#D8A657
  • tab.activeForeground#FFFFFF
  • tab.border#1E1B24
  • tab.inactiveBackground#1E1B24
  • tab.inactiveForeground#A0A0A0
  • terminal.ansiBlue#5A7D8F
  • terminal.ansiBrightBlue#8FA3B4
  • terminal.ansiBrightCyan#9FCFD8
  • terminal.ansiBrightGreen#F0D8A1
  • terminal.ansiBrightMagenta#D0B3C5
  • terminal.ansiBrightRed#FF8C8C
  • terminal.ansiBrightYellow#FFD57F
  • terminal.ansiCyan#6FA5B5
  • terminal.ansiGreen#E8C47F
  • terminal.ansiMagenta#C9A673
  • terminal.ansiRed#C94F4F
  • terminal.ansiYellow#D8A657
  • terminal.background#1E1B24
  • terminal.foreground#E2E0E6
  • titleBar.activeBackground#26232D
  • titleBar.activeForeground#E2E0E6
  • titleBar.inactiveBackground#1E1B24
  • titleBar.inactiveForeground#6B6A7B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B6A7Bitalic
string, string.quoted, string.template#E8C47F
keyword, storage.type, storage.modifier#D8A657bold
keyword.operator, punctuation.accessor#8FA3B4
variable, variable.other#E2E0E6
variable.parameter#E8C47Fitalic
entity.name.function, support.function#D8A657
meta.function-call#D8A657
entity.name.class, entity.name.type.class, support.class#5A7D8Fbold
entity.name.type, support.type#5A7D8F
entity.name.type.interface#E8C47Fitalic
constant.numeric#D8A657
constant, constant.language, constant.character#E8C47F
constant.language.boolean#D8A657bold
variable.other.property, support.variable.property#E2E0E6
meta.object-literal.key#D8A657
entity.name.tag, punctuation.definition.tag#D8A657
entity.other.attribute-name#5A7D8Fitalic
punctuation, meta.brace#E2E0E6
string.regexp#C9A673
constant.character.escape#C9A673
meta.decorator, punctuation.decorator#D8A657
invalid, invalid.illegal#C94F4Fstrikethrough
markup.heading, entity.name.section#D8A657bold
markup.bold#D8A657bold
markup.italic#5A7D8Fitalic
markup.underline.link#5A7D8F
markup.inline.raw, markup.fenced_code#C9A673
support.type.property-name.json#D8A657
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D8A657
support.type.property-name.css#5A7D8F
support.constant.property-value.css#C9A673