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#000000
  • activityBar.border#000000
  • activityBar.dropBorder#7A5AF8
  • activityBar.foreground#7A5AF8
  • activityBar.inactiveForeground#9AA3AD
  • activityBarBadge.background#7A5AF8
  • activityBarBadge.foreground#D6DAE0
  • badge.background#ffcc66
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#D6DAE0
  • breadcrumb.background#000000
  • breadcrumb.focusForeground#D6DAE0
  • breadcrumb.foreground#9AA3AD
  • breadcrumbPicker.background#000000
  • button.background#ffcc66
  • button.foreground#000000
  • button.hoverBackground#ffcc6699
  • debugExceptionWidget.background#000000
  • debugExceptionWidget.border#7A5AF8
  • debugToolBar.background#000000
  • debugToolBar.border#7A5AF8
  • descriptionForeground#9AA3AD
  • diffEditor.border#000000
  • diffEditor.insertedTextBackground#bae67e22
  • diffEditor.insertedTextBorder#bae67e44
  • diffEditor.removedTextBackground#ef6b7322
  • diffEditor.removedTextBorder#ef6b7344
  • dropdown.background#000000
  • dropdown.border#7A5AF8
  • dropdown.foreground#D6DAE0
  • dropdown.listBackground#000000
  • editor.background#0D1117
  • editor.findMatchBackground#ffcc6650
  • editor.findMatchBorder#ffcc66
  • editor.findMatchHighlightBackground#7A5AF830
  • editor.findRangeHighlightBackground#7A5AF830
  • editor.foreground#D6DAE0
  • editor.hoverHighlightBackground#7A5AF830
  • editor.inactiveSelectionBackground#7A5AF830
  • editor.lineHighlightBackground#000000
  • editor.lineHighlightBorder#7A5AF8
  • editor.rangeHighlightBackground#7A5AF830
  • editor.selectionBackground#7A5AF850
  • editor.selectionForeground#D6DAE0
  • editor.selectionHighlightBackground#7A5AF830
  • editor.wordHighlightBackground#7A5AF830
  • editor.wordHighlightStrongBackground#7A5AF850
  • editorBracketMatch.background#7A5AF830
  • editorBracketMatch.border#ffcc66
  • editorCodeLens.foreground#9AA3AD
  • editorCursor.background#7A5AF8
  • editorCursor.foreground#D6DAE0
  • editorError.foreground#ef6b73
  • editorGroup.border#000000
  • editorGroup.dropBackground#000000
  • editorGroup.emptyBackground#000000
  • editorGroup.focusedEmptyBorder#000000
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#bae67e
  • editorGutter.background#000000
  • editorGutter.deletedBackground#ef6b73
  • editorGutter.modifiedBackground#5ccfe6
  • editorHint.foreground#ffcc66
  • editorHoverWidget.background#000000
  • editorHoverWidget.border#7A5AF8
  • editorIndentGuide.activeBackground1#7A5AF8
  • editorIndentGuide.background1#7A5AF830
  • editorInfo.foreground#5ccfe6
  • editorInlayHint.background#7A5AF820
  • editorInlayHint.foreground#9AA3AD
  • editorLineNumber.activeForeground#D6DAE0
  • editorLineNumber.foreground#9AA3AD
  • editorLink.activeForeground#ffcc66
  • editorMarkerNavigation.background#000000
  • editorMarkerNavigationError.background#ef6b73
  • editorMarkerNavigationInfo.background#5ccfe6
  • editorMarkerNavigationWarning.background#ffcc66
  • editorOverviewRuler.addedForeground#bae67e
  • editorOverviewRuler.border#7A5AF8
  • editorOverviewRuler.bracketMatchForeground#ffcc66
  • editorOverviewRuler.commonContentForeground#9AA3AD
  • editorOverviewRuler.currentContentForeground#5ccfe6
  • editorOverviewRuler.deletedForeground#ef6b73
  • editorOverviewRuler.errorForeground#ef6b73
  • editorOverviewRuler.findMatchForeground#ffcc66f7
  • editorOverviewRuler.incomingContentForeground#bae67e
  • editorOverviewRuler.infoForeground#5ccfe6
  • editorOverviewRuler.modifiedForeground#5ccfe6
  • editorOverviewRuler.rangeHighlightForeground#7A5AF8
  • editorOverviewRuler.selectionHighlightForeground#7A5AF8
  • editorOverviewRuler.warningForeground#ffd580
  • editorOverviewRuler.wordHighlightForeground#7A5AF8
  • editorOverviewRuler.wordHighlightStrongForeground#7A5AF8
  • editorPane.background#000000
  • editorRuler.foreground#7A5AF8
  • editorSuggestWidget.background#000000
  • editorSuggestWidget.border#7A5AF8
  • editorSuggestWidget.foreground#D6DAE0
  • editorSuggestWidget.highlightForeground#ffcc66
  • editorSuggestWidget.selectedBackground#7A5AF830
  • editorWarning.foreground#ffd580
  • editorWhitespace.foreground#7A5AF8
  • editorWidget.background#000000
  • editorWidget.border#7A5AF8
  • errorForeground#ef6b73
  • extensionButton.prominentBackground#ffcc66
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#ffcc6699
  • focusBorder#7A5AF8
  • foreground#D6DAE0
  • gitDecoration.conflictingResourceForeground#ef6b73
  • gitDecoration.deletedResourceForeground#ef6b73
  • gitDecoration.ignoredResourceForeground#666666
  • gitDecoration.modifiedResourceForeground#5ccfe6
  • gitDecoration.untrackedResourceForeground#bae67e
  • input.background#000000
  • input.border#7A5AF8
  • input.foreground#D6DAE0
  • input.placeholderForeground#9AA3AD
  • inputOption.activeBorder#7A5AF8
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#ef6b73
  • inputValidation.errorForeground#ef6b73
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#5ccfe6
  • inputValidation.infoForeground#5ccfe6
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#ffd580
  • inputValidation.warningForeground#ffd580
  • list.activeSelectionBackground#7A5AF850
  • list.activeSelectionForeground#D6DAE0
  • list.dropBackground#7A5AF830
  • list.errorForeground#ef6b73
  • list.focusBackground#7A5AF830
  • list.focusForeground#D6DAE0
  • list.highlightForeground#ffcc66
  • list.hoverBackground#7A5AF820
  • list.hoverForeground#D6DAE0
  • list.inactiveFocusBackground#7A5AF810
  • list.inactiveSelectionBackground#7A5AF820
  • list.inactiveSelectionForeground#D6DAE0
  • list.invalidItemForeground#ef6b73
  • list.warningForeground#ffd580
  • listFilterWidget.background#000000
  • listFilterWidget.noMatchesOutline#ef6b73
  • listFilterWidget.outline#7A5AF8
  • menu.background#000000
  • menu.foreground#D6DAE0
  • menu.selectionBackground#7A5AF850
  • menu.selectionForeground#D6DAE0
  • menubar.selectionBackground#7A5AF830
  • menubar.selectionForeground#D6DAE0
  • merge.border#7A5AF8
  • merge.commonContentBackground#7A5AF820
  • merge.commonHeaderBackground#7A5AF830
  • merge.currentContentBackground#5ccfe622
  • merge.currentHeaderBackground#5ccfe677
  • merge.incomingContentBackground#bae67e22
  • merge.incomingHeaderBackground#bae67e77
  • notificationCenter.border#7A5AF8
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#D6DAE0
  • notificationLink.foreground#ffcc66
  • notifications.background#000000
  • notifications.border#7A5AF8
  • notifications.foreground#D6DAE0
  • notificationToast.border#7A5AF8
  • panel.background#000000
  • panel.border#7A5AF8
  • panel.dropBorder#7A5AF8
  • panelInput.border#7A5AF8
  • panelSection.border#7A5AF8
  • panelSection.dropBackground#7A5AF820
  • panelSectionHeader.background#000000
  • panelSectionHeader.foreground#ffcc66
  • panelTitle.activeBorder#ffcc66
  • panelTitle.activeForeground#D6DAE0
  • panelTitle.inactiveForeground#9AA3AD
  • peekView.border#ffcc66
  • peekViewEditor.background#000000
  • peekViewEditor.matchHighlightBackground#ffcc6630
  • peekViewEditor.matchHighlightBorder#ffcc66
  • peekViewEditorGutter.background#000000
  • peekViewResult.background#000000
  • peekViewResult.fileForeground#7A5AF8
  • peekViewResult.lineForeground#D6DAE0
  • peekViewResult.matchHighlightBackground#ffcc6633
  • peekViewResult.selectionBackground#7A5AF830
  • peekViewResult.selectionForeground#D6DAE0
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#9AA3AD
  • peekViewTitleLabel.foreground#7A5AF8
  • pickerGroup.border#7A5AF8
  • pickerGroup.foreground#ffcc66
  • progressBar.background#ffcc66
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#000000
  • scrollbarSlider.background#000000
  • scrollbarSlider.hoverBackground#000000
  • selection.background#7A5AF850
  • settings.checkboxBackground#000000
  • settings.checkboxBorder#7A5AF8
  • settings.checkboxForeground#D6DAE0
  • settings.dropdownBackground#000000
  • settings.dropdownBorder#7A5AF8
  • settings.dropdownForeground#D6DAE0
  • settings.dropdownListBorder#7A5AF8
  • settings.headerForeground#D6DAE0
  • settings.modifiedItemIndicator#5ccfe6
  • settings.numberInputBackground#000000
  • settings.numberInputBorder#7A5AF8
  • settings.numberInputForeground#D6DAE0
  • settings.textInputBackground#000000
  • settings.textInputBorder#7A5AF8
  • settings.textInputForeground#D6DAE0
  • sideBar.background#000000
  • sideBar.foreground#9AA3AD
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#ffcc66
  • sideBarTitle.foreground#ffcc66
  • statusBar.background#000000
  • statusBar.border#7A5AF8
  • statusBar.debuggingBackground#7A5AF8
  • statusBar.debuggingForeground#D6DAE0
  • statusBar.foreground#9AA3AD
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#9AA3AD
  • statusBarItem.activeBackground#7A5AF850
  • statusBarItem.hoverBackground#7A5AF830
  • statusBarItem.remoteBackground#7A5AF8
  • statusBarItem.remoteForeground#D6DAE0
  • tab.activeBackground#000000
  • tab.activeBorder#7A5AF8
  • tab.activeBorderTop#7A5AF8
  • tab.activeForeground#7A5AF8
  • tab.border#000000
  • tab.hoverBackground#7A5AF820
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#9AA3AD
  • tab.unfocusedActiveBackground#000000
  • tab.unfocusedActiveBorder#7A5AF877
  • tab.unfocusedActiveBorderTop#000000
  • tab.unfocusedActiveForeground#D6DAE0
  • tab.unfocusedHoverBackground#000000
  • tab.unfocusedInactiveForeground#9AA3AD
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#5ccfe6
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#5ccfe6
  • terminal.ansiBrightCyan#5ccfe6
  • terminal.ansiBrightGreen#bae67e
  • terminal.ansiBrightMagenta#c3a6ff
  • terminal.ansiBrightRed#ef6b73
  • terminal.ansiBrightWhite#D6DAE0
  • terminal.ansiBrightYellow#ffcc66
  • terminal.ansiCyan#5ccfe6
  • terminal.ansiGreen#bae67e
  • terminal.ansiMagenta#c3a6ff
  • terminal.ansiRed#ef6b73
  • terminal.ansiWhite#cccccc
  • terminal.ansiYellow#ffcc66
  • terminal.background#000000
  • terminal.border#7A5AF8
  • terminal.foreground#D6DAE0
  • terminal.selectionBackground#7A5AF850
  • terminalCursor.background#7A5AF8
  • terminalCursor.foreground#D6DAE0
  • textBlockQuote.background#0D1117
  • textBlockQuote.border#7A5AF8
  • textCodeBlock.background#0D1117
  • textLink.activeForeground#ffcc66
  • textLink.foreground#ffcc66
  • textPreformat.foreground#D6DAE0
  • textSeparator.foreground#9AA3AD
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#D6DAE0
  • titleBar.border#7A5AF8
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#9AA3AD
  • tree.indentGuidesStroke#7A5AF8
  • walkThrough.embeddedEditorBackground#000000
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D6DAE0
comment, punctuation.definition.comment#666666italic
variable, string constant.other.placeholder, source#D6DAE0
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, 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#9AA3AD
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, 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#D6DAE0
variable.parameter, text.html, punctuation.section.property-list, meta.property-value.scss punctuation, meta.property-list, keyword.operator.type.annotation, variable.other.object.property#9AA3AD
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.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.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#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#D6DAE0
text.html.markdown markup.raw.inline, text.html.markdown markup.inline.raw.string.markdown#5ccfe6
text.html.markdown meta.dummy.line-break#9AA3AD
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#9AA3AD
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#9AA3AD
variable.language.fenced.markdown#9AA3AD
meta.separator#9AA3AD
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