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#002b36
  • activityBar.border#002b36
  • activityBar.foreground#93a1a1
  • activityBarBadge.background#b58900
  • activityBarBadge.foreground#002b36
  • dropdown.background#002b36
  • dropdown.border#002b36
  • dropdown.foreground#93a1a1
  • editor.background#002b36
  • editor.foreground#93a1a1
  • editorGroup.border#002b36
  • editorGroupHeader.tabsBackground#002b36
  • editorGroupHeader.tabsBorder#002b36
  • editorLineNumber.activeForeground#b58900
  • editorLineNumber.foreground#586e75
  • editorRuler.foreground#073642
  • editorWidget.background#073642
  • editorWidget.border#002b36
  • focusBorder#b58900
  • input.background#073642
  • input.border#002b36
  • input.foreground#93a1a1
  • input.placeholderForeground#586e75
  • list.activeSelectionBackground#073642
  • list.activeSelectionForeground#b58900
  • list.hoverBackground#073642
  • list.hoverForeground#b58900
  • list.inactiveSelectionBackground#002b36
  • list.inactiveSelectionForeground#93a1a1
  • menu.background#002b36
  • menu.border#002b36
  • menu.foreground#93a1a1
  • menu.selectionBackground#073642
  • menu.selectionForeground#b58900
  • menu.separatorBackground#002b36
  • minimap.background#002b36
  • minimapSlider.activeBackground#b5890044
  • minimapSlider.background#07364277
  • minimapSlider.hoverBackground#b5890044
  • panel.background#002b36
  • panel.border#002b36
  • panelTitle.activeForeground#b58900
  • peekViewEditor.background#073642
  • peekViewEditor.matchHighlightBackground#b5890044
  • quickInput.background#002b36
  • quickInput.foreground#93a1a1
  • scrollbar.shadow#00000000
  • selection.background#073642
  • sideBar.background#002b36
  • sideBar.border#002b36
  • sideBar.foreground#93a1a1
  • sideBarSectionHeader.background#073642
  • sideBarSectionHeader.border#002b36
  • sideBarSectionHeader.foreground#839496
  • statusBar.background#002b36
  • statusBar.border#002b36
  • statusBar.foreground#93a1a1
  • tab.activeBackground#002b36
  • tab.activeForeground#b58900
  • tab.border#002b36
  • tab.inactiveBackground#073642
  • tab.inactiveForeground#586e75
  • terminal.background#002b36
  • terminal.foreground#93a1a1
  • titleBar.activeBackground#002b36
  • titleBar.activeForeground#93a1a1
  • titleBar.border#002b36
  • titleBar.inactiveBackground#073642
  • titleBar.inactiveForeground#586e75
  • 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#839496—
emphasis—italic
strong—bold
header#cb4b16—
comment#586e75italic
constant.language#268bd2—
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#d33682—
constant.regexp#2aa198—
entity.name.tag#859900—
entity.name.tag.css, entity.name.tag.less#b58900—
entity.other.attribute-name#2aa198—
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#b58900—
invalid#dc322f—
markup.underline—underline
markup.bold#b58900bold
markup.heading#b58900bold
markup.italic#268bd2italic
markup.strikethrough#b58900strikethrough
markup.inserted#859900—
markup.deleted#dc322f—
markup.changed#b58900—
punctuation.definition.quote.begin.markdown#586e75—
punctuation.definition.list.begin.markdown#cb4b16—
markup.inline.raw#268bd2—
punctuation.definition.tag#839496—
meta.preprocessor, entity.name.function.preprocessor#859900—
meta.preprocessor.string#2aa198—
meta.preprocessor.numeric#d33682—
meta.structure.dictionary.key.python#b58900—
meta.diff.header#b58900—
storage#268bd2—
storage.type#b58900—
storage.modifier, keyword.operator.noexcept#6c71c4—
string, meta.embedded.assembly#2aa198—
string.tag#2aa198—
string.value#2aa198—
string.regexp#2aa198—
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#268bd2—
meta.template.expression#93a1a1—
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#b58900—
keyword#268bd2—
keyword.control#859900—
keyword.operator#6c71c4—
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#6c71c4—
keyword.other.unit#b58900—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#268bd2—
support.function.git-rebase#859900—
constant.sha.git-rebase#d33682—
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#93a1a1—
variable.language#b58900—