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#1a1c1e
  • activityBar.foreground#a09890
  • activityBarBadge.background#d4886a
  • activityBarBadge.foreground#1a1c1e
  • badge.background#d4886a
  • badge.foreground#1a1c1e
  • button.background#d4886a
  • button.foreground#1a1c1e
  • button.hoverBackground#de9878
  • button.secondaryBackground#272c30
  • button.secondaryForeground#c2bdb8
  • button.secondaryHoverBackground#303538
  • descriptionForeground#686460
  • dropdown.background#1d1f22
  • dropdown.border#272c30
  • dropdown.foreground#c2bdb8
  • dropdown.listBackground#1c1e20
  • editor.background#1a1c1e
  • editor.foreground#c2bdb8
  • editor.inactiveSelectionBackground#222628
  • editor.lineHighlightBackground#1d1f22
  • editor.selectionBackground#272c30
  • editorCursor.foreground#d4886a
  • editorError.foreground#c46860
  • editorGroup.border#1a1c1e
  • editorGroupHeader.tabsBackground#1a1c1e
  • editorGroupHeader.tabsBorder#1a1c1e
  • editorInfo.foreground#7aa0b8
  • editorLineNumber.activeForeground#686460
  • editorLineNumber.foreground#383c40
  • editorOverviewRuler.border#00000000
  • editorSuggestWidget.background#1d1f22
  • editorSuggestWidget.border#272c30
  • editorSuggestWidget.highlightForeground#d4886a
  • editorSuggestWidget.selectedBackground#272c30
  • editorWarning.foreground#c8a060
  • editorWidget.background#1d1f22
  • editorWidget.border#272c30
  • focusBorder#d4886a38
  • gitDecoration.addedResourceForeground#82a888
  • gitDecoration.deletedResourceForeground#c46860
  • gitDecoration.ignoredResourceForeground#383c40
  • gitDecoration.modifiedResourceForeground#7aa0b8
  • gitDecoration.untrackedResourceForeground#82a888
  • input.background#1d1f22
  • input.border#272c30
  • input.foreground#c2bdb8
  • input.placeholderForeground#484440
  • inputOption.activeBorder#d4886a
  • list.activeSelectionBackground#272c30
  • list.activeSelectionForeground#c2bdb8
  • list.focusBackground#1d1f22
  • list.focusForeground#c2bdb8
  • list.hoverBackground#1d1f22
  • list.hoverForeground#c2bdb8
  • list.inactiveSelectionBackground#222528
  • menu.background#1a1c1e
  • menu.foreground#c2bdb8
  • menu.selectionBackground#272c30
  • menu.selectionForeground#d4886a
  • menu.separatorBackground#222628
  • panel.background#1c1e20
  • panel.border#00000000
  • quickInput.background#1d1f22
  • quickInput.foreground#c2bdb8
  • quickInputList.focusBackground#272c30
  • quickInputList.focusForeground#c2bdb8
  • quickInputList.focusHighlightForeground#d4886a
  • quickInputTitle.background#1d1f22
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#27272770
  • scrollbarSlider.background#27272740
  • scrollbarSlider.hoverBackground#27272760
  • sideBar.background#1a1c1e
  • sideBar.foreground#686460
  • sideBarSectionHeader.background#1d1f22
  • sideBarTitle.foreground#686460
  • statusBar.background#1a1c1e
  • statusBar.debuggingBackground#d4886a
  • statusBar.debuggingForeground#1a1c1e
  • statusBar.foreground#686460
  • tab.activeBackground#1d1f22
  • tab.activeForeground#c2bdb8
  • tab.border#1a1c1e
  • tab.inactiveBackground#1a1c1e
  • tab.inactiveForeground#484440
  • terminal.border#00000000
  • textBlockQuote.foreground#686460
  • textLink.activeForeground#c8a878
  • textLink.foreground#d4886a
  • textPreformat.foreground#c2bdb8
  • titleBar.activeBackground#1a1c1e
  • titleBar.activeForeground#686460
  • titleBar.inactiveBackground#17191b
  • titleBar.inactiveForeground#383c40

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#3c4044italic
invalid, invalid.illegal#c46860—
keyword, storage.type, storage.modifier#c89ab0—
keyword.control.import, keyword.control.from, keyword.control.export#c89ab0italic
keyword.operator, keyword.control#72706c—
punctuation.separator, punctuation.terminator, punctuation.accessor#383c40—
entity.name.tag, meta.tag.sgml#d4886a—
entity.other.attribute-name#c8a878—
string.quoted.double.html, string.quoted.single.html#82a888—
punctuation.definition.tag#383c40—
variable, variable.other#c2bdb8—
variable.language.this, variable.language.self#c89ab0italic
entity.name.function, variable.function, support.function, meta.function-call entity.name.function#c8a878—
entity.name.type, entity.name.class, support.type, support.class#d4886a—
entity.name.type.interface#d4886aitalic
string, string.template#82a888—
punctuation.definition.template-expression#c89ab0—
constant.numeric#c8a878—
constant.language, constant.language.boolean#c46860italic
support.constant#72706c—
string.regexp#d4886a—
constant.character.escape#c89ab0—
support.type.property-name.css, support.type.property-name.scss#c8a878—
support.constant.property-value.css, support.constant.property-value.scss#82a888—
source.css entity.name.tag, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#d4886a—
entity.other.attribute-name.pseudo-class.css#c89ab0—
support.type.property-name.json#72706c—
meta.structure.dictionary.json support.type.property-name.json#d4886a—
meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#c8a878—
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#c89ab0—
markup.heading, markup.heading entity.name#d4886abold
markup.bold#c2bdb8bold
markup.italic#c89ab0italic
markup.underline.link, string.other.link#c8a878underline
markup.inline.raw, markup.fenced_code.block#c8a878—
text, source, meta.embedded#c2bdb8—