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