Skip to main content
CodingTheme

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#171c28
  • activityBar.foreground#5ccfe6
  • activityBar.inactiveForeground#5ccfe660
  • activityBarBadge.background#5ccfe6
  • activityBarBadge.foreground#171c28
  • badge.background#5ccfe6
  • badge.foreground#171c28
  • breadcrumb.activeSelectionForeground#5ccfe6
  • breadcrumb.focusForeground#5ccfe6
  • breadcrumb.foreground#8695b7
  • breadcrumbPicker.background#171c28
  • button.background#ffcc66
  • button.foreground#171c28
  • button.hoverBackground#ffcc6699
  • checkbox.background#171c28
  • debugExceptionWidget.background#171c28
  • debugExceptionWidget.border#2f3b54
  • debugToolBar.background#2f3b54
  • debugToolBar.border#2f3b54
  • descriptionForeground#d7dce2
  • diffEditor.border#2f3b54
  • diffEditor.insertedTextBackground#bae67e22
  • diffEditor.insertedTextBorder#bae67e44
  • diffEditor.removedTextBackground#ef6b7322
  • diffEditor.removedTextBorder#ef6b7344
  • dropdown.background#2f3b54
  • dropdown.border#2f3b54
  • dropdown.foreground#d7dce2
  • dropdown.listBackground#171c28
  • editor.background#171c28
  • editor.findMatchBackground#8695b777
  • editor.findMatchHighlightBackground#8695b777
  • editor.findRangeHighlightBackground#8695b777
  • editor.foreground#a2aabc
  • editor.hoverHighlightBackground#8695b777
  • editor.inactiveSelectionBackground#5ccfe610
  • editor.lineHighlightBackground#08080845
  • editor.rangeHighlightBackground#2f3b54ee
  • editor.selectionBackground#5ccfe615
  • editor.selectionForeground#a2aabc
  • editor.selectionHighlightBackground#2f3b54ee
  • editor.wordHighlightBackground#8695b777
  • editor.wordHighlightStrongBackground#8695b777
  • editorBracketHighlight.foreground1#5ccfe6
  • editorBracketHighlight.foreground2#ffcc66
  • editorBracketHighlight.foreground3#bae67e
  • editorBracketHighlight.foreground4#a2aabc
  • editorBracketHighlight.foreground5#c3a6ff
  • editorBracketHighlight.foreground6#ef6b73
  • editorBracketMatch.background#8695b755
  • editorBracketMatch.border#ffcc66
  • editorCodeLens.foreground#d7dce2
  • editorCursor.background#171c28
  • editorCursor.foreground#5ccfe6
  • editorError.foreground#ef6b73
  • editorGroup.border#2f3b54
  • editorGroup.dropBackground#5ccfe620
  • editorGroup.emptyBackground#171c28
  • editorGroup.focusedEmptyBorder#171c28
  • editorGroupHeader.noTabsBackground#171c28
  • editorGroupHeader.tabsBackground#171c28
  • editorGroupHeader.tabsBorder#171c28
  • editorGutter.addedBackground#bae67e
  • editorGutter.deletedBackground#ef6b73
  • editorGutter.modifiedBackground#5ccfe6
  • editorHint.foreground#ffcc66
  • editorHoverWidget.background#171c28
  • editorHoverWidget.border#2f3b54
  • editorIndentGuide.activeBackground1#2f3b5485
  • editorIndentGuide.activeBackground2#2f3b5485
  • editorIndentGuide.activeBackground3#2f3b5485
  • editorIndentGuide.activeBackground4#2f3b5485
  • editorIndentGuide.activeBackground5#2f3b5485
  • editorIndentGuide.activeBackground6#2f3b5485
  • editorIndentGuide.background1#2f3b5460
  • editorIndentGuide.background2#2f3b5460
  • editorIndentGuide.background3#2f3b5460
  • editorIndentGuide.background4#2f3b5460
  • editorIndentGuide.background5#2f3b5460
  • editorIndentGuide.background6#2f3b5460
  • editorInfo.foreground#5ccfe6
  • editorInlayHint.background#171c28
  • editorInlayHint.foreground#8695b799
  • editorLineNumber.activeForeground#5ccfe6
  • editorLineNumber.foreground#8695b780
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#171c28
  • editorMarkerNavigationError.background#ef6b73
  • editorMarkerNavigationInfo.background#5ccfe6
  • editorMarkerNavigationWarning.background#ffcc66
  • editorOverviewRuler.addedForeground#bae67e
  • editorOverviewRuler.border#2f3b5400
  • editorOverviewRuler.bracketMatchForeground#ffcc66
  • editorOverviewRuler.commonContentForeground#2f3b54
  • editorOverviewRuler.currentContentForeground#5ccfe6
  • editorOverviewRuler.deletedForeground#ef6b73
  • editorOverviewRuler.errorForeground#ef6b73
  • editorOverviewRuler.findMatchForeground#ffcc66ee
  • editorOverviewRuler.incomingContentForeground#bae67e
  • editorOverviewRuler.infoForeground#5ccfe6
  • editorOverviewRuler.modifiedForeground#5ccfe6
  • editorOverviewRuler.rangeHighlightForeground#8695b7ee
  • editorOverviewRuler.selectionHighlightForeground#8695b7ee
  • editorOverviewRuler.warningForeground#ffd580
  • editorOverviewRuler.wordHighlightForeground#8695b7ee
  • editorOverviewRuler.wordHighlightStrongForeground#8695b7ee
  • editorPane.background#171c28
  • editorRuler.foreground#2f3b54
  • editorStickyScroll.shadow#ff000000
  • editorSuggestWidget.background#171c28
  • editorSuggestWidget.border#2f3b54
  • editorSuggestWidget.foreground#d7dce2
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#171c28
  • editorWarning.foreground#ffd580
  • editorWhitespace.foreground#8695b777
  • editorWidget.background#171c28
  • editorWidget.border#2f3b54
  • errorForeground#ef6b73
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#171c28
  • extensionButton.prominentHoverBackground#ffcc6699
  • focusBorder#5ccfe660
  • foreground#8695b7
  • gitDecoration.conflictingResourceForeground#ef6b73
  • gitDecoration.deletedResourceForeground#ef6b73
  • gitDecoration.ignoredResourceForeground#8695b777
  • gitDecoration.modifiedResourceForeground#5ccfe6
  • gitDecoration.untrackedResourceForeground#bae67e
  • icon.foreground#5ccfe6
  • input.background#171c28
  • input.border#2f3b54
  • input.foreground#d7dce2
  • input.placeholderForeground#8695b777
  • inputOption.activeBorder#2f3b54
  • inputValidation.errorBackground#171c28
  • inputValidation.errorBorder#ef6b73
  • inputValidation.errorForeground#ef6b73
  • inputValidation.infoBackground#171c28
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.infoForeground#5ccfe6
  • inputValidation.warningBackground#171c28
  • inputValidation.warningBorder#ffd580
  • inputValidation.warningForeground#ffd580
  • list.activeSelectionBackground#2f3b54aa
  • list.activeSelectionForeground#5ccfe6
  • list.dropBackground#5ccfe620
  • list.errorForeground#ef6b73
  • list.focusBackground#2f3b54
  • list.focusForeground#5ccfe6
  • list.highlightForeground#ffcc66
  • list.hoverBackground#2f3b54
  • list.hoverForeground#d7dce2
  • list.inactiveFocusBackground#2f3b54
  • list.inactiveSelectionBackground#2f3b5490
  • list.inactiveSelectionForeground#5ccfe6
  • list.inactiveSelectionIconForeground#5ccfe6
  • list.invalidItemForeground#ef6b73
  • list.warningForeground#ffd580
  • listFilterWidget.background#2f3b54
  • listFilterWidget.noMatchesOutline#ef6b73
  • listFilterWidget.outline#2f3b54
  • menu.background#171c28
  • menu.border#2f3b54
  • menu.foreground#8695b7
  • menu.selectionBackground#2f3b54
  • menu.selectionForeground#5ccfe6
  • menu.separatorBackground#2f3b54
  • menubar.selectionBackground#2f3b54
  • menubar.selectionForeground#d7dce2
  • merge.border#2f3b54
  • merge.commonContentBackground#2f3b5455
  • merge.commonHeaderBackground#2f3b5477
  • merge.currentContentBackground#5ccfe622
  • merge.currentHeaderBackground#5ccfe677
  • merge.incomingContentBackground#bae67e22
  • merge.incomingHeaderBackground#bae67e77
  • notificationCenter.border#2f3b54
  • notificationCenterHeader.background#171c28
  • notificationCenterHeader.foreground#d7dce2
  • notificationLink.foreground#d7dce2
  • notifications.background#171c28
  • notifications.border#2f3b54
  • notifications.foreground#d7dce2
  • notificationToast.border#2f3b54
  • panel.background#171c28
  • panel.border#2f3b54
  • panel.dropBorder#2f3b54
  • panelInput.border#8695b7
  • panelSection.border#2f3b54
  • panelSection.dropBackground#5ccfe620
  • panelSectionHeader.background#171c28
  • panelSectionHeader.foreground#ffcc66
  • panelTitle.activeBorder#5ccfe6
  • panelTitle.activeForeground#5ccfe6
  • panelTitle.inactiveForeground#8695b7
  • peekView.border#2f3b54
  • peekViewEditor.background#171c28
  • peekViewEditor.matchHighlightBackground#8695b740
  • peekViewEditorGutter.background#171c28
  • peekViewResult.background#171c28
  • peekViewResult.fileForeground#8695b7
  • peekViewResult.lineForeground#d7dce2
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewResult.selectionBackground#5ccfe620
  • peekViewResult.selectionForeground#d7dce2
  • peekViewTitle.background#171c28
  • peekViewTitleDescription.foreground#8695b7
  • peekViewTitleLabel.foreground#5ccfe6
  • pickerGroup.border#2f3b54
  • pickerGroup.foreground#ffcc66
  • progressBar.background#ffcc66
  • scrollbar.shadow#00030F00
  • scrollbarSlider.activeBackground#8695b777
  • scrollbarSlider.background#8695b755
  • scrollbarSlider.hoverBackground#8695b799
  • selection.background#8695b777
  • settings.checkboxBackground#171c28
  • settings.checkboxBorder#2f3b54
  • settings.checkboxForeground#d7dce2
  • settings.dropdownBackground#171c28
  • settings.dropdownBorder#2f3b54
  • settings.dropdownForeground#d7dce2
  • settings.dropdownListBorder#2f3b54
  • settings.headerForeground#5ccfe6
  • settings.modifiedItemIndicator#5ccfe6
  • settings.numberInputBackground#171c28
  • settings.numberInputBorder#2f3b54
  • settings.numberInputForeground#d7dce2
  • settings.textInputBackground#171c28
  • settings.textInputBorder#2f3b54
  • settings.textInputForeground#d7dce2
  • sideBar.background#171c28
  • sideBar.dropBackground#5ccfe620
  • sideBar.foreground#8695b7
  • sideBarSectionHeader.background#171c28
  • sideBarSectionHeader.border#171c28
  • sideBarSectionHeader.foreground#5ccfe6
  • sideBarTitle.foreground#5ccfe6
  • statusBar.background#171c28
  • statusBar.debuggingBackground#ffcc66
  • statusBar.debuggingForeground#171c28
  • statusBar.foreground#8695b7
  • statusBar.noFolderBackground#171c28
  • statusBar.noFolderForeground#8695b7
  • statusBarItem.activeBackground#2f3b54
  • statusBarItem.compactHoverBackground#171c28
  • statusBarItem.hoverBackground#171c28aa
  • statusBarItem.hoverForeground#5ccfe6
  • statusBarItem.remoteBackground#171c28
  • statusBarItem.remoteForeground#5ccfe6
  • statusBarItem.remoteHoverBackground#171c28
  • statusBarItem.remoteHoverForeground#ffcc66
  • tab.activeBackground#171c28
  • tab.activeBorder#5ccfe6cc
  • tab.activeForeground#5ccfe6cc
  • tab.border#171c28
  • tab.inactiveBackground#171c28
  • tab.inactiveForeground#8695b7
  • tab.unfocusedHoverBackground#171c28
  • terminal.ansiBlack#2f3b54
  • terminal.ansiBlue#5ccfe6
  • terminal.ansiBrightBlack#444a5e
  • terminal.ansiBrightBlue#5ccfe6
  • terminal.ansiBrightCyan#5ccfe6
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#c3a6ff
  • terminal.ansiBrightRed#ef6b73
  • terminal.ansiBrightWhite#a2aabc
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#5ccfe6
  • terminal.ansiGreen#bae67e
  • terminal.ansiMagenta#c3a6ff
  • terminal.ansiRed#ef6b73
  • terminal.ansiWhite#a2aabc
  • terminal.ansiYellow#ffcc66
  • terminal.background#171c28
  • terminal.border#2f3b54
  • terminal.dropBackground#5ccfe620
  • terminal.foreground#a2aabc
  • terminal.selectionBackground#8695b733
  • terminal.tab.activeBorder#5ccfe6
  • terminalCommandDecoration.defaultBackground#5ccfe6
  • terminalCommandDecoration.errorBackground#ef6b73
  • terminalCommandDecoration.successBackground#bae67e
  • terminalCursor.background#171c28
  • terminalCursor.foreground#5ccfe6
  • textBlockQuote.background#13161F
  • textBlockQuote.border#5ccfe6
  • textCodeBlock.background#13161F
  • textLink.activeForeground#5ccfe6
  • textLink.foreground#ffcc66
  • textPreformat.background#13161F
  • textPreformat.foreground#5ccfe6
  • textSeparator.foreground#5ccfe6AA
  • titleBar.activeBackground#171c28
  • titleBar.activeForeground#8695b7
  • titleBar.border#171c28
  • titleBar.inactiveBackground#171c28
  • tree.indentGuidesStroke#5ccfe660
  • walkThrough.embeddedEditorBackground#171c28
  • welcomePage.progress.background#d7dce240
  • welcomePage.tileBackground#d7dce210
  • widget.border#2f3b54
  • widget.shadow#00030F00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a2aabc
comment, punctuation.definition.comment#8695b799
variable, string constant.other.placeholder, source#a2aabc
constant.other.color, punctuation.definition.entity, constant.character.entity, punctuation.definition.template-expression, punctuation.section.tag.twig#c3a6ff
invalid, invalid.illegal#ef6b73
keyword, storage.type, storage.modifier, constant.numeric, constant.language, support.constant, constant.character, constant.escape#c3a6ff
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html#c3a6ff
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.block, meta.jsx, meta.embedded.expression, meta.template.expression, meta.tag.block.any.html, punctuation.definition.string, punctuation.accessor, string.unquoted.tag-string.nunjucks, text.html.nunjucks#BFD5DE60
punctuation.separator.key-value.html, keyword.control, keyword.operator, constant.other.color, punctuation.definition.constant, meta.function.block.start.handlebars, meta.function.inline.other, meta.property-value, support.constant.mathematical-symbols, support.constant.vendored.property-value, punctuation.definition.keyword, punctuation.separator.property, string.unquoted.filter-pipe#ffae57
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, support.variable.dom, meta.import, meta.export, meta.export.default, support.class.builtin, support.class.component, variable.other.object#5ccfe6
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter#ffd580
meta.block variable.other#a2aabc
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#a2aabc
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#bae67e
entity.name, support.type, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.object-literal.key#ffd580
support.type, support.class, keyword.other.debugger, entity.other.inherited-class, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#5ccfe6
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, support.type.property-name, support.variable.object.node, support.variable.object.process#5ccfe6
entity.name.module.js, variable.import.parameter.js#ef6b73
variable.language#5ccfe6
entity.name.method.js#5ccfe6
meta.class-method.js entity.name.function.js, variable.function.constructor#5ccfe6
entity.other.attribute-name#ffae57
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#ffae57
entity.other.attribute-name.class, punctuation.definition.entity.css#ffae57
source.sass keyword.control#5ccfe6
markup.inserted#bae67e
markup.deleted#ef6b73
markup.changed#c3a6ff
string.regexp#ffae57
constant.character.escape#5ccfe6
*url*, *link*, *uri*underline
meta.decorator, tag.decorator.js entity.name.tag, tag.decorator.js punctuation.definition.tag#5ccfe6
source.js constant.other.object.key.js string.unquoted.label.js#ef6b73
source.json meta.structure.dictionary.json support.type.property-name.json#5ccfe6
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#5ccfe6
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#ffae57
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#5ccfe6
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#ffae57
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#5ccfe6
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#ffae57
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#5ccfe6
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 meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffae57
markup.italic#ef6b73italic
markup.bold#ef6b73bold
markup.strikethroughstrikethrough
markup.underline#c3a6ffunderline
markup.strike#ffcc66
markup.quote#5ccfe6
markup.raw.block#ffae57
markup.table#5ccfe6
text.html.markdown, punctuation.definition.list_item.markdown#a2aabc
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#5ccfe6
text.html.markdown meta.dummy.line-break#a2aabc
markdown.heading, markup.heading, markup.heading entity.name, markup.heading.markdown, punctuation.definition.heading.markdown#bae67e
markup.quote, punctuation.definition.blockquote.markdown#5ccfe6
string.other.link.title.markdown#ffcc66
markup.raw.block.fenced.markdown#d7dce2
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#a2aabc
variable.language.fenced.markdown#a2aabc
meta.separator#a2aabc
token.info-token#5ccfe6
token.warn-token#ffcc66
token.error-token#ef6b73
token.debug-token#c3a6ff
storage.type.error.go#5ccfe6
punctuation.other.period.go#ffae57

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...