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#E5A444
  • activityBar.background#1E120C
  • activityBar.foreground#E5A444
  • activityBarBadge.background#E5A444
  • activityBarBadge.foreground#2A1912
  • badge.background#E5A444
  • badge.foreground#2A1912
  • button.background#342622
  • button.foreground#EFE0D0
  • button.hoverBackground#3C2E28
  • dropdown.background#261D16
  • dropdown.border#342622
  • dropdown.foreground#EFE0D0
  • editor.background#2A1912
  • editor.findMatchBackground#E5A44444
  • editor.findMatchHighlightBackground#E5A44422
  • editor.foreground#EFE0D0
  • editor.lineHighlightBackground#34262266
  • editor.lineHighlightBorder#342622AA
  • editor.selectionBackground#3F7C8D66
  • editor.selectionHighlightBackground#3F7C8D33
  • editorBracketMatch.background#3F7C8D33
  • editorBracketMatch.border#E5A444
  • editorCursor.foreground#E5A444
  • editorGroupHeader.tabsBackground#2A1912
  • editorIndentGuide.activeBackground#3C2E2888
  • editorIndentGuide.background#3C2E2844
  • editorLineNumber.activeForeground#E5A444
  • editorLineNumber.foreground#3F7C8D
  • editorWhitespace.foreground#3C2E28
  • focusBorder#E5A444
  • gitDecoration.conflictingResourceForeground#C89A6F
  • gitDecoration.deletedResourceForeground#D47A5C
  • gitDecoration.modifiedResourceForeground#E5A444
  • gitDecoration.untrackedResourceForeground#86C17C
  • input.background#261D16
  • input.border#342622
  • input.foreground#EFE0D0
  • input.placeholderForeground#6E6157
  • inputOption.activeBorder#E5A444
  • list.activeSelectionBackground#342622
  • list.activeSelectionForeground#E5A444
  • list.focusBackground#342622
  • list.highlightForeground#E5A444
  • list.hoverBackground#34262266
  • minimap.background#2A1912
  • minimapSlider.activeBackground#3F7C8D66
  • minimapSlider.background#3F7C8D22
  • minimapSlider.hoverBackground#3F7C8D44
  • panel.background#2A1912
  • panel.border#342622
  • panelTitle.activeBorder#E5A444
  • panelTitle.activeForeground#E5A444
  • panelTitle.inactiveForeground#E5D8CC
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#3F7C8D88
  • scrollbarSlider.background#3C2E2844
  • scrollbarSlider.hoverBackground#3C2E2888
  • sideBar.background#261D16
  • sideBar.foreground#E5D8CC
  • sideBarSectionHeader.background#1E120C
  • sideBarSectionHeader.foreground#E5A444
  • sideBarTitle.foreground#E5A444
  • statusBar.background#342622
  • statusBar.debuggingBackground#3F7C8D
  • statusBar.foreground#EFE0D0
  • statusBar.noFolderBackground#1E120C
  • statusBarItem.hoverBackground#3C2E28
  • tab.activeBackground#342622
  • tab.activeBorder#E5A444
  • tab.activeForeground#E5A444
  • tab.border#2A1912
  • tab.inactiveBackground#261D16
  • tab.inactiveForeground#E5D8CC
  • terminal.ansiBlue#3F7C8D
  • terminal.ansiBrightBlue#5A99A8
  • terminal.ansiBrightCyan#9BD89D
  • terminal.ansiBrightGreen#9BD89D
  • terminal.ansiBrightMagenta#E6B983
  • terminal.ansiBrightRed#E58A6C
  • terminal.ansiBrightYellow#FFCB71
  • terminal.ansiCyan#86C17C
  • terminal.ansiGreen#86C17C
  • terminal.ansiMagenta#C89A6F
  • terminal.ansiRed#D47A5C
  • terminal.ansiYellow#E5A444
  • terminal.background#2A1912
  • terminal.foreground#EFE0D0
  • titleBar.activeBackground#1E120C
  • titleBar.activeForeground#EFE0D0
  • titleBar.inactiveBackground#2A1912
  • titleBar.inactiveForeground#E5D8CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6E6157italic
string, string.quoted, string.template#86C17C—
keyword, storage.type, storage.modifier#E5A444bold
keyword.operator, punctuation.accessor#E5D8CC—
variable, variable.other#EFE0D0—
variable.parameter#D4A574italic
entity.name.function, support.function#E5A444—
meta.function-call#E5D8CC—
entity.name.class, entity.name.type.class, support.class#D4A574bold
entity.name.type, support.type#D4A574—
entity.name.type.interface#3F7C8Ditalic
constant.numeric#D47A5C—
constant, constant.language, constant.character#D4A574—
constant.language.boolean#D47A5Cbold
variable.other.property, support.variable.property#E5D8CC—
meta.object-literal.key#E5A444—
entity.name.tag, punctuation.definition.tag#E5A444—
entity.other.attribute-name#3F7C8Ditalic
punctuation, meta.brace#E5D8CC—
string.regexp#D47A5C—
constant.character.escape#86C17C—
meta.decorator, punctuation.decorator#D4A574—
invalid, invalid.illegal#D47A5Cstrikethrough
markup.heading, entity.name.section#E5A444bold
markup.bold#D4A574bold
markup.italic#3F7C8Ditalic
markup.underline.link#86C17C—
markup.inline.raw, markup.fenced_code#86C17C—
support.type.property-name.json#E5A444—
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D4A574—
support.type.property-name.css#E5A444—
support.constant.property-value.css#86C17C—