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#944fc6
  • activityBar.background#15111B
  • activityBar.border#3A2E4D
  • activityBar.foreground#edabff
  • activityBar.inactiveForeground#F4EEFFaa
  • activityBarBadge.background#edabff
  • activityBarBadge.foreground#15111B
  • badge.background#944fc6
  • badge.foreground#15111B
  • breadcrumb.activeSelectionForeground#D8B4FE
  • breadcrumb.background#15111B
  • breadcrumb.focusForeground#944fc6
  • breadcrumb.foreground#F4EEFFaa
  • breadcrumbPicker.background#261E33
  • button.background#944fc6
  • button.foreground#15111B
  • button.hoverBackground#9333EA
  • button.secondaryBackground#3A2E4D
  • button.secondaryForeground#F4EEFF
  • button.secondaryHoverBackground#493961
  • checkbox.background#261E33
  • checkbox.border#3A2E4D
  • checkbox.foreground#D8B4FE
  • debugToolBar.background#261E33
  • descriptionForeground#F4EEFF
  • diffEditor.insertedLineBackground#7ED95712
  • diffEditor.insertedTextBackground#7ED95722
  • diffEditor.removedLineBackground#FF7DA612
  • diffEditor.removedTextBackground#FF7DA622
  • disabledForeground#9B89B388
  • dropdown.background#261E33
  • dropdown.border#3A2E4D
  • dropdown.foreground#F4EEFF
  • dropdown.listBackground#261E33
  • editor.background#11071b
  • editor.findMatchBackground#F4D35E44
  • editor.findMatchBorder#F4D35E
  • editor.findMatchHighlightBackground#F4D35E22
  • editor.findMatchHighlightBorder#F4D35E55
  • editor.foreground#F4EEFF
  • editor.hoverHighlightBackground#FFFFFF08
  • editor.inactiveSelectionBackground#944fc622
  • editor.lineHighlightBackground#FFFFFF06
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#D8B4FE10
  • editor.rangeHighlightBorder#D8B4FE22
  • editor.selectionBackground#944fc633
  • editor.selectionForeground#D8B4FE
  • editor.selectionHighlightBackground#944fc618
  • editor.selectionHighlightBorder#944fc633
  • editor.wordHighlightBackground#D8B4FE14
  • editor.wordHighlightBorder#D8B4FE33
  • editor.wordHighlightStrongBackground#9333EA18
  • editor.wordHighlightStrongBorder#9333EA44
  • editorBracketMatch.background#D8B4FE14
  • editorBracketMatch.border#D8B4FE55
  • editorCodeLens.foreground#F4EEFFaa
  • editorCursor.background#1D1726
  • editorCursor.foreground#D8B4FE
  • editorError.foreground#FF7DA6
  • editorGroup.border#3A2E4D
  • editorGroup.dropBackground#9333EA22
  • editorGroup.emptyBackground#1D1726
  • editorGroupHeader.tabsBackground#15111B
  • editorGroupHeader.tabsBorder#3A2E4D
  • editorGutter.addedBackground#7ED957
  • editorGutter.background#1D1726
  • editorGutter.deletedBackground#FF7DA6
  • editorGutter.modifiedBackground#7FD7C4
  • editorHint.foreground#7ED957
  • editorIndentGuide.activeBackground1#944fc666
  • editorIndentGuide.background1#3A2E4D
  • editorInfo.foreground#7FD7C4
  • editorLineNumber.activeForeground#edabff
  • editorLineNumber.foreground#F4EEFFaa
  • editorOverviewRuler.addedForeground#7ED957
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#D8B4FE
  • editorOverviewRuler.deletedForeground#FF7DA6
  • editorOverviewRuler.errorForeground#FF7DA6
  • editorOverviewRuler.findMatchForeground#F4D35Eaa
  • editorOverviewRuler.infoForeground#7FD7C4
  • editorOverviewRuler.modifiedForeground#7FD7C4
  • editorOverviewRuler.rangeHighlightForeground#D8B4FEaa
  • editorOverviewRuler.selectionHighlightForeground#944fc688
  • editorOverviewRuler.warningForeground#F4D35E
  • editorOverviewRuler.wordHighlightForeground#D8B4FE66
  • editorOverviewRuler.wordHighlightStrongForeground#9333EA88
  • editorRuler.foreground#3A2E4D
  • editorSuggestWidget.background#261E33
  • editorSuggestWidget.border#3A2E4D
  • editorSuggestWidget.foreground#F4EEFF
  • editorSuggestWidget.highlightForeground#944fc6
  • editorSuggestWidget.selectedBackground#944fc622
  • editorWarning.foreground#F4D35E
  • editorWhitespace.foreground#544764
  • editorWidget.background#261E33
  • editorWidget.border#3A2E4D
  • errorForeground#FF7DA6
  • focusBorder#944fc6
  • foreground#F4EEFF
  • gitDecoration.addedResourceForeground#7ED957
  • gitDecoration.conflictingResourceForeground#944fc6
  • gitDecoration.deletedResourceForeground#FF7DA6
  • gitDecoration.ignoredResourceForeground#F4EEFFaa
  • gitDecoration.modifiedResourceForeground#F4D35E
  • gitDecoration.submoduleResourceForeground#F4EEFFaa
  • gitDecoration.untrackedResourceForeground#B5F1E7
  • icon.foreground#D8B4FE
  • input.background#261E33
  • input.border#3A2E4D
  • input.foreground#F4EEFF
  • input.placeholderForeground#F4EEFFaa
  • inputOption.activeBackground#944fc622
  • inputOption.activeBorder#944fc6
  • inputOption.activeForeground#D8B4FE
  • inputValidation.errorBackground#FF7DA622
  • inputValidation.errorBorder#FF7DA6
  • inputValidation.infoBackground#7FD7C422
  • inputValidation.infoBorder#7FD7C4
  • inputValidation.warningBackground#F4D35E22
  • inputValidation.warningBorder#F4D35E
  • list.activeSelectionBackground#944fc622
  • list.activeSelectionForeground#F4EEFF
  • list.dropBackground#9333EA33
  • list.errorForeground#FF7DA6
  • list.focusBackground#944fc622
  • list.focusForeground#F4EEFF
  • list.highlightForeground#D8B4FE
  • list.hoverBackground#FFFFFF08
  • list.hoverForeground#F4EEFF
  • list.inactiveSelectionBackground#944fc618
  • list.inactiveSelectionForeground#F4EEFFaa
  • list.warningForeground#F4D35E
  • menu.background#261E33
  • menu.border#3A2E4D
  • menu.foreground#F4EEFF
  • menu.selectionBackground#944fc622
  • menu.selectionForeground#F4EEFF
  • menu.separatorBackground#3A2E4D
  • minimap.background#1D1726
  • minimap.errorHighlight#FF7DA6
  • minimap.findMatchHighlight#F4D35E55
  • minimap.selectionHighlight#944fc633
  • minimap.warningHighlight#F4D35E
  • notificationCenter.border#3A2E4D
  • notificationCenterHeader.background#15111B
  • notificationCenterHeader.foreground#D8B4FE
  • notificationLink.foreground#944fc6
  • notifications.background#261E33
  • notifications.border#3A2E4D
  • notifications.foreground#F4EEFF
  • panel.background#15111B
  • panel.border#3A2E4D
  • panelInput.border#3A2E4D
  • panelTitle.activeBorder#944fc6
  • panelTitle.activeForeground#edabff
  • panelTitle.border#3A2E4D
  • panelTitle.inactiveForeground#F4EEFFaa
  • pickerGroup.border#3A2E4D
  • pickerGroup.foreground#D8B4FE
  • progressBar.background#944fc6
  • quickInput.background#261E33
  • quickInput.foreground#F4EEFF
  • quickInputList.focusBackground#944fc622
  • quickInputList.focusForeground#F4EEFF
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#944fc666
  • scrollbarSlider.background#9B89B344
  • scrollbarSlider.hoverBackground#F4EEFFaa
  • settings.checkboxBackground#261E33
  • settings.checkboxBorder#3A2E4D
  • settings.checkboxForeground#D8B4FE
  • settings.dropdownBackground#261E33
  • settings.dropdownBorder#3A2E4D
  • settings.dropdownForeground#F4EEFF
  • settings.headerForeground#D8B4FE
  • settings.modifiedItemIndicator#F4D35E
  • settings.numberInputBackground#261E33
  • settings.numberInputBorder#3A2E4D
  • settings.numberInputForeground#F4EEFF
  • settings.textInputBackground#261E33
  • settings.textInputBorder#3A2E4D
  • settings.textInputForeground#F4EEFF
  • sideBar.background#160822
  • sideBar.border#3A2E4D
  • sideBar.dropBackground#9333EA22
  • sideBar.foreground#F4EEFF
  • sideBarSectionHeader.background#261E33
  • sideBarSectionHeader.border#3A2E4D
  • sideBarSectionHeader.foreground#944fc6
  • sideBarTitle.foreground#edabff
  • statusBar.background#15111B
  • statusBar.border#944fc6
  • statusBar.debuggingBackground#F4D35E
  • statusBar.debuggingForeground#11071b
  • statusBar.foreground#F4EEFF
  • statusBar.noFolderBackground#11071b
  • statusBar.noFolderForeground#F4EEFF
  • statusBarItem.hoverBackground#FFFFFF10
  • statusBarItem.prominentBackground#944fc622
  • statusBarItem.prominentHoverBackground#944fc633
  • statusBarItem.remoteBackground#944fc6
  • statusBarItem.remoteForeground#15111B
  • tab.activeBackground#15111B
  • tab.activeBorder#edabff
  • tab.activeBorderTop#944fc6
  • tab.activeForeground#F4EEFF
  • tab.border#3A2E4D
  • tab.hoverBackground#261E33
  • tab.hoverForeground#F4EEFF
  • tab.inactiveBackground#15111B
  • tab.inactiveForeground#F4EEFFaa
  • tab.unfocusedActiveForeground#F4EEFFaa
  • tab.unfocusedInactiveForeground#86769C
  • terminal.ansiBlack#1D1726
  • terminal.ansiBlue#7FD7C4
  • terminal.ansiBrightBlack#86769C
  • terminal.ansiBrightBlue#9DECE0
  • terminal.ansiBrightCyan#D1FAF3
  • terminal.ansiBrightGreen#A2EA7D
  • terminal.ansiBrightMagenta#D8B4FE
  • terminal.ansiBrightRed#FF9BBB
  • terminal.ansiBrightWhite#FCF8FF
  • terminal.ansiBrightYellow#F7DE7F
  • terminal.ansiCyan#B5F1E7
  • terminal.ansiGreen#7ED957
  • terminal.ansiMagenta#944fc6
  • terminal.ansiRed#FF7DA6
  • terminal.ansiWhite#F4EEFF
  • terminal.ansiYellow#F4D35E
  • terminal.background#11071b
  • terminal.border#3A2E4D
  • terminal.foreground#F4EEFF
  • terminal.selectionBackground#944fc622
  • terminalCursor.background#1D1726
  • terminalCursor.foreground#D8B4FE
  • textBlockQuote.background#261E33
  • textBlockQuote.border#9333EA
  • textCodeBlock.background#261E33
  • textLink.activeForeground#D8B4FE
  • textLink.foreground#944fc6
  • textPreformat.foreground#D8B4FE
  • textSeparator.foreground#3A2E4D
  • titleBar.activeBackground#11071b
  • titleBar.activeForeground#F4EEFF
  • titleBar.border#3A2E4D
  • titleBar.inactiveBackground#11071baa
  • titleBar.inactiveForeground#F4EEFFaa
  • welcomePage.background#1D1726
  • welcomePage.progress.background#3A2E4D
  • welcomePage.progress.foreground#944fc6
  • window.activeBorder#3A2E4D
  • window.inactiveBorder#1D1726

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#F4EEFFaaitalic
string, string.quoted, string.template#edabff
constant.numeric#944fc6
keyword, storage, storage.type#944fc6bold
keyword.operator, punctuation.separator, punctuation.terminator#F4EEFF
variable, variable.parameter#F4EEFF
constant, constant.language#edabff
entity.name.function, support.function, variable.function#edabff
entity.name.function.member, meta.method-call#edabff
entity.name.type, entity.name.class, support.class, support.type#edabffbold
variable.other.property, meta.object-literal.key#F4EEFF
entity.name.tag#944fc6
entity.other.attribute-name#edabff
markup.heading, entity.name.section.markdown#f3e1febold
markup.bold#f3e1febold
markup.italic#edabffitalic
markup.inline.raw, markup.fenced_code.block#F4D35E
invalid, invalid.illegal#FF7DA6underline