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#09110970
  • activityBar.activeBorder#B77B94
  • activityBar.background#10090C
  • activityBar.foreground#F8FBF8
  • activityBar.inactiveForeground#495E63
  • activityBarBadge.background#7AC2D2
  • activityBarBadge.foreground#040C04
  • activityBarTop.foreground#F8FBF8
  • badge.background#7AC2D2
  • badge.foreground#040C04
  • breadcrumb.activeForeground#F8FBF8
  • breadcrumb.activeSelectionForeground#F8FBF8
  • breadcrumb.background#10090C
  • breadcrumb.focusForeground#F8FBF8
  • breadcrumb.foreground#495E63
  • breadcrumbPicker.background#10090C
  • button.background#7AC2D2db
  • button.foreground#040C04
  • button.hoverBackground#7AC2D2
  • button.secondaryBackground#B77B94db
  • button.secondaryForeground#040C04
  • button.secondaryHoverBackground#B77B94
  • checkbox.background#060604
  • checkbox.foreground#F8FBF8
  • debugToolBar.background#74A6D7
  • debugToolBar.foreground#040C04
  • descriptionForeground#CEBBEC
  • diffEditor.diagonalFill#74A6D7
  • diffEditor.insertedLineBackground#74A6D740
  • diffEditor.insertedTextBackground#74A6D750
  • diffEditor.insertedTextBorder#74A6D7
  • diffEditor.removedLineBackground#D2797940
  • diffEditor.removedTextBackground#D2797950
  • diffEditor.removedTextBorder#D27979
  • diffEditorGutter.insertedLineBackground#74A6D7
  • diffEditorGutter.removedLineBackground#D27979
  • disabledForeground#495E63
  • dropdown.background#180C11
  • dropdown.border#231018
  • dropdown.foreground#F8FBF8
  • editor.background#060604
  • editor.findMatchBackground#4E182F70
  • editor.findMatchForeground#F8FBF8
  • editor.findMatchHighlightBackground#09110970
  • editor.findMatchHighlightForeground#F8FBF8
  • editor.findRangeHighlightBackground#39132370
  • editor.foldBackground#09110970
  • editor.foldPlaceholderForeground#F8FBF8
  • editor.foreground#F8FBF8
  • editor.hoverHighlightBackground#09110970
  • editor.inactiveSelectionBackground#39132370
  • editor.lineHighlightBackground#00000010
  • editor.placeholder.foreground#CEBBEC
  • editor.rangeHighlightBackground#09110970
  • editor.selectionBackground#39132370
  • editor.selectionForeground#F8FBF8
  • editor.selectionHighlightBackground#39132370
  • editor.snippetFinalTabstopHighlightBackground#09110970
  • editor.snippetTabstopHighlightBackground#09110970
  • editor.symbolHighlightBackground#09110970
  • editor.wordHighlightBackground#09110970
  • editor.wordHighlightStrongBackground#09110950
  • editor.wordHighlightTextBackground#09110970
  • editorCodeLens.foreground#495E63
  • editorCursor.background#09110970
  • editorCursor.foreground#B77B94
  • editorError.foreground#D27979
  • editorGroup.border#231018
  • editorGroup.dropBackground#180C11
  • editorGroup.emptyBackground#060604
  • editorGroupHeader.border#231018
  • editorGroupHeader.tabsBackground#060604
  • editorGutter.addedBackground#3C9B3C
  • editorGutter.background#060604
  • editorGutter.commentRangeForeground#495E63
  • editorGutter.deletedBackground#D27979
  • editorGutter.modifiedBackground#74A6D7
  • editorHint.foreground#3C9B3C
  • editorHoverWidget.background#060604
  • editorHoverWidget.border#231018
  • editorHoverWidget.foreground#F8FBF8
  • editorHoverWidget.highlightForeground#F8FBF8
  • editorHoverWidget.statusBarBackground#060604
  • editorIndentGuide.activeBackground1#B77B94
  • editorIndentGuide.background1#09110970
  • editorInfo.foreground#74A6D7
  • editorLineNumber.activeForeground#B77B94
  • editorLineNumber.dimmedForeground#495E6390
  • editorLineNumber.foreground#495E63
  • editorLink.activeForeground#74A6D7
  • editorMarkerNavigation.background#10090C
  • editorMarkerNavigationError.background#10090C
  • editorMarkerNavigationWarning.background#10090C
  • editorMultiCursor.primary.background#09110970
  • editorMultiCursor.primary.foreground#B77B94
  • editorMultiCursor.secondary.background#09110970
  • editorMultiCursor.secondary.foreground#F8FBF8
  • editorOverviewRuler.addedForeground#3C9B3C
  • editorOverviewRuler.border#231018
  • editorOverviewRuler.commentForeground#495E63
  • editorOverviewRuler.commonContentForeground#F8FBF8
  • editorOverviewRuler.currentContentForeground#74A6D7
  • editorOverviewRuler.deletedForeground#D27979
  • editorOverviewRuler.errorForeground#D27979
  • editorOverviewRuler.findMatchForeground#F8FBF8
  • editorOverviewRuler.incomingContentForeground#3C9B3C
  • editorOverviewRuler.infoForeground#74A6D7
  • editorOverviewRuler.modifiedForeground#74A6D7
  • editorOverviewRuler.rangeHighlightForeground#09110970
  • editorOverviewRuler.selectionHighlightForeground#39132370
  • editorOverviewRuler.warningForeground#D4A677
  • editorOverviewRuler.wordHighlightForeground#09110970
  • editorOverviewRuler.wordHighlightStrongForeground#09110970
  • editorRuler.foreground#09110970
  • editorSuggestWidget.background#060604
  • editorSuggestWidget.border#231018
  • editorSuggestWidget.focusHighlightForeground#F8FBF8
  • editorSuggestWidget.foreground#495E63
  • editorSuggestWidget.highlightForeground#F8FBF8
  • editorSuggestWidget.selectedBackground#7AC2D280
  • editorSuggestWidget.selectedForeground#F8FBF8
  • editorUnicodeHighlight.background#09110970
  • editorWarning.foreground#D4A677
  • editorWhitespace.foreground#09110970
  • editorWidget.background#060604
  • editorWidget.border#231018
  • editorWidget.foreground#F8FBF8
  • errorForeground#D27979
  • extensionButton.prominentBackground#7AC2D2aa
  • extensionButton.prominentForeground#040C04
  • extensionButton.prominentHoverBackground#7AC2D2
  • focusBorder#231018
  • foreground#F8FBF8
  • gitDecoration.addedResourceForeground#3C9B3C
  • gitDecoration.conflictingResourceForeground#D4A677
  • gitDecoration.deletedResourceForeground#D27979
  • gitDecoration.ignoredResourceForeground#495E63
  • gitDecoration.modifiedResourceForeground#74A6D7
  • gitDecoration.renamedResourceForeground#B77B94
  • gitDecoration.untrackedResourceForeground#CEBBEC
  • input.background#060604
  • input.border#495E63
  • input.foreground#F8FBF8
  • input.placeholderForeground#495E63
  • inputOption.activeBorder#B77B94
  • inputValidation.errorBorder#D27979
  • inputValidation.infoBorder#74A6D7
  • inputValidation.warningBorder#D4A677
  • list.activeSelectionBackground#7AC2D270
  • list.activeSelectionForeground#F8FBF8
  • list.dropBackground#180C11
  • list.dropBetweenBackground#231018
  • list.errorForeground#D27979
  • list.focusBackground#7AC2D250
  • list.focusForeground#F8FBF8
  • list.highlightForeground#B77B94
  • list.hoverBackground#7AC2D220
  • list.hoverForeground#F8FBF8
  • list.inactiveFocusBackground#10090C
  • list.inactiveSelectionBackground#7AC2D260
  • list.inactiveSelectionForeground#CEBBEC
  • list.warningForeground#D4A677
  • listFilterWidget.background#180C11
  • listFilterWidget.noMatchesOutline#D27979
  • listFilterWidget.outline#231018
  • merge.border#231018
  • merge.currentContentBackground#74A6D720
  • merge.currentHeaderBackground#74A6D740
  • merge.incomingContentBackground#3C9B3C20
  • merge.incomingHeaderBackground#3C9B3C40
  • mergeEditor.change.background#D4A677
  • notificationLink.foreground#74A6D7
  • notifications.background#10090C
  • notifications.border#231018
  • notifications.foreground#F8FBF8
  • notificationsErrorIcon.foreground#D27979
  • notificationsInfoIcon.foreground#74A6D7
  • notificationsWarningIcon.foreground#D4A677
  • panel.background#10090C
  • panel.border#B77B94
  • panelInput.border#495E63
  • panelTitle.activeBorder#B77B94
  • panelTitle.activeForeground#F8FBF8
  • panelTitle.inactiveForeground#495E63
  • peekView.border#7AC2D2
  • peekViewEditor.background#060604
  • peekViewEditor.matchHighlightBackground#4E182F70
  • peekViewResult.background#060604
  • peekViewResult.fileForeground#F8FBF8
  • peekViewResult.lineForeground#F8FBF8
  • peekViewResult.matchHighlightBackground#09110970
  • peekViewResult.selectionBackground#10090C
  • peekViewResult.selectionForeground#F8FBF8
  • peekViewTitle.background#060604
  • peekViewTitleDescription.foreground#CEBBEC
  • peekViewTitleLabel.foreground#F8FBF8
  • pickerGroup.border#7AC2D2
  • pickerGroup.foreground#E3DBBF
  • progressBar.background#B77B94
  • selection.background#7AC2D250
  • settings.checkboxBackground#060604
  • settings.checkboxBorder#231018
  • settings.checkboxForeground#F8FBF8
  • settings.dropdownBackground#060604
  • settings.dropdownBorder#231018
  • settings.dropdownForeground#F8FBF8
  • settings.focusedRowBackground#09110970
  • settings.focusedRowBorder#495E63
  • settings.headerBorder#231018
  • settings.headerForeground#F8FBF8
  • settings.inactiveSelectedItemBorder#495E63
  • settings.modifiedItemIndicator#D4A677
  • settings.numberInputBackground#060604
  • settings.numberInputBorder#495E63
  • settings.numberInputForeground#F8FBF8
  • settings.rowHoverBackground#09110970
  • settings.settingsHeaderHoverForeground#F8FBF8
  • settings.textInputBackground#060604
  • settings.textInputBorder#495E63
  • settings.textInputForeground#F8FBF8
  • sideBar.background#060604
  • sideBarActivityBarTop.border#231018
  • sideBarSectionHeader.background#10090C
  • sideBarSectionHeader.border#231018
  • sideBarStickyScroll.background#060604
  • sideBarStickyScroll.border#231018
  • sideBarStickyScroll.shadow#231018
  • sideBarTitle.background#060604
  • sideBarTitle.foreground#F8FBF8
  • statusBar.background#7AC2D2
  • statusBar.debuggingBackground#D4A677
  • statusBar.debuggingForeground#040C04
  • statusBar.foreground#040C04
  • statusBar.noFolderBackground#CEBBEC
  • statusBar.noFolderForeground#040C04
  • statusBarItem.activeBackground#7AC2D2aa
  • statusBarItem.errorBackground#D27979
  • statusBarItem.errorForeground#040C04
  • statusBarItem.errorHoverBackground#D27979aa
  • statusBarItem.hoverBackground#7AC2D2aa
  • statusBarItem.prominentBackground#7AC2D2aa
  • statusBarItem.prominentForeground#040C04
  • statusBarItem.prominentHoverBackground#7AC2D2aa
  • statusBarItem.prominentHoverForeground#040C04
  • statusBarItem.remoteBackground#B77B94
  • statusBarItem.remoteForeground#040C04
  • statusBarItem.remoteHoverBackground#B77B94aa
  • statusBarItem.warningBackground#D4A677
  • statusBarItem.warningForeground#040C04
  • statusBarItem.warningHoverBackground#D4A677aa
  • tab.activeBackground#10090C
  • tab.activeBorderTop#B77B94
  • tab.activeForeground#F8FBF8
  • tab.border#231018
  • tab.hoverBackground#10090C80
  • tab.hoverForeground#F8FBF8
  • tab.inactiveBackground#060604
  • tab.inactiveForeground#495E63
  • tab.selectedBackground#09110970
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#7076E4
  • terminal.ansiBrightBlack#393939
  • terminal.ansiBrightBlue#E6E7FF
  • terminal.ansiBrightCyan#96C8F5
  • terminal.ansiBrightGreen#9DE675
  • terminal.ansiBrightMagenta#B261E7
  • terminal.ansiBrightRed#FD8E69
  • terminal.ansiBrightWhite#FAFAF9
  • terminal.ansiBrightYellow#E7CAA7
  • terminal.ansiCyan#5196D3
  • terminal.ansiGreen#598C3D
  • terminal.ansiMagenta#A55AD8
  • terminal.ansiRed#CD5229
  • terminal.ansiWhite#F7F6F4
  • terminal.ansiYellow#95744C
  • terminal.background#060604
  • terminal.border#231018
  • terminal.foreground#F8FBF8
  • terminal.inactiveSelectionBackground#39132370
  • terminal.selectionBackground#39132370
  • textBlockQuote.background#180C11
  • textBlockQuote.border#231018
  • textCodeBlock.background#180C11
  • textLink.activeForeground#74A6D7
  • textLink.foreground#7AC2D2
  • textPreformat.background#180C11
  • textPreformat.foreground#F8FBF8
  • textSeparator.foreground#F8FBF8
  • titleBar.activeBackground#10090C
  • titleBar.activeForeground#F8FBF8
  • titleBar.inactiveBackground#10090C
  • titleBar.inactiveForeground#495E63
  • widget.border#231018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.tag, string#F8FBF8
meta.diff, meta.diff.header#495E63
meta.link.reference.def.restructuredtext, string.other.link.description, string.other.link.title#E2C0CE
emphasisitalic
strongbold
invalid#D27979strikethrough
invalid.deprecated#F8FBF8underline italic
header#E2C0CE
source.ini, source.ignore, source#CEBBEC
markup.inserted#E2C0CE
markup.deleted#D27979
markup.changed#74A6D7
markup.error#D27979
markup.underlineunderline
markup.bold#D4A677bold
markup.heading#B77B94bold
markup.italic#CEBBECitalic
markup.inline.raw, markup.raw.restructuredtext#B77B94
markup.underline.link, markup.underline.link.image, markup.quote#74A6D7
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7AC2D2
meta.separator.markdown#B77B94
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#CCBAE8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#D4A677
entity.name.class, entity.name.type.class, entity.other.inherited-class#7AC2D2
entity.name.tag, entity.other.attribute-name.parent-selector#E4DEC8
entity.other.attribute-name#7AC2D2
entity.name.function, meta.function-call, meta.method-call, meta.method#B77B94
meta.selector.css, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter, entity.name.variable.parameter#D0ECCF
support#E0D3A4
entity.name, variable.other.key#B77B94
entity.name.type#D2C6E7
entity.name.type.module, entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#CBB1D8
entity.other.attribute-name, entity.other.attribute-name.pseudo-class.css#CFC1E7
entity.other.attribute-name.class.css#B77B94
storage.class, storage.type#7AC2D2
storage.modifier#B9E5B8
comment, punctuation.definition.comment, unused.comment, wildcard.comment#495E63
constant#E2C0CE
constant.other.color#B6DAE2
constant.character.escape, constant.character.string.escape, constant.regexp, constant.language#DE9CB7
constant.other.date, constant.other.timestamp#E1BCCB
keyword.operator#E5B3C8
keyword.other.unit#BDABD8
keyword.control, keyword.other.template, keyword.other.substitution#C0B2D6
keyword.other.this#E2C0CE
keyword.control.import, keyword.control.from#C6ADD6
keyword.control.new, keyword.operator.new, keyword.other.important.css#7AC2D2
keyword.control.flow, keyword.control.loop, keyword.control.conditional, keyword.operator.logical, keyword.operator.relational, keyword.operator.comparison, keyword.operator.ternary#CCADDC
meta.attribute-selector.scss#CFE7ED
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#E4DEC8
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#E4E2BE
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#7AC2D2
support.constant.property-value.css, constant.numeric.css#CEBBEC
keyword.control.at-rule.apply.tailwind#C6ADD6
keyword.control.at-rule.tailwind.tailwind#C0B2D6
keyword.control.at-rule.layer.tailwind#CCADDC
meta.selector#CFE7ED
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F6EEF2
punctuation.definition.constant.restructuredtext#E2C0CE
string.quoted.docstring.multi#B77B94
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#F6EEF2
punctuation, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#E4E2BE
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#F7F6F4
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#F2D9DB
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#FFFFFF
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#F6E5EB
punctuation.definition.directive.restructuredtext#E2C0CE
variable#DDBBC9
variable.other.alias.yaml#DDBBC9underline
variable.language, variable.parameter.function.language.special#DE9CB7
variable.other.constant#DEBFC4
support.variable#DDBBC9
variable.other.property, support.variable.property, variable.object.property, variable.other.object.property#E8D2CF
support.function.magic, variable.other.predefined, storage.modifier.async, keyword.control.trycatch, keyword.control.trycatch.js, keyword.control.trycatch.ts#D4A677
support.function, support.type.property-name#EBDFF2
storage#C2DAE0
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#95744C
punctuation.definition.group.capture.regexp#CD5229
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#CD5229
punctuation.definition.character-class.regexp#E7CAA7
punctuation.definition.group.regexp#E6E7FF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#CD5229
meta.assertion.look-ahead.regexp#E6E7FF
source.json meta.structure.dictionary.json support.type.property-name.json#B77B94
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7AC2D2
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#74A6D7
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#D4A677
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#D27979
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#3C9B3C
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#B77B94
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#7AC2D2
token.info-token#74A6D7
token.warn-token#D4A677
token.error-token#D27979
token.debug-token#D4A677