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#a08bc415
  • activityBar.activeBorder#a08bc4
  • activityBar.background#221d2a
  • activityBar.foreground#e8e4f0
  • activityBar.inactiveForeground#a89eb8
  • activityBarBadge.background#b89cc8
  • activityBarBadge.foreground#221d2a
  • badge.background#a08bc4
  • badge.foreground#221d2a
  • breadcrumb.activeSelectionForeground#b89cc8
  • breadcrumb.background#2d273b
  • breadcrumb.focusForeground#e8e4f0
  • breadcrumb.foreground#a89eb8
  • breadcrumbPicker.background#221d2a
  • button.background#a08bc4
  • button.foreground#221d2a
  • button.hoverBackground#b89cc8
  • button.secondaryBackground#2a2436
  • button.secondaryForeground#d0c8e0
  • button.secondaryHoverBackground#2d273b
  • diffEditor.insertedTextBackground#a08bc415
  • diffEditor.removedTextBackground#c99ac915
  • dropdown.background#2a2436
  • dropdown.border#a08bc4
  • dropdown.foreground#e8e4f0
  • editor.background#2d273b
  • editor.findMatchBackground#c99ac950
  • editor.findMatchHighlightBackground#c99ac925
  • editor.findRangeHighlightBackground#a08bc415
  • editor.foldBackground#c7a7d215
  • editor.foreground#e8e4f0
  • editor.hoverHighlightBackground#c7a7d215
  • editor.lineHighlightBorder#a08bc415
  • editor.rangeHighlightBackground#a08bc415
  • editor.selectionBackground#a08bc435
  • editor.selectionHighlightBackground#a08bc425
  • editor.wordHighlightBackground#b89cc825
  • editor.wordHighlightStrongBackground#b89cc835
  • editorBracketHighlight.foreground1#a08bc4
  • editorBracketHighlight.foreground2#b89cc8
  • editorBracketHighlight.foreground3#c7a7d2
  • editorBracketHighlight.foreground4#c99ac9
  • editorBracketHighlight.foreground5#d4cbf0
  • editorBracketHighlight.foreground6#e8e4f0
  • editorBracketHighlight.unexpectedBracket.foreground#c99ac9
  • editorError.foreground#c99ac9
  • editorGroup.border#a08bc425
  • editorGroup.dropBackground#a08bc415
  • editorGroupHeader.tabsBackground#221d2a
  • editorGutter.addedBackground#a08bc4
  • editorGutter.deletedBackground#c99ac9
  • editorGutter.modifiedBackground#b89cc8
  • editorHoverWidget.background#221d2a
  • editorHoverWidget.border#a08bc4
  • editorInfo.foreground#b89cc8
  • editorLineNumber.activeForeground#d0c8e0
  • editorLineNumber.foreground#a89eb8
  • editorLink.activeForeground#b89cc8
  • editorOverviewRuler.addedForeground#a08bc4
  • editorOverviewRuler.border#221d2a
  • editorOverviewRuler.deletedForeground#c99ac9
  • editorOverviewRuler.errorForeground#c99ac9
  • editorOverviewRuler.infoForeground#b89cc8
  • editorOverviewRuler.modifiedForeground#b89cc8
  • editorOverviewRuler.selectionHighlightForeground#a08bc470
  • editorOverviewRuler.warningForeground#d4cbf0
  • editorOverviewRuler.wordHighlightForeground#b89cc870
  • editorOverviewRuler.wordHighlightStrongForeground#c7a7d270
  • editorSuggestWidget.background#221d2a
  • editorSuggestWidget.foreground#e8e4f0
  • editorSuggestWidget.selectedBackground#a08bc425
  • editorWarning.foreground#d4cbf0
  • editorWidget.background#221d2a
  • editorWidget.border#a08bc4
  • errorForeground#c99ac9
  • focusBorder#a08bc4
  • foreground#e8e4f0
  • gitDecoration.conflictingResourceForeground#d4cbf0
  • gitDecoration.deletedResourceForeground#c99ac9
  • gitDecoration.ignoredResourceForeground#a89eb8
  • gitDecoration.modifiedResourceForeground#b89cc8
  • gitDecoration.untrackedResourceForeground#a08bc4
  • input.background#2a2436
  • input.border#a08bc4
  • input.foreground#e8e4f0
  • input.placeholderForeground#a89eb8
  • inputOption.activeBorder#b89cc8
  • inputValidation.errorBorder#c99ac9
  • inputValidation.infoBorder#b89cc8
  • inputValidation.warningBorder#d4cbf0
  • list.activeSelectionBackground#a08bc425
  • list.activeSelectionForeground#e8e4f0
  • list.dropBackground#a08bc415
  • list.errorForeground#c99ac9
  • list.focusBackground#a08bc415
  • list.highlightForeground#b89cc8
  • list.hoverBackground#c7a7d215
  • list.inactiveSelectionBackground#a08bc415
  • list.warningForeground#d4cbf0
  • panel.background#2a2436
  • panel.border#a08bc425
  • panelTitle.activeBorder#a08bc4
  • panelTitle.activeForeground#e8e4f0
  • panelTitle.inactiveForeground#a89eb8
  • progressBar.background#b89cc8
  • selection.background#a08bc440
  • settings.checkboxBackground#2a2436
  • settings.checkboxBorder#a08bc4
  • settings.checkboxForeground#e8e4f0
  • settings.dropdownBackground#2a2436
  • settings.dropdownBorder#a08bc4
  • settings.dropdownForeground#e8e4f0
  • settings.headerForeground#e8e4f0
  • settings.modifiedItemIndicator#b89cc8
  • settings.numberInputBackground#2a2436
  • settings.numberInputBorder#a08bc4
  • settings.numberInputForeground#e8e4f0
  • settings.textInputBackground#2a2436
  • settings.textInputBorder#a08bc4
  • settings.textInputForeground#e8e4f0
  • sideBar.background#2a2436
  • sideBarSectionHeader.background#221d2a
  • sideBarSectionHeader.border#a08bc425
  • sideBarTitle.foreground#e8e4f0
  • statusBar.background#221d2a
  • statusBar.debuggingBackground#b89cc8
  • statusBar.debuggingForeground#221d2a
  • statusBar.foreground#e8e4f0
  • statusBar.noFolderBackground#2a2436
  • statusBar.noFolderForeground#d0c8e0
  • statusBarItem.prominentBackground#a08bc4
  • statusBarItem.prominentHoverBackground#b89cc8
  • statusBarItem.remoteBackground#c7a7d2
  • statusBarItem.remoteForeground#221d2a
  • tab.activeBackground#2d273b
  • tab.activeBorderTop#a08bc4
  • tab.activeForeground#e8e4f0
  • tab.border#221d2a
  • tab.inactiveBackground#221d2a
  • tab.inactiveForeground#a89eb8
  • terminal.ansiBlack#221d2a
  • terminal.ansiBlue#b89cc8
  • terminal.ansiBrightBlack#2a2436
  • terminal.ansiBrightBlue#c3abd8
  • terminal.ansiBrightCyan#b8aec8
  • terminal.ansiBrightGreen#b39cd4
  • terminal.ansiBrightMagenta#d2b7dc
  • terminal.ansiBrightRed#d4a4d4
  • terminal.ansiBrightWhite#f0ecf8
  • terminal.ansiBrightYellow#e0d8f0
  • terminal.ansiCyan#a89eb8
  • terminal.ansiGreen#a08bc4
  • terminal.ansiMagenta#c7a7d2
  • terminal.ansiRed#c99ac9
  • terminal.ansiWhite#e8e4f0
  • terminal.ansiYellow#d4cbf0
  • terminal.background#2d273b
  • terminal.foreground#e8e4f0
  • titleBar.activeBackground#221d2a
  • titleBar.activeForeground#e8e4f0
  • titleBar.inactiveBackground#221d2a
  • titleBar.inactiveForeground#a89eb8

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#b89cc8
comment, punctuation.definition.comment#a89eb8italic
comment keyword.codetag.notation, comment.block.documentation keyword#c7a7d2
string#d4cbf0
punctuation.definition.string.begin, punctuation.definition.string.end#c7a7d2
constant, variable.other.constant#c99ac9
constant.numeric#b89cc8
keyword, storage.type, storage.modifier#a08bc4bold
entity.name.function, meta.function-call#b89cc8
variable.parameter#d0c8e0italic
entity.name.type.class, entity.name.class#c7a7d2
entity.name.type, storage.type#b89cc8italic
variable#e8e4f0
variable.language#c99ac9italic
entity.name.tag#a08bc4
entity.other.attribute-name#b89cc8italic
meta.selector#c7a7d2
support.type.property-name#b89cc8
keyword.operator#a08bc4
punctuation#d0c8e0
string.regexp#d4cbf0
markup.heading#b89cc8bold
markup.bold#c7a7d2bold
markup.italic#d4cbf0italic
markup.underline.link#a08bc4
markup.inline.raw#c99ac9
invalid#c99ac9underline
invalid.deprecated#a89eb8strikethrough
Lavender Dreams Theme by Lavender-Studio - VS Code Theme