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—
Nimbo Theme by Rohit Ramteke - VS Code Theme