Skip to main content
CodingTheme

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.activeBackground#2e283972
  • activityBar.activeBorder#4f3f6f
  • activityBar.activeFocusBorder#FA8D3E
  • activityBar.background#17141c
  • activityBar.dropBorder#FA8D3E
  • activityBar.inactiveForeground#bcb9c899
  • activityBarBadge.background#7aea92
  • activityBarBadge.foreground#16141c
  • badge.background#7a7cea
  • badge.foreground#16141c
  • button.background#aa9bd9
  • button.foreground#16141c
  • button.hoverBackground#aa9bd9
  • checkbox.background#2b2636
  • diffEditor.insertedTextBackground#7aea9230
  • diffEditor.removedTextBackground#F0717135
  • dropdown.background#2b2636
  • dropdown.border#332d40
  • editor.background#211d29
  • editor.findMatchBorder#564895
  • editor.findMatchHighlightBackground#866aed40
  • editor.foldBackground#ff479730
  • editor.foreground#ece8fb
  • editor.lineHighlightBackground#2b2636
  • editor.selectionBackground#463c74
  • editorBracketMatch.background#1d1924
  • editorBracketMatch.border#c77031
  • editorCursor.background#16141c
  • editorCursor.foreground#ece8fb
  • editorError.foreground#F07171
  • editorGroup.border#17141c
  • editorGroup.dropBackground#3e5afa30
  • editorGroupHeader.noTabsBackground#2b2636
  • editorGroupHeader.tabsBackground#2b2636
  • editorGutter.addedBackground#7aea92
  • editorGutter.deletedBackground#F07171
  • editorGutter.modifiedBackground#399EE6
  • editorHoverWidget.border#352f43
  • editorIndentGuide.activeBackground1#FA8D3E
  • editorIndentGuide.background1#352f43
  • editorInfo.foreground#399EE6
  • editorLineNumber.activeForeground#9d93b2
  • editorLineNumber.foreground#514765
  • editorLink.activeForeground#FA8D3E
  • editorMarkerNavigation.background#211d29
  • editorMarkerNavigationError.background#F07171
  • editorMarkerNavigationInfo.background#399EE6
  • editorMarkerNavigationWarning.background#FA8D3E
  • editorOverviewRuler.addedForeground#399EE6
  • editorOverviewRuler.border#352f43
  • editorOverviewRuler.bracketMatchForeground#FA8D3E
  • editorOverviewRuler.deletedForeground#399EE6
  • editorOverviewRuler.errorForeground#F07171
  • editorOverviewRuler.infoForeground#399EE6
  • editorOverviewRuler.modifiedForeground#399EE6
  • editorOverviewRuler.selectionHighlightForeground#FA8D3E
  • editorOverviewRuler.warningForeground#FA8D3E
  • editorPane.background#19161f
  • editorRuler.foreground#352f43
  • editorSuggestWidget.background#2b2636
  • editorSuggestWidget.border#352f43
  • editorSuggestWidget.highlightForeground#7aea92
  • editorWarning.foreground#FA8D3E
  • editorWhitespace.foreground#4a415c
  • editorWidget.background#211d29
  • editorWidget.resizeBorder#352f43
  • errorForeground#F07171
  • extensionButton.prominentBackground#C8B6FF
  • extensionButton.prominentForeground#16141c
  • extensionButton.prominentHoverBackground#a092cc
  • focusBorder#9077E866
  • foreground#ece8fb
  • gitDecoration.addedResourceForeground#7aea92
  • gitDecoration.deletedResourceForeground#F07171
  • gitDecoration.modifiedResourceForeground#399EE6
  • gitDecoration.stageDeletedResourceForeground#F07171
  • gitDecoration.stageModifiedResourceForeground#399EE6
  • icon.foreground#bcb9c8
  • input.background#2b2636
  • input.border#332d40
  • input.foreground#EFEAFF
  • inputOption.activeBorder#aa9bd9
  • inputValidation.errorBackground#F0717190
  • inputValidation.errorBorder#F07171
  • inputValidation.errorForeground#16141c
  • inputValidation.infoBackground#399EE690
  • inputValidation.infoBorder#399EE6
  • inputValidation.infoForeground#16141c
  • inputValidation.warningBackground#FA8D3E90
  • inputValidation.warningBorder#FA8D3E
  • inputValidation.warningForeground#16141c
  • list.activeSelectionBackground#9077e830
  • list.activeSelectionIconForeground#7a7cea
  • list.errorForeground#F07171
  • list.focusBackground#9077e830
  • list.highlightForeground#7aea92
  • list.hoverBackground#9077e807
  • list.inactiveSelectionBackground#9077e820
  • list.inactiveSelectionForeground#ece8fb
  • list.inactiveSelectionIconForeground#7a7cea
  • list.warningForeground#FA8D3E
  • menu.background#211d29
  • menu.foreground#ece8fb
  • menu.selectionBackground#FA8D3EDD
  • menu.selectionForeground#16141c
  • menu.separatorBackground#4a415c
  • minimap.background#211d29d8
  • minimap.errorHighlight#F07171
  • minimap.selectionHighlight#9077e830
  • minimap.warningHighlight#FA8D3E
  • minimapGutter.addedBackground#7aea92
  • minimapGutter.deletedBackground#F07171
  • minimapGutter.modifiedBackground#399EE6
  • notifications.background#211d29
  • notificationsErrorIcon.foreground#F07171
  • notificationsInfoIcon.foreground#399EE6
  • notificationsWarningIcon.foreground#FA8D3E
  • panel.dropBorder#FA8D3E
  • panelTitle.activeBorder#FA8D3E
  • peekViewResult.background#2b2636
  • peekViewTitle.background#17141c
  • pickerGroup.border#0c0b10
  • pickerGroup.foreground#7a7cea
  • problemsErrorIcon.foreground#F07171
  • problemsInfoIcon.foreground#399EE6
  • problemsWarningIcon.foreground#FA8D3E
  • progressBar.background#FA8D3E
  • scrollbar.shadow#09080b
  • scrollbarSlider.activeBackground#4a415c40
  • scrollbarSlider.background#5f537650
  • scrollbarSlider.hoverBackground#73658f40
  • selection.background#9077E866
  • settings.modifiedItemIndicator#399EE6
  • sideBar.background#1c1823
  • sideBarSectionHeader.background#1c1823
  • statusBar.background#17141c
  • statusBar.foreground#87799F
  • statusBarItem.hoverBackground#2c2636
  • statusBarItem.prominentBackground#FA8D3E
  • statusBarItem.prominentForeground#16141c
  • statusBarItem.prominentHoverBackground#e17f38
  • tab.activeBackground#211d29
  • tab.activeBorder#FA8D3E00
  • tab.activeModifiedBorder#399EE6
  • tab.border#473f588b
  • tab.hoverBackground#352f43
  • tab.inactiveBackground#2b2636
  • tab.lastPinnedBorder#FA8D3E50
  • terminal.selectionBackground#FA8D3E
  • terminalCursor.background#16141c
  • terminalCursor.foreground#FA8D3E
  • textLink.activeForeground#ff4797
  • textLink.foreground#7AEA92
  • textPreformat.foreground#7aea92
  • textSeparator.foreground#0c0b10
  • titleBar.activeBackground#2b2636
  • titleBar.activeForeground#bcb9c8
  • titleBar.border#3b3549
  • titleBar.inactiveBackground#211d29
  • widget.border#9077e861
  • widget.shadow#1b1722

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
invalid#F07171
meta.embedded, source.groovy.embedded, meta.template.expression#ece8fb
variable, punctuation.definition.variable, support.variable.property.dom, support.variable.dom, support.variable.property, punctuation.separator.parameter, string.interpolated.pug variable#ece8fb
variable.statamic#C8B6FF
meta.embedded.block.statamic#7ac3ff
comment, punctuation.definition.comment#695c82
string, punctuation.definition.string#ece8fb
constant.character.escape#7AEA92
keyword, constant.language.import-export-all#7ac3ff
entity.name.type, support.type.primitive, support.type.builtin, meta.type.annotation entity.name.type, meta.type.parameters entity.name.type#C8B6FF
keyword.control, keyword.operator, storage, support.type, keyword.operator.expression, keyword.operator.new#FF4797
entity.name.function, support.class, support.function, new.expr entity.name.type, entity.other.inherited-class, entity.name.section#ff4797
punctuation.definition.typeparameters, keyword.operator.type, keyword.operator.optional, punctuation.definition.template-expression, source.tsx punctuation.section.embedded, source.jsx punctuation.section.embedded#FA8D3E
constant#C8B6FF
constant.numeric, constant.language#b57ced
variable.parameter, parameter.variable, meta.function.parameter variable, storage.type.function.js, source.js, source.rust meta.type_params.rust#7DBFEF
entity.name.function.macro.rust#9dd2e6
punctuation, meta.brace#4E6A97
variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self.python#7AEA92
comment.block.documentation entity.name.type, string.template.js, string.quoted.double.rust, string.quoted.single.python, string.quoted.single.sql, string.quoted.double.ruby#FA8D3E
variable.language.super#ff4797
meta.tag.metadata.doctype entity.name.tag, meta.tag.metadata.doctype punctuation.definition.tag, meta.tag.metadata.doctype string, meta.tag.metadata.doctype entity.other.attribute-name.html, meta.tag.sgml.doctype#b0adbb
entity.name.tag#ff4797
meta.tag string#ece8fb
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#7aea92
constant.character.entity, punctuation.definition.entity#7DBFEF
entity.name.section.markdown, markup.heading.setext#7aea92
punctuation.definition.list#7aea92
meta.separator.markdown#7aea92
markup.inline.raw#7AEA92
markup.boldbold
markup.italicitalic
meta.link punctuation.definition.string, meta.image punctuation.definition.string#b0adbb
link, markup.underline.link, constant.other.reference.link.markdown#ff4797
markup.quote#7DBFEF
entity.name.tag.css, entity.name.tag.wildcard#ece8fb
entity.other.attribute-name.class, entity.other.attribute-name punctuation.definition.entity#7aea92
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, constant.other.color#7AEA92
entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, punctuation.separator.arguments.ruby#ff4797
source.css constant.numeric, source.less constant.numeric, source.scss constant.numeric#ece8fb
meta.property-name, support.type.property-name, keyword.control.flow.python#7DBFEF
meta.property-value, meta.property-value constant.other, support.constant.property-value#ff4797
variable.parameter.url#7DBFEF
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#EA7AD5
support.type.property-name.json#7aea92
markup.inserted#7aea92
markup.changed#399EE6
markup.deleted#F07171
meta.diff.header#399EE6
meta.diff.range#7AEA92
keyword.blade#EA7AD5
entity.name.type.class.python#9983d7
meta.class.python#7DBFEF
keyword.control.conditional.js, keyword.control.elixir, storage.type.js#7DBFEF
variable.parameter.js, variable.parameter.function.language.python, meta.tag string#fbc664
variable.other.constant.elixir, constant.other.symbol.ruby#fbc664
punctuation.section.tag.twig#7DBFEF

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...