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—