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#292522
  • activityBar.border#292522
  • activityBar.foreground#ffe9c3
  • activityBarBadge.background#ffb454
  • activityBarBadge.foreground#292522
  • dropdown.background#292522
  • dropdown.border#292522
  • dropdown.foreground#ffe9c3
  • editor.background#292522
  • editor.foreground#ffe9c3
  • editor.lineHighlightBackground#343434
  • editorGroup.border#292522
  • editorGroupHeader.tabsBackground#292522
  • editorGroupHeader.tabsBorder#292522
  • editorLineNumber.activeForeground#ffb454
  • editorLineNumber.foreground#bf9060
  • editorRuler.foreground#3a2f23
  • editorWidget.background#3a2f23
  • editorWidget.border#292522
  • focusBorder#ffb454
  • input.background#3a2f23
  • input.border#292522
  • input.foreground#ffe9c3
  • input.placeholderForeground#bf9060
  • list.activeSelectionBackground#3a2f23
  • list.activeSelectionForeground#ffb454
  • list.hoverBackground#3a2f23
  • list.hoverForeground#ffb454
  • list.inactiveSelectionBackground#292522
  • list.inactiveSelectionForeground#ffe9c3
  • menu.background#292522
  • menu.border#292522
  • menu.foreground#ffe9c3
  • menu.selectionBackground#3a2f23
  • menu.selectionForeground#ffb454
  • menu.separatorBackground#292522
  • minimap.background#292522
  • minimapSlider.activeBackground#ffb45444
  • minimapSlider.background#3a2f2388
  • minimapSlider.hoverBackground#ffb45444
  • panel.background#292522
  • panel.border#292522
  • panelTitle.activeForeground#ffb454
  • peekViewEditor.background#3a2f23
  • peekViewEditor.matchHighlightBackground#ffb45444
  • quickInput.background#292522
  • quickInput.foreground#ffe9c3
  • scrollbar.shadow#00000000
  • selection.background#4a4a4a
  • sideBar.background#292522
  • sideBar.border#292522
  • sideBar.foreground#ffe9c3
  • sideBarSectionHeader.background#3a2f23
  • sideBarSectionHeader.border#292522
  • sideBarSectionHeader.foreground#f9c784
  • statusBar.background#292522
  • statusBar.border#292522
  • statusBar.foreground#ffe9c3
  • tab.activeBackground#292522
  • tab.activeForeground#ffb454
  • tab.border#292522
  • tab.inactiveBackground#3a2f23
  • tab.inactiveForeground#bf9060
  • terminal.background#292522
  • terminal.foreground#ffe9c3
  • titleBar.activeBackground#292522
  • titleBar.activeForeground#ffe9c3
  • titleBar.border#292522
  • titleBar.inactiveBackground#3a2f23
  • titleBar.inactiveForeground#bf9060
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded, string meta.image.inline.markdown, variable.legacy.builtin.python#ffe9c3—
emphasis#f9c784italic
strong#ffb454bold
header#f67440—
comment#bf9060italic
constant.language#ffb454—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#f67440—
constant.regexp#f9c784—
entity.name.tag#f67440—
entity.name.tag.css, entity.name.tag.less#ffb454—
entity.other.attribute-name#ffb454—
entity.other.attribute-name.class.css, source.css entity.other.attribute-name.class, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.parent.less, source.css entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#f9c784—
invalid#ff4c2b—
markup.underline#ffb454underline
markup.bold#f67440bold
markup.heading#ffb454bold
markup.italic#f9c784italic
markup.strikethrough#bf9060strikethrough
markup.inserted#f67440—
markup.deleted#ff4c2b—
markup.changed#f9c784—
punctuation.definition.quote.begin.markdown#bf9060—
punctuation.definition.list.begin.markdown#ffb454—
markup.inline.raw#f9c784—
punctuation.definition.tag#ffe9c3—
meta.preprocessor, entity.name.function.preprocessor#ffb454—
meta.preprocessor.string#ffb454—
meta.preprocessor.numeric#f67440—
meta.structure.dictionary.key.python#ffb454—
meta.diff.header#f9c784—
storage#ffb454—
storage.type#f67440—
storage.modifier, keyword.operator.noexcept#ffb454—
string, meta.embedded.assembly#f9c784—
string.tag#f9c784—
string.value#ffb454—
string.regexp#ffb454—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#f67440—
meta.template.expression#ffe9c3—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#ffb454—
keyword#ffb454—
keyword.control#f67440—
keyword.operator#bf9060—
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#ffb454—
keyword.other.unit#ffb454—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ffb454—
support.function.git-rebase#f67440—
constant.sha.git-rebase#f67440—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#ffe9c3—
variable.language#ffb454—