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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#2e2e34italic
keyword, storage.type, storage.modifier#9999a1italic
keyword.operator, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#66666e
keyword.control.import, keyword.control.export, keyword.control.from#9999a1
string, string.quoted, string.template#a8c880
punctuation.definition.string.begin, punctuation.definition.string.end#88a860
constant.character.escape, constant.other.placeholder#c8e890italic
entity.name.function, meta.function-call, variable.function, support.function#80b8d0
entity.name.label#80b8d0
entity.name.type.class, entity.name.type, support.class, support.type#b090d0italic
meta.type.annotation, meta.type.parameters#b090d0italic
entity.name.type.module, meta.import variable.other#b090d0
variable, variable.name, variable.other#e6e6e9
variable.parameter#f4f4f6
variable.language#9999a1italic
variable.other.property, variable.other.object.property, support.variable.property#d0a870
constant.numeric#d08870
constant.language#9999a1
constant, constant.other, constant.character#d08870
entity.name.tag, meta.tag.sgml#9999a1
entity.name.tag support.class.component#b090d0
meta.tag.attribute, entity.other.attribute-name#d0a870italic
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#2e2e34
punctuation.accessor#66666e
source.css entity.other.attribute-name.class, source.scss entity.other.attribute-name.class#b090d0
source.css entity.other.attribute-name.id, source.scss entity.other.attribute-name.id#d0a870
support.type.property-name.css, meta.property-list.css, meta.property-list.scss#80b8d0
meta.property-value.css, support.constant.property-value.css#a8c880
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#d08870italic
meta.object-literal.key#d0a870
source.json meta.structure.dictionary.json support.type.property-name.json#80b8d0
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#d0a870
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#b090d0
*url*, *link*, *uri*#80b8d0underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9999a1italic
markup.heading, entity.name.section#80b8d0bold
markup.italic#f4f4f6italic
markup.bold#e6e6e9bold
markup.underline#a8c880underline
markup.strike#2e2e34strikethrough
markup.quote#66666eitalic
markup.raw.block, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#d08870
markup.deleted, punctuation.definition.deleted#66666e
markup.inserted, punctuation.definition.inserted#a8c880
markup.changed, punctuation.definition.changed#d0a870
entity.other.inherited-class#b090d0
invalid, invalid.illegal#f14c4c
token.info-token#9999a1
token.warn-token#cca700
token.error-token#f14c4c
token.debug-token#66666e
Metallic Elegance PS Theme by Pranav S S - VS Code Theme