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
soft dark theme by kayspace - VS Code Theme