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#c8c8ce
  • activityBar.border#e6e6e9
  • activityBar.foreground#000000
  • activityBarBadge.background#000000
  • activityBarBadge.foreground#f4f4f6
  • badge.background#000000
  • badge.foreground#f4f4f6
  • breadcrumb.activeSelectionForeground#000000
  • breadcrumb.background#f4f4f6
  • breadcrumb.focusForeground#66666e
  • breadcrumb.foreground#9999a1
  • breadcrumbPicker.background#f4f4f6
  • button.background#000000
  • button.foreground#f4f4f6
  • button.hoverBackground#66666e
  • debugExceptionWidget.background#e6e6e9
  • debugExceptionWidget.border#66666e
  • diffEditor.insertedTextBackground#00000020
  • diffEditor.removedTextBackground#66666e15
  • dropdown.background#f4f4f6
  • dropdown.border#e6e6e9
  • dropdown.foreground#66666e
  • dropdown.listBackground#e6e6e9
  • editor.background#f4f4f6
  • editor.findMatchBackground#66666e50
  • editor.findMatchHighlightBackground#66666e25
  • editor.foreground#000000
  • editor.inactiveSelectionBackground#9999a140
  • editor.lineHighlightBackground#e6e6e9
  • editor.rangeHighlightBackground#66666e15
  • editor.selectionBackground#9999a166
  • editor.selectionHighlightBackground#9999a144
  • editor.wordHighlightBackground#9999a144
  • editor.wordHighlightStrongBackground#9999a166
  • editorBracketMatch.background#66666e20
  • editorBracketMatch.border#66666e
  • editorCodeLens.foreground#9999a1
  • editorCursor.foreground#000000
  • editorError.foreground#f14c4c
  • editorGroup.border#e6e6e9
  • editorGroup.dropBackground#e6e6e9cc
  • editorGroupHeader.noTabsBackground#f4f4f6
  • editorGroupHeader.tabsBackground#e6e6e9
  • editorGroupHeader.tabsBorder#c8c8ce
  • editorGutter.addedBackground#66666eb3
  • editorGutter.background#f4f4f6
  • editorGutter.deletedBackground#9999a1b3
  • editorGutter.modifiedBackground#c8c8ceb3
  • editorHoverWidget.background#e6e6e9
  • editorHoverWidget.border#c8c8ce
  • editorLineNumber.activeForeground#66666e
  • editorLineNumber.foreground#c8c8ce
  • editorLink.activeForeground#66666e
  • editorMarkerNavigation.background#e6e6e9
  • editorMarkerNavigationError.background#f14c4cb3
  • editorMarkerNavigationWarning.background#cca700b3
  • editorOverviewRuler.addedForeground#66666e
  • editorOverviewRuler.border#e6e6e9
  • editorOverviewRuler.currentContentForeground#66666e20
  • editorOverviewRuler.deletedForeground#9999a1
  • editorOverviewRuler.errorForeground#f14c4c
  • editorOverviewRuler.findMatchForeground#66666e50
  • editorOverviewRuler.incomingContentForeground#9999a120
  • editorOverviewRuler.infoForeground#66666e
  • editorOverviewRuler.modifiedForeground#c8c8ce
  • editorOverviewRuler.rangeHighlightForeground#9999a144
  • editorOverviewRuler.selectionHighlightForeground#9999a144
  • editorOverviewRuler.warningForeground#cca700
  • editorOverviewRuler.wordHighlightForeground#9999a144
  • editorOverviewRuler.wordHighlightStrongForeground#9999a166
  • editorRuler.foreground#e6e6e9
  • editorSuggestWidget.background#e6e6e9
  • editorSuggestWidget.border#c8c8ce
  • editorSuggestWidget.foreground#000000
  • editorSuggestWidget.highlightForeground#000000
  • editorSuggestWidget.selectedBackground#9999a166
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e6e6e966
  • editorWidget.background#e6e6e9
  • editorWidget.border#c8c8ce
  • errorForeground#f14c4c
  • extensionButton.prominentBackground#000000
  • extensionButton.prominentForeground#f4f4f6
  • extensionButton.prominentHoverBackground#66666e
  • focusBorder#66666e80
  • foreground#66666e
  • gitDecoration.conflictingResourceForeground#66666e
  • gitDecoration.deletedResourceForeground#9999a1
  • gitDecoration.ignoredResourceForeground#c8c8ce
  • gitDecoration.modifiedResourceForeground#66666e
  • gitDecoration.untrackedResourceForeground#000000
  • input.background#e6e6e9
  • input.border#c8c8ce
  • input.foreground#000000
  • input.placeholderForeground#c8c8ce
  • inputOption.activeBorder#66666e
  • inputValidation.errorBackground#f4f4f6
  • inputValidation.errorBorder#f14c4c
  • inputValidation.infoBackground#f4f4f6
  • inputValidation.infoBorder#66666e
  • inputValidation.warningBackground#f4f4f6
  • inputValidation.warningBorder#cca700
  • list.activeSelectionBackground#9999a166
  • list.activeSelectionForeground#000000
  • list.dropBackground#9999a144
  • list.focusBackground#9999a166
  • list.focusForeground#000000
  • list.highlightForeground#66666e
  • list.hoverBackground#e6e6e9
  • list.hoverForeground#000000
  • list.inactiveFocusBackground#9999a140
  • list.inactiveSelectionBackground#9999a144
  • list.inactiveSelectionForeground#000000
  • list.invalidItemForeground#66666e
  • merge.border#66666e80
  • merge.currentContentBackground#66666e20
  • merge.currentHeaderBackground#66666e40
  • merge.incomingContentBackground#9999a120
  • merge.incomingHeaderBackground#9999a140
  • notificationCenter.border#66666e
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#f4f4f6
  • notificationLink.foreground#66666e
  • notifications.background#e6e6e9
  • notifications.border#c8c8ce
  • notifications.foreground#000000
  • notificationToast.border#c8c8ce
  • panel.background#f4f4f6
  • panel.border#e6e6e9
  • panelTitle.activeBorder#66666e
  • panelTitle.activeForeground#000000
  • panelTitle.inactiveForeground#9999a1
  • peekView.border#c8c8ce
  • peekViewEditor.background#e6e6e9
  • peekViewEditor.matchHighlightBackground#66666e30
  • peekViewEditorGutter.background#e6e6e9
  • peekViewResult.background#f4f4f6
  • peekViewResult.fileForeground#000000
  • peekViewResult.lineForeground#66666e
  • peekViewResult.matchHighlightBackground#66666e30
  • peekViewResult.selectionBackground#9999a166
  • peekViewResult.selectionForeground#000000
  • peekViewTitle.background#f4f4f6
  • peekViewTitleDescription.foreground#9999a1
  • peekViewTitleLabel.foreground#000000
  • pickerGroup.border#e6e6e9
  • pickerGroup.foreground#9999a1
  • progressBar.background#66666e
  • scrollbar.shadow#00000011
  • scrollbarSlider.activeBackground#9999a166
  • scrollbarSlider.background#9999a122
  • scrollbarSlider.hoverBackground#9999a144
  • selection.background#9999a166
  • sideBar.background#e6e6e9
  • sideBar.border#c8c8ce
  • sideBar.foreground#000000
  • sideBarSectionHeader.background#c8c8ce
  • sideBarSectionHeader.foreground#66666e
  • sideBarTitle.foreground#66666e
  • statusBar.background#c8c8ce
  • statusBar.border#e6e6e9
  • statusBar.debuggingBackground#66666e
  • statusBar.debuggingForeground#f4f4f6
  • statusBar.foreground#000000
  • statusBar.noFolderBackground#e6e6e9
  • statusBar.noFolderForeground#66666e
  • statusBarItem.activeBackground#9999a166
  • statusBarItem.hoverBackground#9999a144
  • statusBarItem.prominentBackground#66666e
  • statusBarItem.prominentHoverBackground#000000
  • tab.activeBackground#f4f4f6
  • tab.activeBorder#66666e
  • tab.activeForeground#000000
  • tab.border#c8c8ce
  • tab.hoverBackground#e6e6e9
  • tab.inactiveBackground#e6e6e9
  • tab.inactiveForeground#9999a1
  • tab.unfocusedActiveForeground#66666e
  • tab.unfocusedHoverBackground#e6e6e9
  • tab.unfocusedInactiveForeground#9999a1
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#2a4a70
  • terminal.ansiBrightBlack#9999a1
  • terminal.ansiBrightBlue#66666e
  • terminal.ansiBrightCyan#66666e
  • terminal.ansiBrightGreen#000000
  • terminal.ansiBrightMagenta#66666e
  • terminal.ansiBrightRed#000000
  • terminal.ansiBrightWhite#f4f4f6
  • terminal.ansiBrightYellow#e6e6e9
  • terminal.ansiCyan#1a5060
  • terminal.ansiGreen#2e6030
  • terminal.ansiMagenta#603080
  • terminal.ansiRed#b03030
  • terminal.ansiWhite#66666e
  • terminal.ansiYellow#7a6010
  • terminal.background#f4f4f6
  • terminal.foreground#000000
  • terminal.selectionBackground#9999a166
  • titleBar.activeBackground#c8c8ce
  • titleBar.activeForeground#000000
  • titleBar.border#e6e6e9
  • titleBar.inactiveBackground#c8c8ce
  • titleBar.inactiveForeground#9999a1
  • walkThrough.embeddedEditorBackground#f4f4f6
  • widget.shadow#00000022

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#9999a1italic
keyword, storage.type, storage.modifier#000000italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#66666e
keyword.control.import, keyword.control.export, keyword.control.from#000000
string, string.quoted, string.template#3a6b20
punctuation.definition.string.begin, punctuation.definition.string.end#4a8030
constant.character.escape, constant.other.placeholder#5a9040italic
entity.name.function, meta.function-call, variable.function, support.function#1a5070
entity.name.label#1a5070
entity.name.type.class, entity.name.type, support.class, support.type#502870italic
meta.type.annotation, meta.type.parameters#502870italic
entity.name.type.module, meta.import variable.other#502870
variable, variable.name, variable.other#000000
variable.parameter#1a1a1e
variable.language#66666eitalic
variable.other.property, variable.other.object.property, support.variable.property#7a5010
constant.numeric#7a3010
constant.language#000000
constant, constant.other, constant.character#7a3010
entity.name.tag, meta.tag.sgml#000000
entity.name.tag support.class.component#502870
meta.tag.attribute, entity.other.attribute-name#7a5010italic
punctuation, meta.tag, punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#66666e
punctuation.terminator.statement, punctuation.separator.comma, punctuation.terminator.rule#9999a1
punctuation.accessor#66666e
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#502870
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#7a5010
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#1a5070
meta.property-value.css, support.constant.property-value.css#3a6b20
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#7a3010italic
meta.object-literal.key#7a5010
source.json meta.structure.dictionary.json support.type.property-name.json#1a5070
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#7a5010
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#502870
*url*, *link*, *uri*#1a5070underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#000000italic
markup.heading, entity.name.section#000000bold
markup.italic#66666eitalic
markup.bold#000000bold
markup.underline#3a6b20underline
markup.strike#9999a1strikethrough
markup.quote#66666eitalic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#7a3010
markup.deleted, punctuation.definition.deleted#9999a1
markup.inserted, punctuation.definition.inserted#3a6b20
markup.changed, punctuation.definition.changed#7a5010
entity.other.inherited-class#502870
invalid, invalid.illegal#f14c4c
token.info-token#66666e
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#9999a1