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.activeBorder#F7A501
  • activityBar.background#191A1E
  • activityBar.border#2E2F34
  • activityBar.foreground#E2E2DD
  • activityBar.inactiveForeground#6B6B66
  • activityBarBadge.background#F7A501
  • activityBarBadge.foreground#111111
  • badge.background#F7A501
  • badge.foreground#111111
  • breadcrumb.activeSelectionForeground#F7A501
  • breadcrumb.focusForeground#E2E2DD
  • breadcrumb.foreground#8F8F8A
  • breadcrumbPicker.background#232429
  • button.background#F7A501
  • button.foreground#111111
  • button.hoverBackground#FFBA53
  • button.secondaryBackground#3A3B40
  • button.secondaryForeground#E2E2DD
  • button.secondaryHoverBackground#45464C
  • charts.blue#1D4AFF
  • charts.foreground#E2E2DD
  • charts.green#388600
  • charts.lines#3A3B40
  • charts.orange#F54E00
  • charts.purple#B62AD9
  • charts.red#F35454
  • charts.yellow#F7A501
  • debugConsole.errorForeground#F35454
  • debugConsole.infoForeground#2F80FA
  • debugConsole.warningForeground#F7A501
  • debugIcon.breakpointForeground#F54E00
  • debugIcon.pauseForeground#F7A501
  • debugIcon.restartForeground#5F9D32
  • debugIcon.startForeground#388600
  • debugIcon.stopForeground#F35454
  • debugToolBar.background#232429
  • diffEditor.insertedLineBackground#38860015
  • diffEditor.insertedTextBackground#38860025
  • diffEditor.removedLineBackground#DB370715
  • diffEditor.removedTextBackground#DB370725
  • dropdown.background#25262B
  • dropdown.border#3A3B40
  • dropdown.foreground#E2E2DD
  • dropdown.listBackground#232429
  • editor.background#1E1F23
  • editor.findMatchBackground#F7A50140
  • editor.findMatchBorder#F7A501
  • editor.findMatchHighlightBackground#F7A50125
  • editor.foldBackground#25262B80
  • editor.foreground#E2E2DD
  • editor.hoverHighlightBackground#2A2B30
  • editor.inactiveSelectionBackground#F7A50120
  • editor.lineHighlightBackground#25262B
  • editor.lineHighlightBorder#25262B
  • editor.rangeHighlightBackground#25262B80
  • editor.selectionBackground#F7A50133
  • editor.selectionHighlightBackground#F7A50122
  • editor.wordHighlightBackground#1D4AFF25
  • editor.wordHighlightStrongBackground#1D4AFF35
  • editorBracketHighlight.foreground1#F7A501
  • editorBracketHighlight.foreground2#1D4AFF
  • editorBracketHighlight.foreground3#B62AD9
  • editorBracketHighlight.foreground4#30ABC6
  • editorBracketHighlight.foreground5#6AA84F
  • editorBracketHighlight.foreground6#F35454
  • editorBracketMatch.background#F7A50120
  • editorBracketMatch.border#F7A50180
  • editorCursor.foreground#F7A501
  • editorError.foreground#F35454
  • editorGroup.border#2E2F34
  • editorGroupHeader.tabsBackground#191A1E
  • editorGroupHeader.tabsBorder#191A1E
  • editorGutter.addedBackground#388600
  • editorGutter.deletedBackground#DB3707
  • editorGutter.modifiedBackground#F7A501
  • editorHoverWidget.background#232429
  • editorHoverWidget.border#3A3B40
  • editorHoverWidget.foreground#E2E2DD
  • editorIndentGuide.activeBackground#45464C
  • editorIndentGuide.background#2E2F34
  • editorInfo.foreground#2F80FA
  • editorLineNumber.activeForeground#F7A501
  • editorLineNumber.foreground#5F5F5A
  • editorOverviewRuler.addedForeground#38860080
  • editorOverviewRuler.border#1E1F23
  • editorOverviewRuler.deletedForeground#DB370780
  • editorOverviewRuler.errorForeground#F35454
  • editorOverviewRuler.infoForeground#1D4AFF
  • editorOverviewRuler.modifiedForeground#F7A50180
  • editorOverviewRuler.warningForeground#F7A501
  • editorRuler.foreground#2E2F34
  • editorSuggestWidget.background#232429
  • editorSuggestWidget.border#3A3B40
  • editorSuggestWidget.foreground#E2E2DD
  • editorSuggestWidget.highlightForeground#F7A501
  • editorSuggestWidget.selectedBackground#2E2F34
  • editorWarning.foreground#F7A501
  • editorWhitespace.foreground#3A3B40
  • extensionButton.prominentBackground#F7A501
  • extensionButton.prominentForeground#111111
  • extensionButton.prominentHoverBackground#FFBA53
  • focusBorder#F7A50180
  • gitDecoration.addedResourceForeground#5F9D32
  • gitDecoration.conflictingResourceForeground#F87A4C
  • gitDecoration.deletedResourceForeground#F35454
  • gitDecoration.ignoredResourceForeground#5F5F5A
  • gitDecoration.modifiedResourceForeground#F7A501
  • gitDecoration.stageDeletedResourceForeground#F87A4C
  • gitDecoration.stageModifiedResourceForeground#FFBA53
  • gitDecoration.untrackedResourceForeground#29DBBB
  • icon.foreground#C8CAC1
  • input.background#25262B
  • input.border#3A3B40
  • input.foreground#E2E2DD
  • input.placeholderForeground#6B6B66
  • inputOption.activeBackground#F7A50130
  • inputOption.activeBorder#F7A501
  • inputValidation.errorBackground#DB370730
  • inputValidation.errorBorder#DB3707
  • inputValidation.infoBackground#1D4AFF30
  • inputValidation.infoBorder#1D4AFF
  • inputValidation.warningBackground#F7A50130
  • inputValidation.warningBorder#F7A501
  • keybindingLabel.background#3A3B4040
  • keybindingLabel.border#3A3B40
  • keybindingLabel.bottomBorder#2E2F34
  • keybindingLabel.foreground#E2E2DD
  • list.activeSelectionBackground#2E2F34
  • list.activeSelectionForeground#E2E2DD
  • list.activeSelectionIconForeground#F7A501
  • list.errorForeground#F35454
  • list.focusBackground#2E2F34
  • list.focusForeground#E2E2DD
  • list.highlightForeground#F7A501
  • list.hoverBackground#25262B
  • list.hoverForeground#E2E2DD
  • list.inactiveSelectionBackground#25262B
  • list.inactiveSelectionForeground#E2E2DD
  • list.warningForeground#F7A501
  • merge.currentContentBackground#38860020
  • merge.currentHeaderBackground#38860050
  • merge.incomingContentBackground#1D4AFF20
  • merge.incomingHeaderBackground#1D4AFF50
  • minimap.errorHighlight#F3545480
  • minimap.findMatchHighlight#F7A50160
  • minimap.selectionHighlight#F7A50140
  • minimap.warningHighlight#F7A50180
  • minimapGutter.addedBackground#388600
  • minimapGutter.deletedBackground#DB3707
  • minimapGutter.modifiedBackground#F7A501
  • notifications.background#232429
  • notifications.border#3A3B40
  • notifications.foreground#E2E2DD
  • notificationsErrorIcon.foreground#F35454
  • notificationsInfoIcon.foreground#2F80FA
  • notificationsWarningIcon.foreground#F7A501
  • panel.background#191A1E
  • panel.border#2E2F34
  • panelTitle.activeBorder#F7A501
  • panelTitle.activeForeground#E2E2DD
  • panelTitle.inactiveForeground#8F8F8A
  • peekView.border#F7A501
  • peekViewEditor.background#232429
  • peekViewEditor.matchHighlightBackground#F7A50140
  • peekViewResult.background#191A1E
  • peekViewResult.fileForeground#E2E2DD
  • peekViewResult.matchHighlightBackground#F7A50140
  • peekViewTitle.background#232429
  • peekViewTitleDescription.foreground#8F8F8A
  • peekViewTitleLabel.foreground#E2E2DD
  • progressBar.background#F7A501
  • quickInput.background#232429
  • quickInput.foreground#E2E2DD
  • quickInputList.focusBackground#2E2F34
  • quickInputList.focusForeground#E2E2DD
  • quickInputList.focusIconForeground#F7A501
  • quickInputTitle.background#232429
  • scrollbar.shadow#00000040
  • scrollbarSlider.activeBackground#55565CA0
  • scrollbarSlider.background#3A3B4060
  • scrollbarSlider.hoverBackground#45464C80
  • selection.background#F7A50140
  • settings.focusedRowBackground#25262B
  • settings.headerForeground#E2E2DD
  • settings.modifiedItemIndicator#F7A501
  • sideBar.background#191A1E
  • sideBar.border#2E2F34
  • sideBar.foreground#C8CAC1
  • sideBarSectionHeader.background#1E1F23
  • sideBarSectionHeader.border#2E2F34
  • sideBarSectionHeader.foreground#E2E2DD
  • sideBarTitle.foreground#E2E2DD
  • statusBar.background#191A1E
  • statusBar.border#2E2F34
  • statusBar.debuggingBackground#DB3707
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#C8CAC1
  • statusBar.noFolderBackground#1E1F23
  • statusBarItem.activeBackground#3A3B40
  • statusBarItem.hoverBackground#2E2F34
  • statusBarItem.prominentBackground#F7A501
  • statusBarItem.prominentForeground#111111
  • statusBarItem.remoteBackground#F7A501
  • statusBarItem.remoteForeground#111111
  • tab.activeBackground#1E1F23
  • tab.activeBorderTop#F7A501
  • tab.activeForeground#E2E2DD
  • tab.border#191A1E
  • tab.hoverBackground#25262B
  • tab.inactiveBackground#191A1E
  • tab.inactiveForeground#8F8F8A
  • terminal.ansiBlack#1E1F23
  • terminal.ansiBlue#1D4AFF
  • terminal.ansiBrightBlack#6B6B66
  • terminal.ansiBrightBlue#2F80FA
  • terminal.ansiBrightCyan#29DBBB
  • terminal.ansiBrightGreen#5F9D32
  • terminal.ansiBrightMagenta#A56EFF
  • terminal.ansiBrightRed#F87A4C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFBA53
  • terminal.ansiCyan#30ABC6
  • terminal.ansiGreen#388600
  • terminal.ansiMagenta#B62AD9
  • terminal.ansiRed#F35454
  • terminal.ansiWhite#E2E2DD
  • terminal.ansiYellow#F7A501
  • terminal.background#191A1E
  • terminal.foreground#E2E2DD
  • terminalCursor.foreground#F7A501
  • testing.iconErrored#DB3707
  • testing.iconFailed#F35454
  • testing.iconPassed#388600
  • testing.iconQueued#8F8F8A
  • testing.iconSkipped#F7A501
  • testing.iconUnset#6B6B66
  • textLink.activeForeground#FFBA53
  • textLink.foreground#F1A82C
  • titleBar.activeBackground#191A1E
  • titleBar.activeForeground#E2E2DD
  • titleBar.border#2E2F34
  • titleBar.inactiveBackground#191A1E
  • titleBar.inactiveForeground#8F8F8A
  • walkThrough.embeddedEditorBackground#191A1E
  • welcomePage.tileBackground#25262B
  • welcomePage.tileBorder#3A3B40
  • widget.border#3A3B40
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B6B66italic
variable, string constant.other.placeholder#E2E2DD
variable.other.property, variable.other.object.property#9CDCFE
variable.parameter#F87A4C
variable.language#F54E00italic
constant.numeric, constant.language, support.constant, constant.character, constant.escape#FFBA53
invalid, invalid.illegal#F35454
keyword, storage.type, storage.modifier#B62AD9
keyword.control#A56EFF
keyword.operator#E2E2DD
keyword.other.unit#FFBA53
keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical, keyword.operator.comparison, keyword.operator.ternary#30ABC6
punctuation, meta.brace, meta.delimiter#C8CAC1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#2F80FA
meta.function.parameters variable.parameter#F87A4C
string, constant.other.symbol, constant.other.key#5F9D32
string.template, punctuation.definition.template-expression#5F9D32
meta.template.expression#E2E2DD
string.regexp#29DBBB
constant.character.escape#30ABC6
support.type, support.class, entity.name.type, entity.name.class, entity.other.inherited-class#29DBBB
entity.name.type.parameter#30ABC6
entity.name.type.interface#29DBBB
entity.name.type.enum#29DBBB
variable.other.enummember#FFBA53
entity.name.namespace, entity.name.module#E2E2DD
meta.decorator, meta.decorator entity.name.function#F7A501italic
entity.name.tag, meta.tag.sgml#F54E00
punctuation.definition.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#8F8F8A
entity.other.attribute-name#F7A501
meta.tag string.quoted#5F9D32
support.class.component#29DBBB
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#9CDCFE
support.constant.property-value.css, support.constant.css#FFBA53
entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#F7A501
entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#2F80FA
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#30ABC6
source.json meta.structure.dictionary.json support.type.property-name.json#2F80FA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F7A501
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#29DBBB
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#B62AD9
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#F54E00
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#30ABC6
text.html.markdown, punctuation.definition.list_item.markdown#E2E2DD
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#F7A501bold
markup.bold, markup.bold string#F54E00bold
markup.italic#A56EFFitalic
string.other.link.title.markdown, string.other.link.description.markdown#2F80FA
markup.underline.link.markdown#8F8F8Aunderline
markup.inline.raw.markdown, markup.fenced_code.block.markdown#29DBBB
markup.quote, markup.quote punctuation.definition.blockquote.markdown#6B6B66italic
meta.separator#3A3B40bold
markup.inserted#5F9D32
markup.deleted#F35454
markup.changed#F7A501
*url*, *link*, *uri*underline
variable.parameter.function.language.special.self.python#F54E00italic
support.function.magic.python#2F80FAitalic
entity.name.type.lifetime.rust, storage.modifier.lifetime.rust, punctuation.definition.lifetime.rust#30ABC6
entity.name.function.macro.rust#F7A501bold
entity.name.package.go#E2E2DD
entity.name.tag.yaml#2F80FA
support.type.property-name.toml#2F80FA
support.type.property-name.table.toml#F7A501