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#171c28
  • activityBar.border#171c28
  • activityBar.dropBorder#2f3b54
  • activityBar.foreground#8695b7
  • activityBar.inactiveForeground#8695b799
  • activityBarBadge.background#ffcc66
  • activityBarBadge.foreground#171c28
  • badge.background#ffcc66
  • badge.foreground#252a37
  • breadcrumb.activeSelectionForeground#d7dce2
  • breadcrumb.background#252a37
  • 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#252a37
  • 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#252a37
  • editorCursor.foreground#ffcc66
  • editorError.foreground#ef6b73
  • editorGroup.border#2f3b54
  • editorGroup.dropBackground#2f3b54
  • editorGroup.emptyBackground#252a37
  • editorGroup.focusedEmptyBorder#252a37
  • editorGroupHeader.noTabsBackground#252a37
  • editorGroupHeader.tabsBackground#171c28
  • editorGroupHeader.tabsBorder#171c28
  • editorGutter.addedBackground#bae67e
  • editorGutter.background#252a37
  • editorGutter.deletedBackground#ef6b73
  • editorGutter.modifiedBackground#5ccfe6
  • editorHint.foreground#ffcc66
  • editorHoverWidget.background#2f3b54
  • editorHoverWidget.border#2f3b54
  • editorIndentGuide.activeBackground#8695b777
  • editorIndentGuide.background#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#252a37
  • editorRuler.foreground#2f3b54
  • editorSuggestWidget.background#2f3b54
  • editorSuggestWidget.border#2f3b54
  • editorSuggestWidget.foreground#d7dce2
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#252a37
  • editorWarning.foreground#ffd580
  • editorWhitespace.foreground#8695b777
  • editorWidget.background#171c28
  • editorWidget.border#171c28
  • errorForeground#ef6b73
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#252a37
  • extensionButton.prominentHoverBackground#ffcc6699
  • focusBorder#8695b777
  • foreground#8695b7
  • gitDecoration.conflictingResourceForeground#ef6b73
  • gitDecoration.deletedResourceForeground#ef6b73
  • gitDecoration.ignoredResourceForeground#8695b777
  • gitDecoration.modifiedResourceForeground#5ccfe6
  • gitDecoration.untrackedResourceForeground#bae67e
  • input.background#252a37
  • input.border#2f3b54
  • input.foreground#d7dce2
  • input.placeholderForeground#8695b777
  • inputOption.activeBorder#2f3b54
  • inputValidation.errorBackground#252a37
  • inputValidation.errorBorder#ef6b73
  • inputValidation.errorForeground#ef6b73
  • inputValidation.infoBackground#252a37
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.infoForeground#5ccfe6
  • inputValidation.warningBackground#252a37
  • 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#252a37
  • panel.dropBorder#2f3b54
  • panelInput.border#8695b7
  • panelSection.border#2f3b54
  • panelSection.dropBackground#2f3b54
  • panelSectionHeader.background#252a37
  • 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#252a37
  • 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#252a37
  • 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#252a37
  • statusBarItem.remoteBackground#171c28
  • statusBarItem.remoteForeground#8695b7
  • tab.activeBackground#252a37
  • 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#252a37
  • tab.unfocusedActiveBorder#ffcc6677
  • tab.unfocusedActiveBorderTop#252a37
  • tab.unfocusedActiveForeground#d7dce2
  • tab.unfocusedHoverBackground#252a37
  • 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#171c28
  • terminal.foreground#a2aabc
  • terminal.selectionBackground#8695b733
  • terminalCursor.background#ffcc66
  • terminalCursor.foreground#ffcc66
  • 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.buttonBackground#2f3b54
  • welcomePage.buttonHoverBackground#2f3b5499
  • widget.shadow#00030F

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#FF9C00
string#A5D900
constant.numeric#FFCC00
entity.name.function#D19E2A
entity.name.class#51AFEF
comment#7F7F7F
keyword.operator#D0D0D0
meta.decorator#E06C75
#a2aabc
comment, punctuation.definition.comment#8695b799italic
variable.parameter#89DDFF
variable.other.member, variable.other.php#BEC5D4
punctuation.definition.parameters, punctuation.section.parens#FF79C6
punctuation.section.block#50FA7B
punctuation.section.array#8BE9FD
variable, string constant.other.placeholder#89DDFF
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#C792EA
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, string.unquoted.tag-string.nunjucks, text.html.nunjucks#a2aabc
punctuation.section.embedded#D3423E
punctuation.separator.key-value.html, 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#89DDFF
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#82AAFF
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#ff5572
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#C3E88D
punctuation.definition.string, punctuation.definition.quote#D9F5DD
punctuation.separator.key-value, punctuation.separator, punctuation.terminator, punctuation.separator.statement#BFC7D5
source#FFCB8B
meta.namespace, meta.use.php#BFC7D5
support.class, keyword.other.debugger, meta.property-name, punctuation.definition.raw.markdown, variable.graphql, variable.other.readwrite#FFCB8B
entity.other.inherited-class#A9C77D
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#FF5572italic
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