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