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
emphasisitalic
strongbold
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.underlineunderline
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
Nimbo Theme by Rohit Ramteke - VS Code Theme