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.background#2D2D2D
  • activityBar.border#1A1A1A
  • activityBar.foreground#E8D4C0
  • activityBar.inactiveForeground#8B8178
  • activityBarBadge.background#D98E7E
  • activityBarBadge.foreground#2D2D2D
  • button.background#D98E7E
  • button.foreground#2D2D2D
  • button.hoverBackground#A6755E
  • button.secondaryBackground#5C4A41
  • button.secondaryForeground#E8D4C0
  • button.secondaryHoverBackground#725548
  • editor.background#2D2D2D
  • editor.foreground#E8D4C0
  • editor.lineHighlightBackground#38343280
  • editor.lineHighlightBorder#1A1A1A
  • editor.selectionBackground#5C4A4180
  • editor.selectionHighlightBackground#5C4A4140
  • editor.wordHighlightBackground#5C4A4130
  • editor.wordHighlightStrongBackground#5C4A4150
  • editorGroupHeader.tabsBackground#2D2D2D
  • editorHoverWidget.background#383432
  • editorHoverWidget.border#1A1A1A
  • editorWidget.background#383432
  • editorWidget.border#1A1A1A
  • foreground#E8D4C0
  • input.background#383432
  • input.border#1A1A1A
  • input.foreground#E8D4C0
  • input.placeholderForeground#8B8178
  • inputValidation.infoBackground#5C4A41
  • inputValidation.infoBorder#D98E7E
  • list.activeSelectionBackground#5C4A4180
  • list.activeSelectionForeground#E8D4C0
  • list.dropBackground#5C4A4140
  • list.highlightForeground#D98E7E
  • list.hoverBackground#38343280
  • list.inactiveSelectionBackground#38343260
  • notifications.background#383432
  • notifications.border#1A1A1A
  • panel.border#1A1A1A
  • panelTitle.activeBorder#D98E7E
  • panelTitle.activeForeground#E8D4C0
  • panelTitle.inactiveForeground#8B8178
  • scrollbar.shadow#1A1A1A
  • scrollbarSlider.activeBackground#D98E7E80
  • scrollbarSlider.background#5C4A4160
  • scrollbarSlider.hoverBackground#5C4A4180
  • sideBar.background#2D2D2D
  • sideBar.border#1A1A1A
  • sideBar.foreground#E8D4C0
  • sideBarSectionHeader.background#383432
  • sideBarSectionHeader.border#1A1A1A
  • sideBarSectionHeader.foreground#E8D4C0
  • sideBarTitle.foreground#E8D4C0
  • statusBar.background#D98E7E
  • statusBar.border#1A1A1A
  • statusBar.debuggingBackground#A6755E
  • statusBar.foreground#2D2D2D
  • statusBar.noFolderBackground#5C4A41
  • tab.activeBackground#383432
  • tab.activeBorderTop#D98E7E
  • tab.activeForeground#E8D4C0
  • tab.activeModifiedBorder#D98E7E
  • tab.border#1A1A1A
  • tab.hoverBackground#383432
  • tab.hoverBorder#D98E7E
  • tab.inactiveBackground#2D2D2D
  • tab.inactiveForeground#8B8178
  • terminal.ansiBlack#2D2D2D
  • terminal.ansiBlue#8B8178
  • terminal.ansiBrightBlack#5C5C5C
  • terminal.ansiBrightBlue#A89984
  • terminal.ansiBrightCyan#C5B8A8
  • terminal.ansiBrightGreen#C5B8A8
  • terminal.ansiBrightMagenta#D4BEB2
  • terminal.ansiBrightRed#E8B4A2
  • terminal.ansiBrightWhite#F9F5F0
  • terminal.ansiBrightYellow#F5E6D3
  • terminal.ansiCyan#B4A497
  • terminal.ansiGreen#A89984
  • terminal.ansiMagenta#C49B8A
  • terminal.ansiRed#D98E7E
  • terminal.ansiWhite#E8D4C0
  • terminal.ansiYellow#E8B4A2
  • terminal.background#2D2D2D
  • terminal.foreground#E8D4C0
  • titleBar.activeBackground#2D2D2D
  • titleBar.activeForeground#E8D4C0
  • titleBar.border#1A1A1A
  • titleBar.inactiveBackground#2D2D2D
  • titleBar.inactiveForeground#8B8178
  • widget.shadow#1A1A1A80

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#ebe5d5italic
variable, string constant.other.placeholder#fcfcf0
constant.other.color#fcfcf0
invalid, invalid.illegal#e07e3d
keyword, storage.type, storage.modifier#e07e3d
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#ebe5d5
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#e07e3d
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#fcfcf0
meta.block variable.other#e07e3d
support.other.variable, string.other.link#e07e3d
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#ebe5d5
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#e07e3d
entity.name, support.type, support.class, support.other.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#fcfcf0
support.type#ebe5d5
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#ebe5d5
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e07e3d
variable.language#e07e3ditalic
entity.name.method.js#ebe5d5italic
meta.class-method.js entity.name.function.js, variable.function.constructor#ebe5d5
entity.other.attribute-name#e07e3d
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#fcfcf0italic
entity.other.attribute-name.class#fcfcf0
source.sass keyword.control#ebe5d5
markup.inserted#ebe5d5
markup.deleted#e07e3d
markup.changed#e07e3d
string.regexp#ebe5d5
constant.character.escape#ebe5d5
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#ebe5d5italic
source.js constant.other.object.key.js string.unquoted.label.js#e07e3ditalic
source.json meta.structure.dictionary.json support.type.property-name.json#fcfcf0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ebe5d5
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e07e3d
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#fcfcf0
text.plain#fcfcf0