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#9D4DFF
  • activityBar.background#050208
  • activityBar.border#160829
  • activityBar.foreground#F5E9FF
  • activityBar.inactiveForeground#B9A1CC
  • activityBarBadge.background#9D4DFF
  • activityBarBadge.foreground#ffffff
  • badge.background#9D4DFF
  • badge.foreground#ffffff
  • button.background#9D4DFF
  • button.border#00000000
  • button.foreground#ffffff
  • button.hoverBackground#BE85FF
  • button.secondaryBackground#1B1228
  • button.secondaryForeground#ccbde2
  • button.secondaryHoverBackground#302047
  • button.separator#F5E9FF
  • descriptionForeground#B9A1CC
  • diffEditor.insertedTextBackground#00f5a026
  • diffEditor.removedTextBackground#ff3b6b26
  • disabledForeground#f5e9ff66
  • dropdown.background#050208
  • dropdown.border#160829
  • dropdown.foreground#F5E9FF
  • dropdown.listBackground#08030F
  • editor.background#08030F
  • editor.findMatchBackground#806b00
  • editor.findMatchHighlightBackground#4e5900
  • editor.foreground#F5E9FF
  • editor.inactiveSelectionBackground#2d164b
  • editor.lineHighlightBackground#312f33
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#371b59
  • editor.selectionHighlightBackground#3c1d63
  • editor.stackFrameHighlightBackground#403600
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editorBracketHighlight.foreground1#dfc2ff
  • editorBracketHighlight.foreground2#dfc2ff
  • editorBracketHighlight.foreground3#dfc2ff
  • editorBracketHighlight.foreground4#dfc2ff
  • editorBracketHighlight.foreground5#dfc2ff
  • editorBracketHighlight.foreground6#dfc2ff
  • editorBracketMatch.background#3c1d63
  • editorBracketMatch.border#7037b7
  • editorCursor.foreground#9D4DFF
  • editorError.border#00000000
  • editorError.foreground#FF3B6B
  • editorGroup.border#160829
  • editorGroup.dropBackground#9d4dff33
  • editorGroupHeader.border#230d42
  • editorGroupHeader.noTabsBackground#050208
  • editorGroupHeader.tabsBackground#050208
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#00F5A0
  • editorGutter.deletedBackground#FF3B6B
  • editorGutter.modifiedBackground#FFD600
  • editorHoverWidget.background#050208
  • editorHoverWidget.border#160829
  • editorIndentGuide.activeBackground#7f7985
  • editorIndentGuide.background#3d3a40
  • editorInlayHint.background#050208
  • editorInlayHint.foreground#F5E9FF
  • editorLineNumber.activeForeground#F5E9FF
  • editorLineNumber.foreground#7b7580
  • editorLink.activeForeground#9D4DFF
  • editorSuggestWidget.background#050208
  • editorSuggestWidget.border#160829
  • editorSuggestWidget.foreground#F5E9FF
  • editorSuggestWidget.highlightForeground#9D4DFF
  • editorSuggestWidget.selectedBackground#371b59
  • editorWarning.border#00000000
  • editorWarning.foreground#FFD600
  • editorWhitespace.foreground#f5e9ff66
  • editorWidget.background#050208
  • editorWidget.border#160829
  • errorForeground#FF3B6B
  • focusBorder#9D4DFF
  • foreground#F5E9FF
  • gitDecoration.conflictingResourceForeground#FF7195
  • gitDecoration.deletedResourceForeground#FF3B6B
  • gitDecoration.ignoredResourceForeground#B9A1CC
  • gitDecoration.modifiedResourceForeground#FFD600
  • gitDecoration.submoduleResourceForeground#DFFF00
  • gitDecoration.untrackedResourceForeground#FF70C5
  • icon.foreground#F5E9FF
  • input.background#08030F
  • input.border#160829
  • input.foreground#F5E9FF
  • input.placeholderForeground#f5e9ffb3
  • inputOption.activeBackground#f5e9ff21
  • inputOption.activeBorder#9D4DFF
  • inputOption.activeForeground#F5E9FF
  • inputOption.hoverBackground#f5e9ff1a
  • inputValidation.errorBackground#ff3b6b40
  • inputValidation.errorBorder#FF3B6B
  • inputValidation.infoBackground#a970ff40
  • inputValidation.infoBorder#A970FF
  • inputValidation.warningBackground#ffd60040
  • inputValidation.warningBorder#FFD600
  • keybindingLabel.background#050208
  • keybindingLabel.border#1B1228
  • keybindingLabel.bottomBorder#302047
  • keybindingLabel.foreground#B9A1CC
  • list.activeSelectionBackground#f5e9ff21
  • list.activeSelectionForeground#F5E9FF
  • list.activeSelectionIconForeground#F5E9FF
  • list.dropBackground#9d4dff33
  • list.errorForeground#FF3B6B
  • list.focusBackground#f5e9ff21
  • list.focusForeground#F5E9FF
  • list.highlightForeground#9D4DFF
  • list.hoverBackground#f5e9ff1a
  • list.hoverForeground#F5E9FF
  • list.inactiveSelectionBackground#f5e9ff21
  • list.inactiveSelectionForeground#F5E9FF
  • list.invalidItemForeground#FF3B6B
  • menu.separatorBackground#160829
  • minimap.background#08030F
  • minimapSlider.activeBackground#9d4dff8c
  • minimapSlider.background#9d4dff40
  • minimapSlider.hoverBackground#9d4dff66
  • notificationCenter.border#160829
  • notificationCenterHeader.background#08030F
  • notificationCenterHeader.foreground#F5E9FF
  • notifications.background#050208
  • notifications.border#160829
  • notifications.foreground#F5E9FF
  • notificationToast.border#230d42
  • panel.background#050208
  • panel.border#160829
  • panelTitle.activeBorder#9D4DFF
  • panelTitle.activeForeground#F5E9FF
  • panelTitle.inactiveForeground#B9A1CC
  • peekView.border#230d42
  • peekViewEditor.background#050208
  • peekViewEditor.matchHighlightBackground#3c1d63
  • peekViewResult.background#050208
  • peekViewResult.fileForeground#F5E9FF
  • peekViewResult.lineForeground#B9A1CC
  • peekViewResult.matchHighlightBackground#3c1d63
  • peekViewResult.selectionBackground#f5e9ff21
  • peekViewTitle.background#050208
  • peekViewTitleDescription.foreground#B9A1CC
  • peekViewTitleLabel.foreground#F5E9FF
  • pickerGroup.border#230d42
  • pickerGroup.foreground#9D4DFF
  • progressBar.background#9D4DFF
  • quickInput.background#050208
  • quickInput.foreground#F5E9FF
  • scrollbar.background#08030F
  • scrollbar.shadow#08030F
  • scrollbarSlider.activeBackground#f5e9ff66
  • scrollbarSlider.background#f5e9ff26
  • scrollbarSlider.hoverBackground#f5e9ff40
  • selection.background#371b59
  • settings.headerForeground#F5E9FF
  • settings.modifiedItemIndicator#FFD600
  • sideBar.background#050208
  • sideBar.border#160829
  • sideBar.dropBackground#9d4dff33
  • sideBar.foreground#F5E9FF
  • sideBarSectionHeader.background#050208
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#F5E9FF
  • sideBarTitle.foreground#F5E9FF
  • statusBar.background#050208
  • statusBar.border#160829
  • statusBar.debuggingBackground#FFD600
  • statusBar.debuggingForeground#332b00
  • statusBar.foreground#F5E9FF
  • statusBarItem.activeBackground#f5e9ff21
  • statusBarItem.hoverBackground#f5e9ff1a
  • statusBarItem.remoteBackground#9D4DFF
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.remoteHoverBackground#BE85FF
  • tab.activeBackground#08030F
  • tab.activeBorderTop#9D4DFF
  • tab.activeForeground#F5E9FF
  • tab.border#00000000
  • tab.inactiveBackground#050208
  • tab.inactiveForeground#B9A1CC
  • terminal.ansiBlack#08030F
  • terminal.ansiBlue#A970FF
  • terminal.ansiBrightBlack#5e23b1
  • terminal.ansiBrightBlue#FF70C5
  • terminal.ansiBrightCyan#C49AFF
  • terminal.ansiBrightGreen#5CFFC0
  • terminal.ansiBrightMagenta#BE85FF
  • terminal.ansiBrightRed#FF7195
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFE866
  • terminal.ansiCyan#DFFF00
  • terminal.ansiGreen#00F5A0
  • terminal.ansiMagenta#9D4DFF
  • terminal.ansiRed#FF3B6B
  • terminal.ansiWhite#F5E9FF
  • terminal.ansiYellow#FFD600
  • terminal.background#08030F
  • terminal.foreground#F5E9FF
  • terminal.selectionBackground#371b59
  • terminalCursor.background#9D4DFF
  • terminalCursor.foreground#9D4DFF
  • textLink.activeForeground#C49AFF
  • textLink.foreground#9D4DFF
  • textSeparator.foreground#B9A1CC
  • titleBar.activeBackground#050208
  • titleBar.activeForeground#F5E9FF
  • titleBar.border#160829
  • titleBar.inactiveBackground#08030F
  • titleBar.inactiveForeground#B9A1CC
  • toolbar.activeBackground#f5e9ff21
  • toolbar.hoverBackground#f5e9ff1a
  • toolbar.hoverOutline#302047
  • tree.indentGuidesStroke#3d3a40
  • welcomePage.progress.background#1B1228
  • welcomePage.tileBackground#050208
  • widget.border#160829
  • widget.shadow#08030F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function.preprocessor#F5E9FF—
entity.other.attribute-name#BE85FF—
constant, constant.language#9D4DFF—
comment#6a5e76—
entity.name.function#FF70C5—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template#BE85FF—
constant.numeric#9D4DFF—
keyword.operator, entity.name.function.operator#FF3B6B—
variable.other.property, variable.other.constant.property, support.type.property-name#A970FF—
entity.other.attribute-name.class.css#BE85FF—
entity.other.attribute-name.id.css#9D4DFF—
entity.other.attribute-name.pseudo-element#9D4DFF—
string, constant.other.symbol#00F5A0—
constant.character, constant.other#9D4DFF—
string.regexp#5CFFC0—
entity.name.tag, meta.tag.sgml#FF3B6B—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type#DFFF00—
entity.name.scope-resolution#EAFF66—
variable, variable.parameter.function-call#F5E9FF—
variable.language, variable.parameter.function.language.special.self.python#FF3B6B—
variable.parameter, meta.parameter#F5E9FF—
text.html.markdown markup.inline.raw#B9A1CC—
markup.bold#BE85FF—
punctuation.definition.bold#9D4DFF—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description#9D4DFF—
markup.underline.link, punctuation.definition.metadata#A970FF—
markup.heading#EAFF66—
punctuation.definition.markdown, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.accessor, punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag, meta.decorator punctuation.decorator, markup.list punctuation.definition.list.begin#dfc2ff—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#C49AFF—