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#171728
  • activityBar.dropBorder#9486e4
  • activityBar.foreground#daddff
  • activityBar.inactiveForeground#63658b
  • activityBarBadge.background#94aef9
  • activityBarBadge.foreground#12121f
  • badge.background#94aef9
  • badge.foreground#12121f
  • breadcrumb.activeSelectionForeground#daddff
  • breadcrumb.background#1d1d2f
  • breadcrumb.focusForeground#daddff
  • breadcrumb.foreground#a0a3cc
  • breadcrumbPicker.background#171728
  • button.background#9486e4
  • button.foreground#12121f
  • button.hoverBackground#9f95e9
  • button.secondaryBackground#4f5071
  • button.secondaryForeground#daddff
  • button.secondaryHoverBackground#595b7e
  • debugExceptionWidget.background#171728
  • debugExceptionWidget.border#bd4277
  • debugTokenExpression.name#87bff7
  • debugTokenExpression.value#e5dca4
  • debugToolBar.background#171728
  • descriptionForeground#d0d3ff
  • diffEditor.insertedTextBackground#74d2b720
  • diffEditor.removedTextBackground#bd427720
  • disabledForeground#63658b
  • dropdown.background#171728
  • dropdown.border#4f5071
  • dropdown.foreground#daddff
  • dropdown.listBackground#222236
  • editor.background#1d1d2f
  • editor.findMatchBackground#e5dca450
  • editor.findMatchHighlightBackground#e5dca430
  • editor.findRangeHighlightBackground#22223650
  • editor.foreground#daddff
  • editor.hoverHighlightBackground#22223680
  • editor.inactiveSelectionBackground#22223699
  • editor.lineHighlightBackground#222236
  • editor.lineHighlightBorder#29293f00
  • editor.rangeHighlightBackground#22223699
  • editor.selectionBackground#29293fAA
  • editor.selectionHighlightBackground#222236AA
  • editor.snippetFinalTabstopHighlightBorder#74d2b7
  • editor.snippetTabstopHighlightBackground#22223680
  • editor.wordHighlightBackground#22223680
  • editor.wordHighlightStrongBackground#29293f80
  • editorBracketMatch.background#29293f
  • editorBracketMatch.border#9486e4
  • editorCodeLens.foreground#63658b
  • editorCursor.foreground#88a4f7
  • editorGroup.border#222236
  • editorGroup.dropBackground#222236AA
  • editorGroupHeader.noTabsBackground#1d1d2f
  • editorGroupHeader.tabsBackground#171728
  • editorGroupHeader.tabsBorder#22223600
  • editorGutter.addedBackground#74d2b7A0
  • editorGutter.background#1d1d2f
  • editorGutter.deletedBackground#bd4277A0
  • editorGutter.modifiedBackground#87bff7A0
  • editorHoverWidget.background#171728
  • editorHoverWidget.border#222236
  • editorHoverWidget.statusBarBackground#222236
  • editorIndentGuide.activeBackground#595b7e
  • editorIndentGuide.background#29293f
  • editorLineNumber.activeForeground#94aef9
  • editorLineNumber.foreground#595b7e
  • editorLink.activeForeground#88a4f7
  • editorOverviewRuler.addedForeground#74d2b7A0
  • editorOverviewRuler.border#171728
  • editorOverviewRuler.deletedForeground#bd4277A0
  • editorOverviewRuler.errorForeground#bd4277
  • editorOverviewRuler.findMatchForeground#e5dca480
  • editorOverviewRuler.infoForeground#87bff7
  • editorOverviewRuler.modifiedForeground#87bff7A0
  • editorOverviewRuler.warningForeground#e5dca4
  • editorRuler.foreground#29293f
  • editorSuggestWidget.background#171728
  • editorSuggestWidget.border#222236
  • editorSuggestWidget.foreground#daddff
  • editorSuggestWidget.highlightForeground#94aef9
  • editorSuggestWidget.listBackground#222236
  • editorSuggestWidget.selectedBackground#29293f
  • editorWhitespace.foreground#4f507140
  • editorWidget.background#171728
  • editorWidget.border#222236
  • errorForeground#bd4277
  • extensionBadge.remoteBackground#9486e4
  • extensionBadge.remoteForeground#12121f
  • extensionButton.prominentBackground#94aef9
  • extensionButton.prominentForeground#12121f
  • extensionButton.prominentHoverBackground#88a4f7
  • focusBorder#9486e4
  • foreground#daddff
  • input.background#171728
  • input.border#4f5071
  • input.foreground#daddff
  • input.placeholderForeground#63658b
  • inputOption.activeBackground#9486e460
  • inputOption.activeBorder#9486e4
  • inputValidation.errorBackground#bd4277
  • inputValidation.errorBorder#bf4a7f
  • inputValidation.errorForeground#daddff
  • inputValidation.infoBackground#87bff7
  • inputValidation.infoBorder#8fc8fa
  • inputValidation.infoForeground#12121f
  • inputValidation.warningBackground#e5dca4
  • inputValidation.warningBorder#ecdfac
  • inputValidation.warningForeground#12121f
  • list.activeSelectionBackground#29293f
  • list.activeSelectionForeground#daddff
  • list.dropBackground#222236AA
  • list.errorForeground#bd4277
  • list.focusBackground#29293FAA
  • list.focusForeground#daddff
  • list.highlightForeground#94aef9
  • list.hoverBackground#222236AA
  • list.hoverForeground#daddff
  • list.inactiveFocusBackground#222236
  • list.inactiveSelectionBackground#222236
  • list.inactiveSelectionForeground#cccfff
  • list.warningForeground#e5dca4
  • menu.background#171728
  • menu.foreground#daddff
  • menu.selectionBackground#29293f
  • menu.selectionBorder#9486e400
  • menu.selectionForeground#daddff
  • menu.separatorBackground#4f5071
  • menubar.selectionBackground#29293f
  • menubar.selectionForeground#daddff
  • notificationCenterHeader.background#1d1d2f
  • notificationCenterHeader.foreground#daddff
  • notificationLink.foreground#88a4f7
  • notifications.background#171728
  • notifications.border#222236
  • notifications.foreground#daddff
  • notificationToast.border#222236
  • panel.background#171728
  • panel.border#222236
  • panel.dropBorder#9486e4
  • panelInput.border#4f5071
  • panelTitle.activeBorder#9486e4
  • panelTitle.activeForeground#daddff
  • panelTitle.inactiveForeground#63658b
  • peekView.border#9486e4
  • peekViewEditor.background#222236
  • peekViewEditor.matchHighlightBackground#e5dca440
  • peekViewResult.background#171728
  • peekViewResult.fileForeground#daddff
  • peekViewResult.lineForeground#d0d3ff
  • peekViewResult.matchHighlightBackground#e5dca440
  • peekViewResult.selectionBackground#29293f
  • peekViewResult.selectionForeground#daddff
  • peekViewTitle.background#1d1d2f
  • peekViewTitleDescription.foreground#d0d3ff
  • peekViewTitleLabel.foreground#daddff
  • pickerGroup.border#9486e4
  • pickerGroup.foreground#94aef9
  • progressBar.background#94aef9
  • scrollbar.shadow#12121f80
  • scrollbarSlider.activeBackground#9f95e990
  • scrollbarSlider.background#63658b90
  • scrollbarSlider.hoverBackground#9486e490
  • selection.background#9486e460
  • settings.checkboxBackground#171728
  • settings.checkboxBorder#4f5071
  • settings.dropdownBackground#171728
  • settings.dropdownListBorder#4f5071
  • settings.headerForeground#daddff
  • settings.modifiedItemIndicator#9486e4
  • settings.numberInputBackground#171728
  • settings.textInputBackground#171728
  • sideBar.background#171728
  • sideBar.border#222236
  • sideBar.foreground#cccfff
  • sideBarSectionHeader.background#1d1d2f
  • sideBarSectionHeader.border#222236
  • sideBarSectionHeader.foreground#daddff
  • sideBarTitle.foreground#daddff
  • statusBar.background#171728
  • statusBar.border#22223600
  • statusBar.debuggingBackground#e2b88d
  • statusBar.debuggingForeground#12121f
  • statusBar.foreground#d0d3ff
  • statusBar.noFolderBackground#171728
  • statusBar.noFolderForeground#d0d3ff
  • statusBarItem.activeBackground#29293fCC
  • statusBarItem.errorBackground#bd4277
  • statusBarItem.errorForeground#daddff
  • statusBarItem.hoverBackground#222236CC
  • statusBarItem.prominentBackground#1d1d2f
  • statusBarItem.prominentHoverBackground#29293f
  • statusBarItem.remoteBackground#9486e4
  • statusBarItem.remoteForeground#12121f
  • tab.activeBackground#1d1d2f
  • tab.activeBorderBottom#9486e4
  • tab.activeForeground#daddff
  • tab.border#222236
  • tab.inactiveBackground#171728
  • tab.inactiveForeground#63658b
  • tab.unfocusedActiveBorderBottom#9486e480
  • tab.unfocusedActiveForeground#a0a3cc
  • tab.unfocusedInactiveForeground#4f5071
  • terminal.ansiBlack#222236
  • terminal.ansiBlue#87bff7
  • terminal.ansiBrightBlack#4f5071
  • terminal.ansiBrightBlue#8fc8fa
  • terminal.ansiBrightCyan#aaecf8
  • terminal.ansiBrightGreen#7ed7c0
  • terminal.ansiBrightMagenta#9f95e9
  • terminal.ansiBrightRed#bf4a7f
  • terminal.ansiBrightWhite#daddff
  • terminal.ansiBrightYellow#ecdfac
  • terminal.ansiCyan#9be9f8
  • terminal.ansiGreen#74d2b7
  • terminal.ansiMagenta#9486e4
  • terminal.ansiRed#bd4277
  • terminal.ansiWhite#d4d7ff
  • terminal.ansiYellow#e5dca4
  • terminal.background#1d1d2f
  • terminal.foreground#daddff
  • terminal.selectionBackground#29293fAA
  • terminalCursor.background#222236
  • terminalCursor.foreground#88a4f7
  • textBlockQuote.background#222236
  • textBlockQuote.border#9486e4
  • textCodeBlock.background#222236
  • textLink.activeForeground#88a4f7
  • textLink.foreground#94aef9
  • textPreformat.foreground#e5dca4
  • textSeparator.foreground#4f5071
  • titleBar.activeBackground#171728
  • titleBar.activeForeground#daddff
  • titleBar.border#22223600
  • titleBar.inactiveBackground#171728
  • titleBar.inactiveForeground#63658b
  • walkThrough.embeddedEditorBackground#222236
  • widget.shadow#12121f50

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#63658bitalic
string, punctuation.definition.string#e5dca4
string.regexp#e2b88d
constant.numeric#74d2b7
constant.language, constant.other.enum.php#9486e4
constant.character, constant.other#94aef9
variable#daddff
variable.language.this#c45a99
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, keyword.operator.word#9f95e9
keyword.operator#88a4f7
keyword.control#9f95e9italic
storage.type, storage.modifier#c45a99
storage.modifier.package, storage.modifier.import#daddff
entity.name.type, entity.other.inherited-class, support.class, support.type.primitive#88a4f7
entity.name.function#87bff7
variable.parameter#d0d3ffitalic
entity.name.tag#c45a99
entity.other.attribute-name#74d2b7
support.function#8fc8fa
support.constant#94aef9
punctuation#a0a3cc
meta.property-name#87bff7
meta.property-value#e5dca4
markup.bold#e2b88dbold
markup.italic#9486e4italic
markup.heading#87bff7bold
markup.underline.link#88a4f7
markup.inserted#74d2b7
markup.deleted#bd4277
markup.changed#e2b88d
source.json meta.structure.dictionary.json support.type.property-name.json, source.json meta.structure.array.json support.type.property-name.json#87bff7
source.json meta.structure.dictionary.value.json string.quoted.double.json#e5dca4
source.json meta.structure.dictionary.json constant.language.json#9486e4
punctuation.definition.heading.markdown#9f95e9
markup.inline.raw.string.markdown#e5dca4
entity.name.function.macro.rust#8fc8fa
entity.name.type.rust#88a4f7
entity.name.module.rust#94aef9
entity.name.type.struct.rust#88a4f7
entity.name.type.enum.rust#88a4f7
entity.name.type.trait.rust#9be9f8
entity.name.lifetime.rust#d0d3ffitalic
keyword.other.crate.rust#c45a99
entity.name.type.self.rust#c45a99italic
entity.name.super.rust#c45a99
keyword.operator.comparison.rust, keyword.operator.arithmetic.rust, keyword.operator.bitwise.rust, keyword.operator.logical.rust, keyword.operator.misc.rust, punctuation.operator.assignment.rust#88a4f7
punctuation.separator.colon.rust, punctuation.separator.comma.rust, punctuation.separator.type-classification.rust, keyword.operator.arrow.skinny.rust#a0a3cc
meta.attribute.rust punctuation.definition.attribute.rust#7ed7c0
string.interpolated.rust constant.other.placeholder.rust#e2b88d