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#1a1730
  • activityBar.border#2a2548
  • activityBar.foreground#f8f7ff
  • activityBarBadge.background#9381ff
  • activityBarBadge.foreground#1a1730
  • badge.background#9381ff
  • badge.foreground#1a1730
  • breadcrumb.activeSelectionForeground#f8f7ff
  • breadcrumb.background#1a1730
  • breadcrumb.focusForeground#b8b8ff
  • breadcrumb.foreground#6b65a0
  • breadcrumbPicker.background#1a1730
  • button.background#9381ff
  • button.foreground#f8f7ff
  • button.hoverBackground#7a6ef0
  • debugExceptionWidget.background#2a2548
  • debugExceptionWidget.border#9381ff
  • diffEditor.insertedTextBackground#9381ff20
  • diffEditor.removedTextBackground#9381ff15
  • dropdown.background#1a1730
  • dropdown.border#2a2548
  • dropdown.foreground#b8b8ff
  • dropdown.listBackground#2a2548
  • editor.background#1a1730
  • editor.findMatchBackground#9381ff50
  • editor.findMatchHighlightBackground#9381ff25
  • editor.foreground#f8f7ff
  • editor.inactiveSelectionBackground#9381ff40
  • editor.lineHighlightBackground#2a2548
  • editor.rangeHighlightBackground#9381ff15
  • editor.selectionBackground#9381ff66
  • editor.selectionHighlightBackground#9381ff44
  • editor.wordHighlightBackground#9381ff44
  • editor.wordHighlightStrongBackground#9381ff66
  • editorBracketMatch.background#9381ff20
  • editorBracketMatch.border#9381ff
  • editorCodeLens.foreground#4a4470
  • editorCursor.foreground#9381ff
  • editorError.foreground#f14c4c
  • editorGroup.border#2a2548
  • editorGroup.dropBackground#2a2548cc
  • editorGroupHeader.noTabsBackground#1a1730
  • editorGroupHeader.tabsBackground#1a1730
  • editorGroupHeader.tabsBorder#2a2548
  • editorGutter.addedBackground#b8b8ffb3
  • editorGutter.background#1a1730
  • editorGutter.deletedBackground#9381ffb3
  • editorGutter.modifiedBackground#6b65a0b3
  • editorHoverWidget.background#2a2548
  • editorHoverWidget.border#4a4470
  • editorLineNumber.activeForeground#6b65a0
  • editorLineNumber.foreground#2a2548
  • editorLink.activeForeground#b8b8ff
  • editorMarkerNavigation.background#2a2548
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#b8b8ff
  • editorOverviewRuler.border#2a2548
  • editorOverviewRuler.currentContentForeground#b8b8ff20
  • editorOverviewRuler.deletedForeground#9381ff
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#9381ff50
  • editorOverviewRuler.incomingContentForeground#9381ff20
  • editorOverviewRuler.infoForeground#9381ff
  • editorOverviewRuler.modifiedForeground#6b65a0
  • editorOverviewRuler.rangeHighlightForeground#9381ff44
  • editorOverviewRuler.selectionHighlightForeground#9381ff44
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#9381ff44
  • editorOverviewRuler.wordHighlightStrongForeground#9381ff66
  • editorRuler.foreground#2a2548
  • editorSuggestWidget.background#2a2548
  • editorSuggestWidget.border#4a4470
  • editorSuggestWidget.foreground#f8f7ff
  • editorSuggestWidget.highlightForeground#f8f7ff
  • editorSuggestWidget.selectedBackground#9381ff66
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#2a254866
  • editorWidget.background#2a2548
  • editorWidget.border#4a4470
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#9381ff
  • extensionButton.prominentForeground#f8f7ff
  • extensionButton.prominentHoverBackground#7a6ef0
  • focusBorder#9381ff80
  • foreground#b8b8ff
  • gitDecoration.conflictingResourceForeground#6b65a0
  • gitDecoration.deletedResourceForeground#9381ff
  • gitDecoration.ignoredResourceForeground#4a4470
  • gitDecoration.modifiedResourceForeground#b8b8ff
  • gitDecoration.untrackedResourceForeground#f8f7ff
  • input.background#2a2548
  • input.border#4a4470
  • input.foreground#f8f7ff
  • input.placeholderForeground#4a4470
  • inputOption.activeBorder#9381ff
  • inputValidation.errorBackground#1a1730
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#1a1730
  • inputValidation.infoBorder#9381ff
  • inputValidation.warningBackground#1a1730
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#9381ff66
  • list.activeSelectionForeground#f8f7ff
  • list.dropBackground#9381ff44
  • list.focusBackground#9381ff66
  • list.focusForeground#f8f7ff
  • list.highlightForeground#9381ff
  • list.hoverBackground#2a2548
  • list.hoverForeground#f8f7ff
  • list.inactiveFocusBackground#9381ff40
  • list.inactiveSelectionBackground#9381ff44
  • list.inactiveSelectionForeground#f8f7ff
  • list.invalidItemForeground#9381ff
  • merge.border#9381ff80
  • merge.currentContentBackground#b8b8ff20
  • merge.currentHeaderBackground#b8b8ff40
  • merge.incomingContentBackground#9381ff20
  • merge.incomingHeaderBackground#9381ff40
  • notificationCenter.border#9381ff
  • notificationCenterHeader.background#9381ff
  • notificationCenterHeader.foreground#f8f7ff
  • notificationLink.foreground#b8b8ff
  • notifications.background#2a2548
  • notifications.border#4a4470
  • notifications.foreground#f8f7ff
  • notificationToast.border#4a4470
  • panel.background#1a1730
  • panel.border#2a2548
  • panelTitle.activeBorder#9381ff
  • panelTitle.activeForeground#f8f7ff
  • panelTitle.inactiveForeground#4a4470
  • peekView.border#4a4470
  • peekViewEditor.background#2a2548
  • peekViewEditor.matchHighlightBackground#9381ff30
  • peekViewEditorGutter.background#2a2548
  • peekViewResult.background#1a1730
  • peekViewResult.fileForeground#f8f7ff
  • peekViewResult.lineForeground#b8b8ff
  • peekViewResult.matchHighlightBackground#9381ff30
  • peekViewResult.selectionBackground#9381ff66
  • peekViewResult.selectionForeground#f8f7ff
  • peekViewTitle.background#1a1730
  • peekViewTitleDescription.foreground#4a4470
  • peekViewTitleLabel.foreground#f8f7ff
  • pickerGroup.border#2a2548
  • pickerGroup.foreground#4a4470
  • progressBar.background#9381ff
  • scrollbar.shadow#00000033
  • scrollbarSlider.activeBackground#9381ff66
  • scrollbarSlider.background#9381ff22
  • scrollbarSlider.hoverBackground#9381ff44
  • selection.background#9381ff66
  • sideBar.background#1a1730
  • sideBar.border#2a2548
  • sideBar.foreground#b8b8ff
  • sideBarSectionHeader.background#2a2548
  • sideBarSectionHeader.foreground#6b65a0
  • sideBarTitle.foreground#b8b8ff
  • statusBar.background#1a1730
  • statusBar.border#2a2548
  • statusBar.debuggingBackground#9381ff
  • statusBar.debuggingForeground#f8f7ff
  • statusBar.foreground#6b65a0
  • statusBar.noFolderBackground#2a2548
  • statusBar.noFolderForeground#6b65a0
  • statusBarItem.activeBackground#9381ff66
  • statusBarItem.hoverBackground#9381ff44
  • statusBarItem.prominentBackground#9381ff
  • statusBarItem.prominentHoverBackground#7a6ef0
  • tab.activeBackground#1a1730
  • tab.activeBorder#9381ff
  • tab.activeForeground#f8f7ff
  • tab.border#2a2548
  • tab.hoverBackground#2a2548
  • tab.inactiveBackground#1a1730
  • tab.inactiveForeground#4a4470
  • tab.unfocusedActiveForeground#b8b8ff
  • tab.unfocusedHoverBackground#2a2548
  • tab.unfocusedInactiveForeground#4a4470
  • terminal.ansiBlack#1a1730
  • terminal.ansiBlue#6b65a0
  • terminal.ansiBrightBlack#4a4470
  • terminal.ansiBrightBlue#b8b8ff
  • terminal.ansiBrightCyan#f8f7ff
  • terminal.ansiBrightGreen#f8f7ff
  • terminal.ansiBrightMagenta#7a6ef0
  • terminal.ansiBrightRed#9381ff
  • terminal.ansiBrightWhite#f8f7ff
  • terminal.ansiBrightYellow#ffeedd
  • terminal.ansiCyan#b8b8ff
  • terminal.ansiGreen#b8b8ff
  • terminal.ansiMagenta#9381ff
  • terminal.ansiRed#9381ff
  • terminal.ansiWhite#b8b8ff
  • terminal.ansiYellow#ffd8be
  • terminal.background#1a1730
  • terminal.foreground#f8f7ff
  • terminal.selectionBackground#9381ff66
  • titleBar.activeBackground#1a1730
  • titleBar.activeForeground#f8f7ff
  • titleBar.border#2a2548
  • titleBar.inactiveBackground#1a1730
  • titleBar.inactiveForeground#4a4470
  • walkThrough.embeddedEditorBackground#1a1730
  • widget.shadow#00000044

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#4a4470italic
keyword, storage.type, storage.modifier#9381ffitalic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#6b65a0
keyword.control.import, keyword.control.export, keyword.control.from#9381ff
string, string.quoted, string.template#ffd8be
punctuation.definition.string.begin, punctuation.definition.string.end#e8b898
constant.character.escape, constant.other.placeholder#ffeedditalic
entity.name.function, meta.function-call, variable.function, support.function#b8b8ff
entity.name.label#b8b8ff
entity.name.type.class, entity.name.type, support.class, support.type#c8c0ffitalic
meta.type.annotation, meta.type.parameters#c8c0ffitalic
entity.name.type.module, meta.import variable.other#c8c0ff
variable, variable.name, variable.other#f8f7ff
variable.parameter#e8e6ff
variable.language#ffd8beitalic
variable.other.property, variable.other.object.property, support.variable.property#ffd8be
constant.numeric#a8e0c0
constant.language#9381ff
constant, constant.other, constant.character#a8e0c0
entity.name.tag, meta.tag.sgml#9381ff
entity.name.tag support.class.component#c8c0ff
meta.tag.attribute, entity.other.attribute-name#ffd8beitalic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#6b65a0
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#4a4470
punctuation.accessor#6b65a0
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#c8c0ff
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#ffd8be
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#b8b8ff
meta.property-value.css, support.constant.property-value.css#ffd8be
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#a8e0c0italic
meta.object-literal.key#ffd8be
source.json meta.structure.dictionary.json support.type.property-name.json#b8b8ff
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffd8be
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#c8c0ff
*url*, *link*, *uri*#b8b8ffunderline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9381ffitalic
markup.heading, entity.name.section#b8b8ffbold
markup.italic#e8e6ffitalic
markup.bold#f8f7ffbold
markup.underline#ffd8beunderline
markup.strike#4a4470strikethrough
markup.quote#6b65a0italic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a8e0c0
markup.deleted, punctuation.definition.deleted#9381ff
markup.inserted, punctuation.definition.inserted#a8e0c0
markup.changed, punctuation.definition.changed#ffd8be
entity.other.inherited-class#c8c0ff
invalid, invalid.illegal#f14c4c
token.info-token#9381ff
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#4a4470
Soft Lavender PS Theme by Pranav S S - VS Code Theme