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.border#171c28
  • activityBar.dropBorder#2f3b54
  • activityBar.foreground#8695b7
  • activityBar.inactiveForeground#8695b799
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#171c28
  • badge.background#ffcc66
  • badge.foreground#1d2433
  • breadcrumb.activeSelectionForeground#d7dce2
  • breadcrumb.background#1d2433
  • breadcrumb.focusForeground#d7dce2
  • breadcrumb.foreground#8695b7
  • breadcrumbPicker.background#171c28
  • button.background#ffcc66
  • button.foreground#171c28
  • button.hoverBackground#ffcc6699
  • debugExceptionWidget.background#2f3b54
  • 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#1d2433
  • editor.findMatchBackground#8695b777
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#8695b777
  • editor.findRangeHighlightBackground#8695b777
  • editor.foreground#a2aabc
  • editor.hoverHighlightBackground#8695b777
  • editor.inactiveSelectionBackground#8695b777
  • editor.lineHighlightBackground#2f3b54
  • editor.lineHighlightBorder#2f3b54
  • editor.rangeHighlightBackground#2f3b54
  • editor.selectionBackground#2f3b54
  • editor.selectionForeground#a2aabc
  • editor.selectionHighlightBackground#2f3b54
  • editor.wordHighlightBackground#8695b777
  • editor.wordHighlightStrongBackground#8695b777
  • editorBracketMatch.background#8695b755
  • editorBracketMatch.border#ffcc66
  • editorCodeLens.foreground#d7dce2
  • editorCursor.background#1d2433
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ef6b73
  • editorGroup.border#2f3b54
  • editorGroup.dropBackground#2f3b54
  • editorGroup.emptyBackground#1d2433
  • editorGroup.focusedEmptyBorder#1d2433
  • editorGroupHeader.noTabsBackground#1d2433
  • editorGroupHeader.tabsBackground#171c28
  • editorGroupHeader.tabsBorder#171c28
  • editorGutter.addedBackground#bae67e
  • editorGutter.background#1d2433
  • editorGutter.deletedBackground#ef6b73
  • editorGutter.modifiedBackground#5ccfe6
  • editorHint.foreground#ffcc66
  • editorHoverWidget.background#2f3b54
  • editorHoverWidget.border#2f3b54
  • editorIndentGuide.activeBackground1#8695b777
  • editorIndentGuide.background1#8695b733
  • editorInfo.foreground#5ccfe6
  • editorInlayHint.background#171c28
  • editorInlayHint.foreground#8695b799
  • editorLineNumber.activeForeground#8695b7
  • editorLineNumber.foreground#8695b755
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#2f3b54
  • editorMarkerNavigationError.background#ef6b73
  • editorMarkerNavigationInfo.background#5ccfe6
  • editorMarkerNavigationWarning.background#ffcc66
  • editorOverviewRuler.addedForeground#bae67e
  • editorOverviewRuler.border#2f3b54
  • editorOverviewRuler.bracketMatchForeground#ffcc66
  • editorOverviewRuler.commonContentForeground#2f3b54
  • editorOverviewRuler.currentContentForeground#5ccfe6
  • editorOverviewRuler.deletedForeground#ef6b73
  • editorOverviewRuler.errorForeground#ef6b73
  • editorOverviewRuler.findMatchForeground#ffcc66
  • editorOverviewRuler.incomingContentForeground#bae67e
  • editorOverviewRuler.infoForeground#5ccfe6
  • editorOverviewRuler.modifiedForeground#5ccfe6
  • editorOverviewRuler.rangeHighlightForeground#8695b7
  • editorOverviewRuler.selectionHighlightForeground#8695b7
  • editorOverviewRuler.warningForeground#ffd580
  • editorOverviewRuler.wordHighlightForeground#8695b7
  • editorOverviewRuler.wordHighlightStrongForeground#8695b7
  • editorPane.background#1d2433
  • editorRuler.foreground#2f3b54
  • editorSuggestWidget.background#2f3b54
  • editorSuggestWidget.border#2f3b54
  • editorSuggestWidget.foreground#d7dce2
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#1d2433
  • editorWarning.foreground#ffd580
  • editorWhitespace.foreground#8695b777
  • editorWidget.background#171c28
  • editorWidget.border#171c28
  • errorForeground#ef6b73
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#1d2433
  • extensionButton.prominentHoverBackground#ffcc6699
  • focusBorder#8695b777
  • foreground#8695b7
  • gitDecoration.conflictingResourceForeground#ef6b73
  • gitDecoration.deletedResourceForeground#ef6b73
  • gitDecoration.ignoredResourceForeground#8695b777
  • gitDecoration.modifiedResourceForeground#5ccfe6
  • gitDecoration.untrackedResourceForeground#bae67e
  • input.background#1d2433
  • input.border#2f3b54
  • input.foreground#d7dce2
  • input.placeholderForeground#8695b777
  • inputOption.activeBorder#2f3b54
  • inputValidation.errorBackground#1d2433
  • inputValidation.errorBorder#ef6b73
  • inputValidation.errorForeground#ef6b73
  • inputValidation.infoBackground#1d2433
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.infoForeground#5ccfe6
  • inputValidation.warningBackground#1d2433
  • inputValidation.warningBorder#ffd580
  • inputValidation.warningForeground#ffd580
  • list.activeSelectionBackground#2f3b54
  • list.activeSelectionForeground#d7dce2
  • list.dropBackground#2f3b54
  • list.errorForeground#ef6b73
  • list.focusBackground#2f3b54
  • list.focusForeground#d7dce2
  • list.highlightForeground#ffcc66
  • list.hoverBackground#2f3b54
  • list.hoverForeground#d7dce2
  • list.inactiveFocusBackground#2f3b54
  • list.inactiveSelectionBackground#2f3b54
  • list.inactiveSelectionForeground#d7dce2
  • list.invalidItemForeground#ef6b73
  • list.warningForeground#ffd580
  • listFilterWidget.background#2f3b54
  • listFilterWidget.noMatchesOutline#ef6b73
  • listFilterWidget.outline#2f3b54
  • menu.background#171c28
  • menu.foreground#8695b7
  • menu.selectionBackground#2f3b54
  • menu.selectionForeground#d7dce2
  • menubar.selectionBackground#2f3b54
  • menubar.selectionForeground#d7dce2
  • merge.border#8695b7
  • merge.commonContentBackground#2f3b5455
  • merge.commonHeaderBackground#2f3b5477
  • merge.currentContentBackground#5ccfe622
  • merge.currentHeaderBackground#5ccfe677
  • merge.incomingContentBackground#bae67e22
  • merge.incomingHeaderBackground#bae67e77
  • notificationCenter.border#171c28
  • notificationCenterHeader.background#171c28
  • notificationCenterHeader.foreground#d7dce2
  • notificationLink.foreground#d7dce2
  • notifications.background#171c28
  • notifications.border#171c28
  • notifications.foreground#d7dce2
  • notificationToast.border#171c28
  • panel.background#171c28
  • panel.border#1d2433
  • panel.dropBorder#2f3b54
  • panelInput.border#8695b7
  • panelSection.border#2f3b54
  • panelSection.dropBackground#2f3b54
  • panelSectionHeader.background#1d2433
  • panelSectionHeader.foreground#ffcc66
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#d7dce2
  • panelTitle.inactiveForeground#8695b7
  • peekView.border#ffcc66
  • peekViewEditor.background#2f3b54
  • peekViewEditor.matchHighlightBackground#8695b7
  • peekViewEditor.matchHighlightBorder#ffcc66
  • peekViewEditorGutter.background#1d2433
  • peekViewResult.background#2f3b54
  • peekViewResult.fileForeground#8695b7
  • peekViewResult.lineForeground#d7dce2
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewResult.selectionBackground#2f3b54
  • peekViewResult.selectionForeground#d7dce2
  • peekViewTitle.background#2f3b54
  • peekViewTitleDescription.foreground#8695b7
  • peekViewTitleLabel.foreground#8695b7
  • pickerGroup.border#2f3b54
  • pickerGroup.foreground#ffcc66
  • progressBar.background#ffcc66
  • scrollbar.shadow#00030F
  • scrollbarSlider.activeBackground#8695b777
  • scrollbarSlider.background#8695b755
  • scrollbarSlider.hoverBackground#8695b799
  • selection.background#8695b777
  • settings.checkboxBackground#2f3b54
  • settings.checkboxBorder#2f3b54
  • settings.checkboxForeground#d7dce2
  • settings.dropdownBackground#2f3b54
  • settings.dropdownBorder#2f3b54
  • settings.dropdownForeground#d7dce2
  • settings.dropdownListBorder#2f3b54
  • settings.headerForeground#d7dce2
  • settings.modifiedItemIndicator#5ccfe6
  • settings.numberInputBackground#2f3b54
  • settings.numberInputBorder#2f3b54
  • settings.numberInputForeground#d7dce2
  • settings.textInputBackground#2f3b54
  • settings.textInputBorder#2f3b54
  • settings.textInputForeground#d7dce2
  • sideBar.background#171c28
  • sideBar.foreground#8695b7
  • sideBarSectionHeader.background#1d2433
  • sideBarSectionHeader.border#171c28
  • sideBarSectionHeader.foreground#ffcc66
  • sideBarTitle.foreground#ffcc66
  • statusBar.background#171c28
  • statusBar.border#171c28
  • statusBar.debuggingBackground#171c28
  • statusBar.debuggingForeground#8695b7
  • statusBar.foreground#8695b7
  • statusBar.noFolderBackground#171c28
  • statusBar.noFolderForeground#8695b7
  • statusBarItem.activeBackground#2f3b54
  • statusBarItem.hoverBackground#1d2433
  • statusBarItem.remoteBackground#171c28
  • statusBarItem.remoteForeground#8695b7
  • tab.activeBackground#1d2433
  • tab.activeBorder#ffcc66
  • tab.activeBorderTop#171c28
  • tab.activeForeground#d7dce2
  • tab.border#171c28
  • tab.hoverBackground#2f3b54
  • tab.hoverBorder#ffcc66
  • tab.inactiveBackground#171c28
  • tab.inactiveForeground#d7dce277
  • tab.unfocusedActiveBackground#1d2433
  • tab.unfocusedActiveBorder#ffcc6677
  • tab.unfocusedActiveBorderTop#1d2433
  • tab.unfocusedActiveForeground#d7dce2
  • tab.unfocusedHoverBackground#1d2433
  • tab.unfocusedHoverBorder#ffcc6677
  • tab.unfocusedInactiveForeground#d7dce277
  • 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#0f141f
  • terminal.foreground#fdfdfd
  • terminal.selectionBackground#8695b733
  • terminalCursor.background#ffcc66
  • terminalCursor.foreground#ffcc66
  • terminalOverviewRuler.border#171c28
  • textBlockQuote.background#2f3b54
  • textBlockQuote.border#2f3b54
  • textCodeBlock.background#171c28
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#d7dce2
  • textSeparator.foreground#d7dce2
  • titleBar.activeBackground#171c28
  • titleBar.activeForeground#d7dce2
  • titleBar.border#171c28
  • titleBar.inactiveBackground#171c28
  • titleBar.inactiveForeground#8695b7
  • tree.indentGuidesStroke#2f3b54
  • walkThrough.embeddedEditorBackground#171c28
  • welcomePage.background#2f3b54
  • welcomePage.progress.foreground#2f3b5499
  • widget.shadow#00030F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#a2aabc
comment, punctuation.definition.comment#8695b799italic
variable, string constant.other.placeholder, source#e96c72
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
punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, meta.brace, meta.template.expression, meta.tag.block.any.html, string.unquoted.tag-string.nunjucks, text.html.nunjucks, meta.embedded.block.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.tag.metadata.script.end.html, source.js-ignored-vscode, meta.tag.metadata.style.end.html, meta.embedded.block.html, meta.tag.metadata.style.end.html, source.css-ignored-vscode, meta.tag.metadata.style.end.html#dae1f3d8
punctuation#ffffff
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.accessor, 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, entity.name.type.ts, meta.export.default, support.class.builtin, support.class.component, variable.other.object, entity.name.type.namespace.php, support.other.namespace.php, meta.shebang.shell, punctuation.definition.comment.shebang.shell#5ccfe6
entity.name.function, variable.function, support.function, keyword.other.special-method, meta.function-call, keyword.control.filter, variable.other.object.property#ffd580
meta.block variable.other#e96c72
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, punctuation, entity.name.variable.parameter.cs#ffffff
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, punctuation.definition.string, entity.name.section.markdown, meta.attribute-selector, entity.name.import.go, storage.type.attr.nunjucks#bae67e
entity.name, support.type, support.other.namespace.use.php, meta.use.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, entity.name.type.cs#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#5ccfe6italic
entity.name.method.js#5ccfe6italic
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#ef6b73italic
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.underline#c3a6ffunderline
markup.strike#ffcc66italic
markup.quote#5ccfe6italic
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#5ccfe6italic
string.other.link.title.markdown#ffcc66underline
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
storage.type.class.jsdoc, variable.other.jsdoc, entity.name.tag.localname.cs#3c8c9aa8
entity.name.type.instance.jsdoc#ebd06268
text.aspnetcorerazor#f8fbfcfa
punctuation.curlybrace.open.cs, punctuation.curlybrace.close.cs, keyword.control.razor.directive, keyword.control#c3a6ff
meta.expression.implicit.cshtml, meta.expression.explicit.cshtml#e06868ed

Shiki preview

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

Loading...