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.activeBorder#c9a7eb
  • activityBar.background#15111f
  • activityBar.border#241f30
  • activityBar.foreground#c9a7eb
  • activityBar.inactiveForeground#5a5068
  • activityBarBadge.background#e89ac7
  • activityBarBadge.foreground#1a1625
  • badge.background#e89ac7
  • badge.foreground#1a1625
  • breadcrumb.activeSelectionForeground#c9a7eb
  • breadcrumb.focusForeground#c9a7eb
  • breadcrumb.foreground#7a7088
  • breadcrumbPicker.background#15111f
  • button.background#c9a7eb
  • button.foreground#1a1625
  • button.hoverBackground#d6b8f0
  • button.secondaryBackground#3a3645
  • button.secondaryForeground#e8d5e8
  • button.secondaryHoverBackground#5a5068
  • dropdown.background#15111f
  • dropdown.border#b4a7d660
  • dropdown.foreground#e8d5e8
  • editor.background#1a1625
  • editor.findMatchBackground#e89ac790
  • editor.findMatchHighlightBackground#e89ac740
  • editor.foreground#e8d5e8
  • editor.inactiveSelectionBackground#3a3645
  • editor.lineHighlightBackground#241f30
  • editor.selectionBackground#b4a7d650
  • editorBracketMatch.background#b4a7d640
  • editorBracketMatch.border#c9a7eb
  • editorCursor.foreground#c9a7eb
  • editorError.foreground#e89ac7
  • editorGroup.border#b4a7d640
  • editorGroupHeader.tabsBackground#15111f
  • editorGroupHeader.tabsBorder#241f30
  • editorHint.foreground#a7d6c9
  • editorHoverWidget.background#15111f
  • editorHoverWidget.border#b4a7d660
  • editorIndentGuide.activeBackground#b4a7d660
  • editorIndentGuide.background#2a2535
  • editorInfo.foreground#a8c7f0
  • editorLineNumber.activeForeground#b4a7d6
  • editorLineNumber.foreground#5a5068
  • editorRuler.foreground#2a2535
  • editorSuggestWidget.background#15111f
  • editorSuggestWidget.border#b4a7d660
  • editorSuggestWidget.highlightForeground#c9a7eb
  • editorSuggestWidget.selectedBackground#b4a7d630
  • editorWarning.foreground#f0d3a8
  • editorWhitespace.foreground#3a3645
  • editorWidget.background#15111f
  • editorWidget.border#b4a7d660
  • focusBorder#b4a7d660
  • gitDecoration.conflictingResourceForeground#d6a7c9
  • gitDecoration.deletedResourceForeground#e89ac7
  • gitDecoration.ignoredResourceForeground#5a5068
  • gitDecoration.modifiedResourceForeground#f0d3a8
  • gitDecoration.untrackedResourceForeground#a7d6c9
  • input.background#15111f
  • input.border#b4a7d660
  • input.foreground#e8d5e8
  • input.placeholderForeground#5a5068
  • inputOption.activeBackground#b4a7d630
  • inputOption.activeBorder#c9a7eb
  • list.activeSelectionBackground#b4a7d630
  • list.activeSelectionForeground#ffffff
  • list.highlightForeground#c9a7eb
  • list.hoverBackground#241f30
  • list.inactiveSelectionBackground#3a3645
  • menu.background#15111f
  • menu.foreground#e8d5e8
  • menu.selectionBackground#b4a7d640
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#b4a7d640
  • menubar.selectionBackground#b4a7d640
  • menubar.selectionForeground#ffffff
  • notificationCenter.border#b4a7d660
  • notificationCenterHeader.background#15111f
  • notificationLink.foreground#c9a7eb
  • notifications.background#15111f
  • notifications.border#b4a7d660
  • panel.background#1a1625
  • panel.border#b4a7d640
  • panelTitle.activeBorder#c9a7eb
  • panelTitle.activeForeground#c9a7eb
  • panelTitle.inactiveForeground#7a7088
  • peekView.border#c9a7eb
  • peekViewEditor.background#15111f
  • peekViewResult.background#15111f
  • peekViewTitle.background#15111f
  • scrollbarSlider.activeBackground#b4a7d680
  • scrollbarSlider.background#b4a7d640
  • scrollbarSlider.hoverBackground#b4a7d660
  • sideBar.background#1a1625
  • sideBar.border#241f30
  • sideBar.foreground#d5c4d8
  • sideBarSectionHeader.background#15111f
  • sideBarSectionHeader.border#b4a7d640
  • sideBarSectionHeader.foreground#c9a7eb
  • sideBarTitle.foreground#c9a7eb
  • statusBar.background#15111f
  • statusBar.border#b4a7d640
  • statusBar.debuggingBackground#e89ac7
  • statusBar.debuggingForeground#1a1625
  • statusBar.foreground#c9a7eb
  • statusBar.noFolderBackground#15111f
  • tab.activeBackground#1a1625
  • tab.activeBorder#c9a7eb
  • tab.activeBorderTop#c9a7eb
  • tab.activeForeground#c9a7eb
  • tab.border#15111f
  • tab.hoverBackground#241f30
  • tab.inactiveBackground#15111f
  • tab.inactiveForeground#7a7088
  • tab.unfocusedActiveBorder#5a5068
  • terminal.ansiBlack#1a1625
  • terminal.ansiBlue#a8c7f0
  • terminal.ansiBrightBlack#5a5068
  • terminal.ansiBrightBlue#b8d7f8
  • terminal.ansiBrightCyan#b8f0f8
  • terminal.ansiBrightGreen#b8e6d9
  • terminal.ansiBrightMagenta#e6b8d9
  • terminal.ansiBrightRed#f0aad6
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f8ddb8
  • terminal.ansiCyan#a8e8f0
  • terminal.ansiGreen#a7d6c9
  • terminal.ansiMagenta#d6a7c9
  • terminal.ansiRed#e89ac7
  • terminal.ansiWhite#e8d5e8
  • terminal.ansiYellow#f0d3a8
  • terminal.background#1a1625
  • terminal.foreground#e8d5e8
  • terminal.selectionBackground#b4a7d650
  • titleBar.activeBackground#15111f
  • titleBar.activeForeground#c9a7eb
  • titleBar.border#241f30
  • titleBar.inactiveBackground#15111f
  • titleBar.inactiveForeground#5a5068

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7a7088italic
string, string.quoted#a7d6c9
string.template#b8e6d9
constant.numeric#f0d3a8
constant.language.boolean#e89ac7bold
constant.language, constant.character#e89ac7
keyword, keyword.control#e89ac7bold
storage, storage.type, storage.modifier#d6a7c9bold
keyword.operator#e89ac7
entity.name.function, support.function#a8c7f0bold
entity.name.class, support.class, entity.name.type.class#f0d3a8bold
entity.name.type, support.type#a8c7f0
variable, variable.other, variable.parameter#e8d5e8
variable.language#d6a7c9italic bold
meta.decorator, entity.name.function.decorator, punctuation.definition.decorator#d6a7c9bold
keyword.control.import, keyword.control.from#e89ac7
entity.name.tag#e89ac7
entity.other.attribute-name#f0d3a8
punctuation#9a8da8
invalid, invalid.illegal#e89ac7bold underline
support.constant, support.variable#f0d3a8
support.type.property-name.json#a8c7f0
markup.heading#c9a7ebbold
markup.bold#f0d3a8bold
markup.italic#d6a7c9italic
markup.inline.raw, markup.fenced_code#a7d6c9
markup.underline.link#a8c7f0underline