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.activeBackground#b19cd920
  • activityBar.activeBorder#b19cd9
  • activityBar.background#1f1a28
  • activityBar.foreground#f8f4ff
  • activityBar.inactiveForeground#b8aec8
  • activityBarBadge.background#c9a9dd
  • activityBarBadge.foreground#1f1a28
  • badge.background#b19cd9
  • badge.foreground#1f1a28
  • breadcrumb.activeSelectionForeground#c9a9dd
  • breadcrumb.background#2a2438
  • breadcrumb.focusForeground#f8f4ff
  • breadcrumb.foreground#b8aec8
  • breadcrumbPicker.background#1f1a28
  • button.background#b19cd9
  • button.foreground#1f1a28
  • button.hoverBackground#c9a9dd
  • button.secondaryBackground#251f30
  • button.secondaryForeground#e0d8f0
  • button.secondaryHoverBackground#2a2438
  • diffEditor.insertedTextBackground#b19cd920
  • diffEditor.removedTextBackground#dda0dd20
  • dropdown.background#251f30
  • dropdown.border#b19cd9
  • dropdown.foreground#f8f4ff
  • editor.background#2a2438
  • editor.findMatchBackground#dda0dd60
  • editor.findMatchHighlightBackground#dda0dd30
  • editor.findRangeHighlightBackground#b19cd920
  • editor.foldBackground#d8b4e220
  • editor.foreground#f8f4ff
  • editor.hoverHighlightBackground#d8b4e220
  • editor.lineHighlightBorder#b19cd920
  • editor.rangeHighlightBackground#b19cd920
  • editor.selectionBackground#b19cd940
  • editor.selectionHighlightBackground#b19cd930
  • editor.wordHighlightBackground#c9a9dd30
  • editor.wordHighlightStrongBackground#c9a9dd40
  • editorBracketHighlight.foreground1#b19cd9
  • editorBracketHighlight.foreground2#c9a9dd
  • editorBracketHighlight.foreground3#d8b4e2
  • editorBracketHighlight.foreground4#dda0dd
  • editorBracketHighlight.foreground5#e6ddff
  • editorBracketHighlight.foreground6#f8f4ff
  • editorBracketHighlight.unexpectedBracket.foreground#dda0dd
  • editorError.foreground#dda0dd
  • editorGroup.border#b19cd930
  • editorGroup.dropBackground#b19cd920
  • editorGroupHeader.tabsBackground#1f1a28
  • editorGutter.addedBackground#b19cd9
  • editorGutter.deletedBackground#dda0dd
  • editorGutter.modifiedBackground#c9a9dd
  • editorHoverWidget.background#1f1a28
  • editorHoverWidget.border#b19cd9
  • editorInfo.foreground#c9a9dd
  • editorLineNumber.activeForeground#e0d8f0
  • editorLineNumber.foreground#b8aec8
  • editorLink.activeForeground#c9a9dd
  • editorOverviewRuler.addedForeground#b19cd9
  • editorOverviewRuler.border#1f1a28
  • editorOverviewRuler.deletedForeground#dda0dd
  • editorOverviewRuler.errorForeground#dda0dd
  • editorOverviewRuler.infoForeground#c9a9dd
  • editorOverviewRuler.modifiedForeground#c9a9dd
  • editorOverviewRuler.selectionHighlightForeground#b19cd980
  • editorOverviewRuler.warningForeground#e6ddff
  • editorOverviewRuler.wordHighlightForeground#c9a9dd80
  • editorOverviewRuler.wordHighlightStrongForeground#d8b4e280
  • editorSuggestWidget.background#1f1a28
  • editorSuggestWidget.foreground#f8f4ff
  • editorSuggestWidget.selectedBackground#b19cd930
  • editorWarning.foreground#e6ddff
  • editorWidget.background#1f1a28
  • editorWidget.border#b19cd9
  • errorForeground#dda0dd
  • focusBorder#b19cd9
  • foreground#f8f4ff
  • gitDecoration.conflictingResourceForeground#e6ddff
  • gitDecoration.deletedResourceForeground#dda0dd
  • gitDecoration.ignoredResourceForeground#b8aec8
  • gitDecoration.modifiedResourceForeground#c9a9dd
  • gitDecoration.untrackedResourceForeground#b19cd9
  • input.background#251f30
  • input.border#b19cd9
  • input.foreground#f8f4ff
  • input.placeholderForeground#b8aec8
  • inputOption.activeBorder#c9a9dd
  • inputValidation.errorBorder#dda0dd
  • inputValidation.infoBorder#c9a9dd
  • inputValidation.warningBorder#e6ddff
  • list.activeSelectionBackground#b19cd930
  • list.activeSelectionForeground#f8f4ff
  • list.dropBackground#b19cd920
  • list.errorForeground#dda0dd
  • list.focusBackground#b19cd920
  • list.highlightForeground#c9a9dd
  • list.hoverBackground#d8b4e220
  • list.inactiveSelectionBackground#b19cd920
  • list.warningForeground#e6ddff
  • panel.background#251f30
  • panel.border#b19cd930
  • panelTitle.activeBorder#b19cd9
  • panelTitle.activeForeground#f8f4ff
  • panelTitle.inactiveForeground#b8aec8
  • progressBar.background#c9a9dd
  • selection.background#b19cd950
  • settings.checkboxBackground#251f30
  • settings.checkboxBorder#b19cd9
  • settings.checkboxForeground#f8f4ff
  • settings.dropdownBackground#251f30
  • settings.dropdownBorder#b19cd9
  • settings.dropdownForeground#f8f4ff
  • settings.headerForeground#f8f4ff
  • settings.modifiedItemIndicator#c9a9dd
  • settings.numberInputBackground#251f30
  • settings.numberInputBorder#b19cd9
  • settings.numberInputForeground#f8f4ff
  • settings.textInputBackground#251f30
  • settings.textInputBorder#b19cd9
  • settings.textInputForeground#f8f4ff
  • sideBar.background#251f30
  • sideBarSectionHeader.background#1f1a28
  • sideBarSectionHeader.border#b19cd930
  • sideBarTitle.foreground#f8f4ff
  • statusBar.background#1f1a28
  • statusBar.debuggingBackground#c9a9dd
  • statusBar.debuggingForeground#1f1a28
  • statusBar.foreground#f8f4ff
  • statusBar.noFolderBackground#251f30
  • statusBar.noFolderForeground#e0d8f0
  • statusBarItem.prominentBackground#b19cd9
  • statusBarItem.prominentHoverBackground#c9a9dd
  • statusBarItem.remoteBackground#d8b4e2
  • statusBarItem.remoteForeground#1f1a28
  • tab.activeBackground#2a2438
  • tab.activeBorderTop#b19cd9
  • tab.activeForeground#f8f4ff
  • tab.border#1f1a28
  • tab.inactiveBackground#1f1a28
  • tab.inactiveForeground#b8aec8
  • terminal.ansiBlack#1f1a28
  • terminal.ansiBlue#c9a9dd
  • terminal.ansiBrightBlack#251f30
  • terminal.ansiBrightBlue#d4b8e8
  • terminal.ansiBrightCyan#c8bed8
  • terminal.ansiBrightGreen#c4a9e4
  • terminal.ansiBrightMagenta#e2c4ec
  • terminal.ansiBrightRed#e8b4e8
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f0e8ff
  • terminal.ansiCyan#b8aec8
  • terminal.ansiGreen#b19cd9
  • terminal.ansiMagenta#d8b4e2
  • terminal.ansiRed#dda0dd
  • terminal.ansiWhite#f8f4ff
  • terminal.ansiYellow#e6ddff
  • terminal.background#2a2438
  • terminal.foreground#f8f4ff
  • titleBar.activeBackground#1f1a28
  • titleBar.activeForeground#f8f4ff
  • titleBar.inactiveBackground#1f1a28
  • titleBar.inactiveForeground#b8aec8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c9a9dd
comment, punctuation.definition.comment#b8aec8italic
comment keyword.codetag.notation, comment.block.documentation keyword#d8b4e2
string#e6ddff
punctuation.definition.string.begin, punctuation.definition.string.end#d8b4e2
constant, variable.other.constant#dda0dd
constant.numeric#c9a9dd
keyword, storage.type, storage.modifier#b19cd9bold
entity.name.function, meta.function-call#c9a9dd
variable.parameter#e0d8f0italic
entity.name.type.class, entity.name.class#d8b4e2
entity.name.type, storage.type#c9a9dditalic
variable#f8f4ff
variable.language#dda0dditalic
entity.name.tag#b19cd9
entity.other.attribute-name#c9a9dditalic
meta.selector#d8b4e2
support.type.property-name#c9a9dd
keyword.operator#b19cd9
punctuation#e0d8f0
string.regexp#e6ddff
markup.heading#c9a9ddbold
markup.bold#d8b4e2bold
markup.italic#e6ddffitalic
markup.underline.link#b19cd9
markup.inline.raw#dda0dd
invalid#dda0ddunderline
invalid.deprecated#b8aec8strikethrough
Lavender Dreams Theme by Lavender-Studio - VS Code Theme