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#1a1d2e
  • activityBar.foreground#a8a4b8
  • activityBarBadge.background#82d9c5
  • activityBarBadge.foreground#1a1d2e
  • badge.background#82d9c5
  • badge.foreground#1a1d2e
  • button.background#82d9c5
  • button.foreground#1a1d2e
  • button.hoverBackground#96e2d0
  • button.secondaryBackground#2d3250
  • button.secondaryForeground#c8c2d4
  • button.secondaryHoverBackground#363a5a
  • descriptionForeground#6b6880
  • dropdown.background#1e2135
  • dropdown.border#2d3250
  • dropdown.foreground#c8c2d4
  • dropdown.listBackground#1c1f30
  • editor.background#1a1d2e
  • editor.foreground#c8c2d4
  • editor.inactiveSelectionBackground#252843
  • editor.lineHighlightBackground#1e2135
  • editor.selectionBackground#2d3250
  • editorCursor.foreground#82d9c5
  • editorError.foreground#e07878
  • editorGroup.border#1a1d2e
  • editorGroupHeader.tabsBackground#1a1d2e
  • editorGroupHeader.tabsBorder#1a1d2e
  • editorInfo.foreground#82aee0
  • editorLineNumber.activeForeground#6b6880
  • editorLineNumber.foreground#363a52
  • editorOverviewRuler.border#00000000
  • editorSuggestWidget.background#1e2135
  • editorSuggestWidget.border#2d3250
  • editorSuggestWidget.highlightForeground#82d9c5
  • editorSuggestWidget.selectedBackground#2d3250
  • editorWarning.foreground#e0b870
  • editorWidget.background#1e2135
  • editorWidget.border#2d3250
  • focusBorder#82d9c540
  • gitDecoration.addedResourceForeground#82c9a0
  • gitDecoration.deletedResourceForeground#e07878
  • gitDecoration.ignoredResourceForeground#363a52
  • gitDecoration.modifiedResourceForeground#82aee0
  • gitDecoration.untrackedResourceForeground#82c9a0
  • input.background#1e2135
  • input.border#2d3250
  • input.foreground#c8c2d4
  • input.placeholderForeground#4a4860
  • inputOption.activeBorder#82d9c5
  • list.activeSelectionBackground#2d3250
  • list.activeSelectionForeground#c8c2d4
  • list.focusBackground#1e2135
  • list.focusForeground#c8c2d4
  • list.hoverBackground#1e2135
  • list.hoverForeground#c8c2d4
  • list.inactiveSelectionBackground#222540
  • menu.background#1a1d2e
  • menu.foreground#c8c2d4
  • menu.selectionBackground#2d3250
  • menu.selectionForeground#82d9c5
  • menu.separatorBackground#252843
  • panel.background#1c1f30
  • panel.border#00000000
  • quickInput.background#1e2135
  • quickInput.foreground#c8c2d4
  • quickInputList.focusBackground#2d3250
  • quickInputList.focusForeground#c8c2d4
  • quickInputList.focusHighlightForeground#82d9c5
  • quickInputTitle.background#1e2135
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#2d325070
  • scrollbarSlider.background#2d325040
  • scrollbarSlider.hoverBackground#2d325060
  • sideBar.background#1a1d2e
  • sideBar.foreground#6b6880
  • sideBarSectionHeader.background#1e2135
  • sideBarTitle.foreground#6b6880
  • statusBar.background#1a1d2e
  • statusBar.debuggingBackground#82d9c5
  • statusBar.debuggingForeground#1a1d2e
  • statusBar.foreground#6b6880
  • tab.activeBackground#1e2135
  • tab.activeForeground#c8c2d4
  • tab.border#1a1d2e
  • tab.inactiveBackground#1a1d2e
  • tab.inactiveForeground#4a4860
  • terminal.border#00000000
  • textBlockQuote.foreground#6b6880
  • textLink.activeForeground#a0c8f0
  • textLink.foreground#82d9c5
  • textPreformat.foreground#c8c2d4
  • titleBar.activeBackground#1a1d2e
  • titleBar.activeForeground#6b6880
  • titleBar.inactiveBackground#171a2a
  • titleBar.inactiveForeground#363a52

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#404460italic
invalid, invalid.illegal#e07878
keyword, storage.type, storage.modifier#c9a0e8
keyword.control.import, keyword.control.from, keyword.control.export#c9a0e8italic
keyword.operator, keyword.control#7880a4
punctuation.separator, punctuation.terminator, punctuation.accessor#404460
entity.name.tag, meta.tag.sgml#82d9c5
entity.other.attribute-name#82aee0
string.quoted.double.html, string.quoted.single.html#82c9a0
punctuation.definition.tag#404460
variable, variable.other#c8c2d4
variable.language.this, variable.language.self#c9a0e8italic
entity.name.function, variable.function, support.function, meta.function-call entity.name.function#82aee0
entity.name.type, entity.name.class, support.type, support.class#82d9c5
entity.name.type.interface#82d9c5italic
string, string.template#82c9a0
punctuation.definition.template-expression#c9a0e8
constant.numeric#e0b870
constant.language, constant.language.boolean#e07878italic
support.constant#7880a4
string.regexp#82d9c5
constant.character.escape#c9a0e8
support.type.property-name.css, support.type.property-name.scss#82aee0
support.constant.property-value.css, support.constant.property-value.scss#82c9a0
source.css entity.name.tag, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#82d9c5
entity.other.attribute-name.pseudo-class.css#c9a0e8
support.type.property-name.json#7880a4
meta.structure.dictionary.json support.type.property-name.json#82d9c5
meta.structure.dictionary.json meta.structure.dictionary.value.json support.type.property-name.json#82aee0
meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.value.json support.type.property-name.json#c9a0e8
markup.heading, markup.heading entity.name#82d9c5bold
markup.bold#c8c2d4bold
markup.italic#c9a0e8italic
markup.underline.link, string.other.link#82aee0underline
markup.inline.raw, markup.fenced_code.block#e0b870
text, source, meta.embedded#c8c2d4
soft dark theme by kayspace - VS Code Theme