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#A779F3
  • activityBar.background#08080b
  • activityBar.border#17171e
  • activityBar.foreground#a9b1d6
  • activityBar.inactiveForeground#787c99
  • activityBarBadge.background#A779F3
  • activityBarBadge.foreground#000000
  • badge.background#A779F3
  • badge.foreground#000000
  • button.background#A779F3
  • button.border#00000000
  • button.foreground#000000
  • button.hoverBackground#BB9AF7
  • button.secondaryBackground#384059
  • button.secondaryForeground#ffffff
  • button.secondaryHoverBackground#4C536F
  • button.separator#a9b1d6
  • descriptionForeground#787c99
  • diffEditor.insertedTextBackground#85d0b726
  • diffEditor.removedTextBackground#fb899e26
  • disabledForeground#a9b1d666
  • dropdown.background#08080b
  • dropdown.border#17171e
  • dropdown.foreground#a9b1d6
  • dropdown.listBackground#0A0A0D
  • editor.background#0A0A0D
  • editor.findMatchBackground#796546
  • editor.findMatchHighlightBackground#014250
  • editor.foreground#a9b1d6
  • editor.inactiveSelectionBackground#312647
  • editor.lineHighlightBackground#22232b
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#3a2a55
  • editor.selectionHighlightBackground#41315e
  • editor.stackFrameHighlightBackground#3d3223
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightStrongBackground#00000000
  • editorBracketHighlight.foreground1#a9a3dd
  • editorBracketHighlight.foreground2#a9a3dd
  • editorBracketHighlight.foreground3#a9a3dd
  • editorBracketHighlight.foreground4#a9a3dd
  • editorBracketHighlight.foreground5#a9a3dd
  • editorBracketHighlight.foreground6#a9a3dd
  • editorBracketMatch.background#41315e
  • editorBracketMatch.border#7858ae
  • editorCursor.foreground#A779F3
  • editorError.border#00000000
  • editorError.foreground#FB899E
  • editorGroup.border#17171e
  • editorGroup.dropBackground#a779f333
  • editorGroupHeader.border#252530
  • editorGroupHeader.noTabsBackground#08080b
  • editorGroupHeader.tabsBackground#08080b
  • editorGroupHeader.tabsBorder#00000000
  • editorGutter.addedBackground#85D0B7
  • editorGutter.deletedBackground#FB899E
  • editorGutter.modifiedBackground#F2C98B
  • editorHoverWidget.background#08080b
  • editorHoverWidget.border#17171e
  • editorIndentGuide.activeBackground#585c6f
  • editorIndentGuide.background#2a2c36
  • editorInlayHint.background#08080b
  • editorInlayHint.foreground#a9b1d6
  • editorLineNumber.activeForeground#a9b1d6
  • editorLineNumber.foreground#55596b
  • editorLink.activeForeground#A779F3
  • editorSuggestWidget.background#08080b
  • editorSuggestWidget.border#17171e
  • editorSuggestWidget.foreground#a9b1d6
  • editorSuggestWidget.highlightForeground#A779F3
  • editorSuggestWidget.selectedBackground#3a2a55
  • editorWarning.border#00000000
  • editorWarning.foreground#F2C98B
  • editorWhitespace.foreground#a9b1d666
  • editorWidget.background#08080b
  • editorWidget.border#17171e
  • errorForeground#FB899E
  • focusBorder#A779F3
  • foreground#a9b1d6
  • gitDecoration.conflictingResourceForeground#FF9FB1
  • gitDecoration.deletedResourceForeground#FB899E
  • gitDecoration.ignoredResourceForeground#787c99
  • gitDecoration.modifiedResourceForeground#F2C98B
  • gitDecoration.submoduleResourceForeground#03BDE5
  • gitDecoration.untrackedResourceForeground#87A1FF
  • icon.foreground#a9b1d6
  • input.background#0A0A0D
  • input.border#17171e
  • input.foreground#a9b1d6
  • input.placeholderForeground#a9b1d6b3
  • inputOption.activeBackground#a9b1d621
  • inputOption.activeBorder#A779F3
  • inputOption.activeForeground#a9b1d6
  • inputOption.hoverBackground#a9b1d61a
  • inputValidation.errorBackground#fb899e40
  • inputValidation.errorBorder#FB899E
  • inputValidation.infoBackground#7dcfff40
  • inputValidation.infoBorder#7DCFFF
  • inputValidation.warningBackground#f2c98b40
  • inputValidation.warningBorder#F2C98B
  • keybindingLabel.background#08080b
  • keybindingLabel.border#384059
  • keybindingLabel.bottomBorder#4C536F
  • keybindingLabel.foreground#787c99
  • list.activeSelectionBackground#a9b1d621
  • list.activeSelectionForeground#a9b1d6
  • list.activeSelectionIconForeground#a9b1d6
  • list.dropBackground#a779f333
  • list.errorForeground#FB899E
  • list.focusBackground#a9b1d621
  • list.focusForeground#a9b1d6
  • list.highlightForeground#A779F3
  • list.hoverBackground#a9b1d61a
  • list.hoverForeground#a9b1d6
  • list.inactiveSelectionBackground#a9b1d621
  • list.inactiveSelectionForeground#a9b1d6
  • list.invalidItemForeground#FB899E
  • menu.separatorBackground#17171e
  • minimap.background#0A0A0D
  • minimapSlider.activeBackground#a779f38c
  • minimapSlider.background#a779f340
  • minimapSlider.hoverBackground#a779f366
  • notificationCenter.border#17171e
  • notificationCenterHeader.background#0A0A0D
  • notificationCenterHeader.foreground#a9b1d6
  • notifications.background#08080b
  • notifications.border#17171e
  • notifications.foreground#a9b1d6
  • notificationToast.border#252530
  • panel.background#08080b
  • panel.border#17171e
  • panelTitle.activeBorder#A779F3
  • panelTitle.activeForeground#a9b1d6
  • panelTitle.inactiveForeground#787c99
  • peekView.border#252530
  • peekViewEditor.background#08080b
  • peekViewEditor.matchHighlightBackground#41315e
  • peekViewResult.background#08080b
  • peekViewResult.fileForeground#a9b1d6
  • peekViewResult.lineForeground#787c99
  • peekViewResult.matchHighlightBackground#41315e
  • peekViewResult.selectionBackground#a9b1d621
  • peekViewTitle.background#08080b
  • peekViewTitleDescription.foreground#787c99
  • peekViewTitleLabel.foreground#a9b1d6
  • pickerGroup.border#252530
  • pickerGroup.foreground#A779F3
  • progressBar.background#A779F3
  • quickInput.background#08080b
  • quickInput.foreground#a9b1d6
  • scrollbar.background#0A0A0D
  • scrollbar.shadow#0A0A0D
  • scrollbarSlider.activeBackground#a9b1d666
  • scrollbarSlider.background#a9b1d626
  • scrollbarSlider.hoverBackground#a9b1d640
  • selection.background#3a2a55
  • settings.headerForeground#a9b1d6
  • settings.modifiedItemIndicator#F2C98B
  • sideBar.background#08080b
  • sideBar.border#17171e
  • sideBar.dropBackground#a779f333
  • sideBar.foreground#a9b1d6
  • sideBarSectionHeader.background#08080b
  • sideBarSectionHeader.border#00000000
  • sideBarSectionHeader.foreground#a9b1d6
  • sideBarTitle.foreground#a9b1d6
  • statusBar.background#08080b
  • statusBar.border#17171e
  • statusBar.debuggingBackground#F2C98B
  • statusBar.debuggingForeground#2d1d05
  • statusBar.foreground#a9b1d6
  • statusBarItem.activeBackground#a9b1d621
  • statusBarItem.hoverBackground#a9b1d61a
  • statusBarItem.remoteBackground#A779F3
  • statusBarItem.remoteForeground#000000
  • statusBarItem.remoteHoverBackground#BB9AF7
  • tab.activeBackground#0A0A0D
  • tab.activeBorderTop#A779F3
  • tab.activeForeground#a9b1d6
  • tab.border#00000000
  • tab.inactiveBackground#08080b
  • tab.inactiveForeground#787c99
  • terminal.ansiBlack#0A0A0D
  • terminal.ansiBlue#7DCFFF
  • terminal.ansiBrightBlack#5e5e7b
  • terminal.ansiBrightBlue#87A1FF
  • terminal.ansiBrightCyan#8BD5FF
  • terminal.ansiBrightGreen#95DFC6
  • terminal.ansiBrightMagenta#BB9AF7
  • terminal.ansiBrightRed#FF9FB1
  • terminal.ansiBrightWhite#eef0f7
  • terminal.ansiBrightYellow#F5D08A
  • terminal.ansiCyan#03BDE5
  • terminal.ansiGreen#85D0B7
  • terminal.ansiMagenta#A779F3
  • terminal.ansiRed#FB899E
  • terminal.ansiWhite#a9b1d6
  • terminal.ansiYellow#F2C98B
  • terminal.background#0A0A0D
  • terminal.foreground#a9b1d6
  • terminal.selectionBackground#3a2a55
  • terminalCursor.background#A779F3
  • terminalCursor.foreground#A779F3
  • textLink.activeForeground#8BD5FF
  • textLink.foreground#A779F3
  • textSeparator.foreground#787c99
  • titleBar.activeBackground#08080b
  • titleBar.activeForeground#a9b1d6
  • titleBar.border#17171e
  • titleBar.inactiveBackground#0A0A0D
  • titleBar.inactiveForeground#787c99
  • toolbar.activeBackground#a9b1d621
  • toolbar.hoverBackground#a9b1d61a
  • toolbar.hoverOutline#4C536F
  • tree.indentGuidesStroke#2a2c36
  • welcomePage.progress.background#384059
  • welcomePage.tileBackground#08080b
  • widget.border#17171e
  • widget.shadow#0A0A0D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.function.preprocessor#a9b1d6—
entity.other.attribute-name#BB9AF7—
constant, constant.language#A779F3—
comment#4f4f65—
entity.name.function#87A1FF—
keyword, storage.type, storage.modifier, storage.type.enum, storage.type.struct, storage.type.template#BB9AF7—
constant.numeric#A779F3—
keyword.operator, entity.name.function.operator#FB899E—
variable.other.property, variable.other.constant.property, support.type.property-name#7DCFFF—
entity.other.attribute-name.class.css#BB9AF7—
entity.other.attribute-name.id.css#A779F3—
entity.other.attribute-name.pseudo-element#A779F3—
string, constant.other.symbol#85D0B7—
constant.character, constant.other#A779F3—
string.regexp#95DFC6—
entity.name.tag, meta.tag.sgml#FB899E—
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class, storage.type.built-in.primitive, support.type#03BDE5—
entity.name.scope-resolution#2CCAF0—
variable, variable.parameter.function-call#a9b1d6—
variable.language, variable.parameter.function.language.special.self.python#FB899E—
variable.parameter, meta.parameter#a9b1d6—
text.html.markdown markup.inline.raw#787c99—
markup.bold#BB9AF7—
punctuation.definition.bold#A779F3—
string.other.link.title, punctuation.definition.link.title, string.other.link.description, punctuation.definition.link.description#A779F3—
markup.underline.link, punctuation.definition.metadata#7DCFFF—
markup.heading#2CCAF0—
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#a9a3dd—
punctuation.definition.template-expression, punctuation.section.embedded, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.end.js#8BD5FF—