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#120D0F70
  • activityBar.activeBorder#9B5ED4
  • activityBar.background#050505
  • activityBar.foreground#E3DDE9
  • activityBar.inactiveForeground#66606B
  • activityBarBadge.background#A777D5
  • activityBarBadge.foreground#050505
  • activityBarTop.foreground#E3DDE9
  • badge.background#A777D5
  • badge.foreground#050505
  • breadcrumb.activeForeground#E3DDE9
  • breadcrumb.activeSelectionForeground#E3DDE9
  • breadcrumb.background#050505
  • breadcrumb.focusForeground#E3DDE9
  • breadcrumb.foreground#66606B
  • breadcrumbPicker.background#050505
  • button.background#A777D5db
  • button.foreground#050505
  • button.hoverBackground#A777D5
  • button.secondaryBackground#9B5ED4db
  • button.secondaryForeground#E3DDE9
  • button.secondaryHoverBackground#9B5ED4
  • checkbox.background#0C0C0D
  • checkbox.foreground#E3DDE9
  • debugToolBar.background#7BA6D1
  • debugToolBar.foreground#050505
  • descriptionForeground#E1D1D0
  • diffEditor.diagonalFill#7BA6D1
  • diffEditor.insertedLineBackground#7BA6D140
  • diffEditor.insertedTextBackground#7BA6D150
  • diffEditor.insertedTextBorder#7BA6D1
  • diffEditor.removedLineBackground#D9727240
  • diffEditor.removedTextBackground#D9727250
  • diffEditor.removedTextBorder#D97272
  • diffEditorGutter.insertedLineBackground#7BA6D1
  • diffEditorGutter.removedLineBackground#D97272
  • disabledForeground#66606B
  • dropdown.background#1C171C
  • dropdown.border#1F191F
  • dropdown.foreground#E3DDE9
  • editor.background#0C0C0D
  • editor.findMatchBackground#26354570
  • editor.findMatchForeground#E3DDE9
  • editor.findMatchHighlightBackground#120D0F70
  • editor.findMatchHighlightForeground#E3DDE9
  • editor.findRangeHighlightBackground#31213070
  • editor.foldBackground#120D0F70
  • editor.foldPlaceholderForeground#E3DDE9
  • editor.foreground#E3DDE9
  • editor.hoverHighlightBackground#120D0F70
  • editor.inactiveSelectionBackground#31213070
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#E1D1D0
  • editor.rangeHighlightBackground#120D0F70
  • editor.selectionBackground#31213070
  • editor.selectionForeground#E3DDE9
  • editor.selectionHighlightBackground#31213070
  • editor.snippetFinalTabstopHighlightBackground#120D0F70
  • editor.snippetTabstopHighlightBackground#120D0F70
  • editor.symbolHighlightBackground#120D0F70
  • editor.wordHighlightBackground#120D0F70
  • editor.wordHighlightStrongBackground#120D0F50
  • editor.wordHighlightTextBackground#120D0F70
  • editorCodeLens.foreground#66606B
  • editorCursor.background#120D0F70
  • editorCursor.foreground#9B5ED4
  • editorError.foreground#D97272
  • editorGroup.border#1F191F
  • editorGroup.dropBackground#1C171C
  • editorGroup.emptyBackground#0C0C0D
  • editorGroupHeader.border#1F191F
  • editorGroupHeader.tabsBackground#0C0C0D
  • editorGutter.addedBackground#3A923A
  • editorGutter.background#0C0C0D
  • editorGutter.commentRangeForeground#66606B
  • editorGutter.deletedBackground#D97272
  • editorGutter.modifiedBackground#7BA6D1
  • editorHint.foreground#3A923A
  • editorHoverWidget.background#0C0C0D
  • editorHoverWidget.border#1F191F
  • editorHoverWidget.foreground#E3DDE9
  • editorHoverWidget.highlightForeground#E3DDE9
  • editorHoverWidget.statusBarBackground#0C0C0D
  • editorIndentGuide.activeBackground1#9B5ED4
  • editorIndentGuide.background1#120D0F70
  • editorInfo.foreground#7BA6D1
  • editorLineNumber.activeForeground#9B5ED4
  • editorLineNumber.dimmedForeground#66606B90
  • editorLineNumber.foreground#66606B
  • editorLink.activeForeground#7BA6D1
  • editorMarkerNavigation.background#050505
  • editorMarkerNavigationError.background#050505
  • editorMarkerNavigationWarning.background#050505
  • editorMultiCursor.primary.background#120D0F70
  • editorMultiCursor.primary.foreground#9B5ED4
  • editorMultiCursor.secondary.background#120D0F70
  • editorMultiCursor.secondary.foreground#E3DDE9
  • editorOverviewRuler.addedForeground#3A923A
  • editorOverviewRuler.border#1F191F
  • editorOverviewRuler.commentForeground#66606B
  • editorOverviewRuler.commonContentForeground#E3DDE9
  • editorOverviewRuler.currentContentForeground#7BA6D1
  • editorOverviewRuler.deletedForeground#D97272
  • editorOverviewRuler.errorForeground#D97272
  • editorOverviewRuler.findMatchForeground#E3DDE9
  • editorOverviewRuler.incomingContentForeground#3A923A
  • editorOverviewRuler.infoForeground#7BA6D1
  • editorOverviewRuler.modifiedForeground#7BA6D1
  • editorOverviewRuler.rangeHighlightForeground#120D0F70
  • editorOverviewRuler.selectionHighlightForeground#31213070
  • editorOverviewRuler.warningForeground#D5A677
  • editorOverviewRuler.wordHighlightForeground#120D0F70
  • editorOverviewRuler.wordHighlightStrongForeground#120D0F70
  • editorRuler.foreground#120D0F70
  • editorSuggestWidget.background#0C0C0D
  • editorSuggestWidget.border#1F191F
  • editorSuggestWidget.focusHighlightForeground#E3DDE9
  • editorSuggestWidget.foreground#66606B
  • editorSuggestWidget.highlightForeground#E3DDE9
  • editorSuggestWidget.selectedBackground#A777D580
  • editorSuggestWidget.selectedForeground#E3DDE9
  • editorUnicodeHighlight.background#120D0F70
  • editorWarning.foreground#D5A677
  • editorWhitespace.foreground#120D0F70
  • editorWidget.background#0C0C0D
  • editorWidget.border#1F191F
  • editorWidget.foreground#E3DDE9
  • errorForeground#D97272
  • extensionButton.prominentBackground#A777D5aa
  • extensionButton.prominentForeground#050505
  • extensionButton.prominentHoverBackground#A777D5
  • focusBorder#1F191F
  • foreground#E3DDE9
  • gitDecoration.addedResourceForeground#3A923A
  • gitDecoration.conflictingResourceForeground#D5A677
  • gitDecoration.deletedResourceForeground#D97272
  • gitDecoration.ignoredResourceForeground#66606B
  • gitDecoration.modifiedResourceForeground#7BA6D1
  • gitDecoration.renamedResourceForeground#9B5ED4
  • gitDecoration.untrackedResourceForeground#E1D1D0
  • input.background#0C0C0D
  • input.border#66606B
  • input.foreground#E3DDE9
  • input.placeholderForeground#66606B
  • inputOption.activeBorder#9B5ED4
  • inputValidation.errorBorder#D97272
  • inputValidation.infoBorder#7BA6D1
  • inputValidation.warningBorder#D5A677
  • list.activeSelectionBackground#A777D570
  • list.activeSelectionForeground#E3DDE9
  • list.dropBackground#1C171C
  • list.dropBetweenBackground#1F191F
  • list.errorForeground#D97272
  • list.focusBackground#A777D550
  • list.focusForeground#E3DDE9
  • list.highlightForeground#9B5ED4
  • list.hoverBackground#A777D520
  • list.hoverForeground#E3DDE9
  • list.inactiveFocusBackground#050505
  • list.inactiveSelectionBackground#A777D560
  • list.inactiveSelectionForeground#E1D1D0
  • list.warningForeground#D5A677
  • listFilterWidget.background#1C171C
  • listFilterWidget.noMatchesOutline#D97272
  • listFilterWidget.outline#1F191F
  • merge.border#1F191F
  • merge.currentContentBackground#7BA6D120
  • merge.currentHeaderBackground#7BA6D140
  • merge.incomingContentBackground#3A923A20
  • merge.incomingHeaderBackground#3A923A40
  • mergeEditor.change.background#D5A677
  • notificationLink.foreground#7BA6D1
  • notifications.background#050505
  • notifications.border#1F191F
  • notifications.foreground#E3DDE9
  • notificationsErrorIcon.foreground#D97272
  • notificationsInfoIcon.foreground#7BA6D1
  • notificationsWarningIcon.foreground#D5A677
  • panel.background#050505
  • panel.border#9B5ED4
  • panelInput.border#66606B
  • panelTitle.activeBorder#9B5ED4
  • panelTitle.activeForeground#E3DDE9
  • panelTitle.inactiveForeground#66606B
  • peekView.border#A777D5
  • peekViewEditor.background#0C0C0D
  • peekViewEditor.matchHighlightBackground#26354570
  • peekViewResult.background#0C0C0D
  • peekViewResult.fileForeground#E3DDE9
  • peekViewResult.lineForeground#E3DDE9
  • peekViewResult.matchHighlightBackground#120D0F70
  • peekViewResult.selectionBackground#050505
  • peekViewResult.selectionForeground#E3DDE9
  • peekViewTitle.background#0C0C0D
  • peekViewTitleDescription.foreground#E1D1D0
  • peekViewTitleLabel.foreground#E3DDE9
  • pickerGroup.border#A777D5
  • pickerGroup.foreground#E8B5E7
  • progressBar.background#9B5ED4
  • selection.background#A777D550
  • settings.checkboxBackground#0C0C0D
  • settings.checkboxBorder#1F191F
  • settings.checkboxForeground#E3DDE9
  • settings.dropdownBackground#0C0C0D
  • settings.dropdownBorder#1F191F
  • settings.dropdownForeground#E3DDE9
  • settings.focusedRowBackground#120D0F70
  • settings.focusedRowBorder#66606B
  • settings.headerBorder#1F191F
  • settings.headerForeground#E3DDE9
  • settings.inactiveSelectedItemBorder#66606B
  • settings.modifiedItemIndicator#D5A677
  • settings.numberInputBackground#0C0C0D
  • settings.numberInputBorder#66606B
  • settings.numberInputForeground#E3DDE9
  • settings.rowHoverBackground#120D0F70
  • settings.settingsHeaderHoverForeground#E3DDE9
  • settings.textInputBackground#0C0C0D
  • settings.textInputBorder#66606B
  • settings.textInputForeground#E3DDE9
  • sideBar.background#0C0C0D
  • sideBarActivityBarTop.border#1F191F
  • sideBarSectionHeader.background#050505
  • sideBarSectionHeader.border#1F191F
  • sideBarStickyScroll.background#0C0C0D
  • sideBarStickyScroll.border#1F191F
  • sideBarStickyScroll.shadow#1F191F
  • sideBarTitle.background#0C0C0D
  • sideBarTitle.foreground#E3DDE9
  • statusBar.background#A777D5
  • statusBar.debuggingBackground#D5A677
  • statusBar.debuggingForeground#050505
  • statusBar.foreground#050505
  • statusBar.noFolderBackground#E1D1D0
  • statusBar.noFolderForeground#050505
  • statusBarItem.activeBackground#A777D5aa
  • statusBarItem.errorBackground#D97272
  • statusBarItem.errorForeground#050505
  • statusBarItem.errorHoverBackground#D97272aa
  • statusBarItem.hoverBackground#A777D5aa
  • statusBarItem.prominentBackground#A777D5aa
  • statusBarItem.prominentForeground#050505
  • statusBarItem.prominentHoverBackground#A777D5aa
  • statusBarItem.prominentHoverForeground#050505
  • statusBarItem.remoteBackground#9B5ED4
  • statusBarItem.remoteForeground#E3DDE9
  • statusBarItem.remoteHoverBackground#9B5ED4aa
  • statusBarItem.warningBackground#D5A677
  • statusBarItem.warningForeground#050505
  • statusBarItem.warningHoverBackground#D5A677aa
  • tab.activeBackground#050505
  • tab.activeBorderTop#9B5ED4
  • tab.activeForeground#E3DDE9
  • tab.border#1F191F
  • tab.hoverBackground#05050580
  • tab.hoverForeground#E3DDE9
  • tab.inactiveBackground#0C0C0D
  • tab.inactiveForeground#66606B
  • tab.selectedBackground#120D0F70
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#667ACF
  • terminal.ansiBrightBlack#3D3D3D
  • terminal.ansiBrightBlue#E5E9FB
  • terminal.ansiBrightCyan#E3FFF3
  • terminal.ansiBrightGreen#79F863
  • terminal.ansiBrightMagenta#C75DFF
  • terminal.ansiBrightRed#FD7A97
  • terminal.ansiBrightWhite#FCFCFB
  • terminal.ansiBrightYellow#FDFDE7
  • terminal.ansiCyan#6FE9B5
  • terminal.ansiGreen#349024
  • terminal.ansiMagenta#BA2FFF
  • terminal.ansiRed#DE3D61
  • terminal.ansiWhite#EFEDEB
  • terminal.ansiYellow#DBD879
  • terminal.background#0C0C0D
  • terminal.border#1F191F
  • terminal.foreground#E3DDE9
  • terminal.inactiveSelectionBackground#31213070
  • terminal.selectionBackground#31213070
  • textBlockQuote.background#1C171C
  • textBlockQuote.border#1F191F
  • textCodeBlock.background#1C171C
  • textLink.activeForeground#7BA6D1
  • textLink.foreground#A777D5
  • textPreformat.background#1C171C
  • textPreformat.foreground#E3DDE9
  • textSeparator.foreground#E3DDE9
  • titleBar.activeBackground#050505
  • titleBar.activeForeground#E3DDE9
  • titleBar.inactiveBackground#050505
  • titleBar.inactiveForeground#66606B
  • widget.border#1F191F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#E3DDE9
meta.diff, meta.diff.header#66606B
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#D2B8EA
emphasisitalic
strongbold
invalid#D97272strikethrough
invalid.deprecated#E3DDE9underline italic
header#D2B8EA
source.ini, source.ignore, source#E1D1D0
markup.inserted#D2B8EA
markup.deleted#D97272
markup.changed#7BA6D1
markup.error#D97272
markup.underlineunderline
markup.bold#D5A677bold
markup.heading#9B5ED4bold
markup.italic#E1D1D0italic
markup.inline.raw, markup.raw.restructuredtext#9B5ED4
markup.underline.link, markup.underline.link.image, markup.quote#7BA6D1
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#A777D5
meta.separator.markdown#9B5ED4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#B6E6E7
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D5A677
entity.name.class, entity.name.type.class, entity.other.inherited-class#A777D5
entity.name.tag, entity.other.attribute-name.parent-selector#C9C8EE
entity.other.attribute-name#A777D5
entity.name.function, meta.function-call, meta.method-call, meta.method#9B5ED4
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#BDE4E5
support#9998E1
entity.name, variable.other.key#9B5ED4
entity.name.type#B2E5E6
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#A8CDE1
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#E6BDBC
entity.other.attribute-name.class.css#9B5ED4
storage.class, storage.type#A777D5
storage.modifier#B7E5E6
comment, punctuation.definition.comment, unused.comment, wildcard.comment#66606B
constant#D2B8EA
constant.other.color#C09EE1
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#E7A7C6
constant.other.date, constant.other.timestamp#ECC5EB
keyword.operator#DDBBCB
keyword.other.unit#E6ADE5
keyword.control, keyword.other.template, keyword.other.substitution#E6A8E5
keyword.other.this#D2B8EA
keyword.control.import, keyword.control.from#D5A5C7
keyword.control.new, keyword.operator.new, keyword.other.important.css#A777D5
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#E3A5CF
meta.attribute-selector.scss#C2C2EB
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#C9C8EE
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#BDB4E4
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#A777D5
support.constant.property-value.css, constant.numeric.css#E1D1D0
keyword.control.at-rule.apply.tailwind#D5A5C7
keyword.control.at-rule.tailwind.tailwind#E6A8E5
keyword.control.at-rule.layer.tailwind#E3A5CF
meta.selector#C2C2EB
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#D2D1E0
punctuation.definition.constant.restructuredtext#D2B8EA
string.quoted.docstring.multi#9B5ED4
punctuation.definition.keyword.css, punctuation.section.property-list.begin.bracket.curly.css, punctuation.section.property-list.end.bracket.curly.css, punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#D2D1E0
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#BDB4E4
entity.other.attribute-name punctuation, meta.brace.square, meta.group.toml, meta.group.double.toml, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator#EFEDEB
meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end#F7F6F9
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.definition.variable.makefile#D8D4E3
punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css#E7E6EF
punctuation.definition.directive.restructuredtext#D2B8EA
variable#CFBAE3
variable.other.alias.yaml#CFBAE3underline
variable.language, variable.parameter.function.language.special#E7A7C6
variable.other.constant#E6CBEC
support.variable#CFBAE3
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E8C9E7
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D5A677
support.function, support.type.property-name#E5EFF6
storage#E9D4BE
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#DBD879
punctuation.definition.group.capture.regexp#DE3D61
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#DE3D61
punctuation.definition.character-class.regexp#FDFDE7
punctuation.definition.group.regexp#E5E9FB
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#DE3D61
meta.assertion.look-ahead.regexp#E5E9FB
source.json meta.structure.dictionary.json support.type.property-name.json#9B5ED4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#A777D5
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#7BA6D1
source.json meta.structure.dictionary.json meta.structure.dictionary.value.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#D5A677
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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#D97272
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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#3A923A
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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#9B5ED4
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.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#A777D5
token.info-token#7BA6D1
token.warn-token#D5A677
token.error-token#D97272
token.debug-token#D5A677