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#080709
  • activityBar.border#000000
  • activityBar.foreground#ffa3a5
  • activityBar.inactiveForeground#929487AA
  • activityBarBadge.background#ffa3a5
  • activityBarBadge.foreground#080709
  • badge.background#ffa3a5
  • badge.foreground#080709
  • breadcrumb.background#080709
  • breadcrumbPicker.background#080709
  • button.background#ffa3a575
  • button.foreground#ced0ce
  • button.hoverBackground#ffa3a590
  • button.secondaryBackground#ffa3a520
  • button.secondaryForeground#ced0ce
  • button.secondaryHoverBackground#ffa3a535
  • charts.blue#62b6cb
  • charts.foreground#ced0ce
  • charts.green#52b788
  • charts.lines#ced0ce
  • charts.orange#ffbf81
  • charts.purple#b892ff
  • charts.red#f94144
  • charts.yellow#f6bd60
  • checkbox.foreground#ced0ce
  • commandCenter.activeBackground#191c2160
  • commandCenter.activeForeground#c3b29990
  • commandCenter.background#080709
  • commandCenter.border#000000
  • commandCenter.foreground#929487
  • contrastActiveBorder#00000000
  • contrastBorder#000000
  • dart.closingLabels#c3b299aa
  • debugExceptionWidget.background#191c21
  • debugExceptionWidget.border#000000
  • debugToolBar.background#191c21
  • descriptionForeground#ced0ce
  • diffEditor.border#000000
  • diffEditor.diagonalFill#00000080
  • diffEditor.insertedTextBackground#52b78820
  • diffEditor.removedTextBackground#fe5f5525
  • diffEditorGutter.insertedLineBackground#00000000
  • diffEditorGutter.removedLineBackground#00000000
  • dropdown.background#080709
  • dropdown.border#92948750
  • dropdown.foreground#ced0ce
  • dropdown.listBackground#080709
  • editor.background#080709
  • editor.findMatchBackground#ffa3a520
  • editor.findMatchBorder#ffa3a560
  • editor.findMatchHighlightBackground#ffa3a520
  • editor.findMatchHighlightBorder#ffa3a540
  • editor.foreground#ced0ce
  • editor.hoverHighlightBackground#ffa3a540
  • editor.inactiveSelectionBackground#ffa3a520
  • editor.lineHighlightBackground#ffa3a50c
  • editor.lineHighlightBorder#ffa3a51a
  • editor.rangeHighlightBackground#ffa3a520
  • editor.selectionBackground#ffa3a525
  • editor.selectionForeground#ffa3a5
  • editor.selectionHighlightBackground#00000000
  • editor.selectionHighlightBorder#ffa3a560
  • editor.wordHighlightBackground#ffa3a520
  • editor.wordHighlightStrongBackground#ffa3a540
  • editorBracketHighlight.foreground1#f6bd60
  • editorBracketHighlight.foreground2#7d8cc4
  • editorBracketHighlight.foreground3#62b6cb
  • editorBracketMatch.background#ffa3a520
  • editorBracketMatch.border#ffa3a540
  • editorCodeLens.foreground#ced0ce
  • editorCursor.background#ffa3a5
  • editorCursor.foreground#f6bd60
  • editorError.border#00000000
  • editorError.foreground#fe5f55
  • editorGhostText.background#52b78810
  • editorGhostText.border#00000000
  • editorGhostText.foreground#52b78870
  • editorGroup.border#000000
  • editorGroup.dropBackground#ffa3a515
  • editorGroupHeader.border#00000000
  • editorGroupHeader.noTabsBackground#080709
  • editorGroupHeader.tabsBackground#080709
  • editorGroupHeader.tabsBorder#000000
  • editorGutter.addedBackground#52b788cc
  • editorGutter.background#080709
  • editorGutter.commentRangeForeground#191c21
  • editorGutter.deletedBackground#fe5f55cc
  • editorGutter.modifiedBackground#62b6cbcc
  • editorHoverWidget.background#191c21
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#929487bb
  • editorIndentGuide.background#92948730
  • editorInlayHint.background#c3b29920
  • editorInlayHint.foreground#c3b29990
  • editorInlayHint.typeBackground#7d8cc430
  • editorInlayHint.typeForeground#7d8cc4aa
  • editorLineNumber.activeForeground#929487
  • editorLineNumber.foreground#92948790
  • editorLink.activeForeground#ced0ce
  • editorMarkerNavigation.background#080709
  • editorMarkerNavigationError.background#fe5f5590
  • editorMarkerNavigationInfo.background#62b6cb90
  • editorMarkerNavigationWarning.background#f6bd6090
  • editorOverviewRuler.border#000000
  • editorOverviewRuler.commonContentForeground#f6bd60
  • editorOverviewRuler.currentContentForeground#fe5f55
  • editorOverviewRuler.incomingContentForeground#52b788
  • editorRuler.foreground#00000040
  • editorSuggestWidget.background#080709
  • editorSuggestWidget.border#000000
  • editorSuggestWidget.foreground#c3b299
  • editorSuggestWidget.highlightForeground#f6bd60
  • editorSuggestWidget.selectedBackground#ffa3a54d
  • editorWarning.foreground#f6bd60
  • editorWhitespace.foreground#92948760
  • editorWidget.background#191c21
  • editorWidget.resizeBorder#ffa3a550
  • errorForeground#fe5f55
  • errorLens.errorForeground#fe5f5599
  • errorLens.hintForeground#62b6cb99
  • errorLens.infoForeground#62b6cb99
  • errorLens.warningForeground#f6bd6099
  • extensionButton.prominentBackground#ffa3a59d
  • extensionButton.prominentForeground#080709
  • extensionButton.prominentHoverBackground#ffa3a5
  • focusBorder#ffa3a540
  • foreground#c3b299AA
  • gitDecoration.conflictingResourceForeground#ffa3a5
  • gitDecoration.deletedResourceForeground#fe5f55
  • gitDecoration.ignoredResourceForeground#929487
  • gitDecoration.modifiedResourceForeground#62b6cb
  • gitDecoration.untrackedResourceForeground#52b788
  • icon.foreground#c3b299AA
  • input.background#00000000
  • input.border#92948750
  • input.foreground#ced0ce
  • input.placeholderForeground#ced0ce60
  • inputOption.activeBorder#ffa3a5
  • inputValidation.errorBackground#191c21
  • inputValidation.errorBorder#f6bd60
  • inputValidation.infoBackground#191c21
  • inputValidation.infoBorder#ffa3a5
  • inputValidation.warningBackground#191c21
  • inputValidation.warningBorder#f6bd60
  • list.activeSelectionBackground#92948730
  • list.activeSelectionForeground#ced0ce
  • list.dropBackground#ffa3a515
  • list.errorForeground#fe5f55
  • list.focusBackground#ffa3a540
  • list.focusForeground#c3b299
  • list.highlightForeground#f6bd60
  • list.hoverBackground#92948715
  • list.hoverForeground#ced0ce
  • list.inactiveSelectionBackground#92948730
  • list.warningForeground#f6bd60
  • menu.background#191c21
  • menu.border#000000
  • menu.foreground#c3b299
  • menu.selectionForeground#c3b299
  • menu.separatorBackground#000000
  • menubar.selectionBackground#191c21
  • menubar.selectionForeground#c3b299
  • merge.border#000000
  • merge.commonContentBackground#f6bd6030
  • merge.commonHeaderBackground#f6bd6080
  • merge.currentContentBackground#52b78830
  • merge.currentHeaderBackground#52b78880
  • merge.incomingContentBackground#62b6cb30
  • merge.incomingHeaderBackground#62b6cb80
  • notificationCenterHeader.background#191c21
  • notificationCenterHeader.foreground#ced0ce
  • notificationLink.foreground#f6bd60
  • notifications.background#191c21
  • notifications.border#000000
  • notifications.foreground#c3b299
  • notificationsErrorIcon.foreground#f94144
  • notificationsInfoIcon.foreground#62b6cb
  • notificationsWarningIcon.foreground#ffbf81
  • panel.background#080709
  • panel.border#000000
  • panelInput.border#929487
  • panelSection.border#000000
  • panelSectionHeader.background#92948720
  • panelSectionHeader.border#000000
  • panelSectionHeader.foreground#ced0ce
  • panelTitle.activeBorder#ffa3a5
  • panelTitle.activeForeground#ffa3a5
  • panelTitle.inactiveForeground#929487
  • peekView.border#ffa3a5
  • peekViewEditor.background#191c2140
  • peekViewEditor.matchHighlightBackground#191c2140
  • peekViewEditorGutter.background#191c2140
  • peekViewResult.background#191c2140
  • peekViewResult.fileForeground#ced0ce
  • peekViewResult.lineForeground#ced0ce
  • peekViewResult.matchHighlightBackground#191c21
  • peekViewResult.selectionBackground#191c21
  • peekViewResult.selectionForeground#ced0ce
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#ced0ce
  • peekViewTitleLabel.foreground#ced0ce
  • pickerGroup.border#000000
  • pickerGroup.foreground#ced0ce
  • progressBar.background#f6bd60
  • sash.hoverBorder#ffa3a550
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#ffa3a540
  • scrollbarSlider.background#ffa3a520
  • scrollbarSlider.hoverBackground#ffa3a530
  • selection.background#ffa3a560
  • settings.headerForeground#ffa3a5
  • settings.modifiedItemIndicator#ffa3a5
  • sideBar.background#080709
  • sideBar.border#000000
  • sideBar.foreground#c3b299CC
  • sideBarSectionHeader.background#080709
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#ced0ce
  • sideBarTitle.foreground#929487
  • statusBar.background#080709
  • statusBar.border#000000
  • statusBar.debuggingBackground#ffa3a544
  • statusBar.debuggingForeground#ced0ce
  • statusBar.foreground#c3b299BB
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderBorder#ffa3a5
  • statusBar.noFolderForeground#ced0ce
  • statusBarItem.activeBackground#191c21
  • statusBarItem.errorBackground#f94144
  • statusBarItem.hoverBackground#92948730
  • statusBarItem.prominentBackground#000000
  • statusBarItem.prominentHoverBackground#191c21
  • tab.activeBackground#080709
  • tab.activeBorderTop#ffa3a5
  • tab.activeForeground#ffa3a5
  • tab.border#000000
  • tab.hoverBackground#080709cc
  • tab.hoverBorder#00000000
  • tab.inactiveBackground#080709
  • tab.inactiveForeground#929487
  • tab.lastPinnedBorder#000000
  • tab.unfocusedActiveForeground#ced0ce
  • tab.unfocusedHoverBackground#ffa3a510
  • tab.unfocusedHoverBorder#00000000
  • tab.unfocusedInactiveForeground#ced0ce
  • terminal.ansiBlack#080709
  • terminal.ansiBlue#62b6cb
  • terminal.ansiBrightBlack#62b6cb
  • terminal.ansiBrightBlue#62b6cb
  • terminal.ansiBrightCyan#a596d3
  • terminal.ansiBrightGreen#52b788
  • terminal.ansiBrightMagenta#b892ff
  • terminal.ansiBrightRed#fe5f55
  • terminal.ansiBrightWhite#ced0ce
  • terminal.ansiBrightYellow#f6bd60
  • terminal.ansiCyan#a596d3
  • terminal.ansiGreen#52b788
  • terminal.ansiMagenta#b892ff
  • terminal.ansiRed#fe5f55
  • terminal.ansiWhite#ced0ce
  • terminal.ansiYellow#f6bd60
  • terminal.background#080709
  • terminal.foreground#ced0ce
  • terminal.selectionForeground#ced0ce
  • terminalCursor.background#f6bd60
  • terminalCursor.foreground#f6bd60
  • textBlockQuote.background#62b6cb34
  • textBlockQuote.border#62b6cbb9
  • textCodeBlock.background#62b6cb34
  • textLink.activeForeground#62b6cb
  • textLink.foreground#62b6cb
  • textPreformat.foreground#f6bd60
  • textSeparator.foreground#ffa3a5
  • titleBar.activeBackground#080709
  • titleBar.activeForeground#929487
  • titleBar.border#000000
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#929487
  • toolbar.hoverBackground#92948760
  • tree.indentGuidesStroke#92948770
  • walkThrough.embeddedEditorBackground#080709
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, entity.name.variable.parameter.cs, meta.member.access.python, variable.other.property.ts, variable.other.property.js, constant.language.symbol.elixir#ffbf81
entity.name.type#cbdfbd
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source#929487italic
constant#f94144
source, support, constant.character.entity.named, meta.jsx.children, source.lua, text.html.derivative#c3b299
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts#b892ff
keyword.control.export, support.type.object.module#f6bd60
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, meta.decorator meta.definition.method entity.name.function, meta.decorator meta.method.declaration entity.name.function, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir#62b6cb
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include, keyword.other.import.java#f6bd60
keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.new, keyword.other.phpdoc, keyword.other.use.php, keyword.operator.logical.python, keyword.other.import.static.groovy, keyword.other.import.groovy, punctuation.definition.attribute.swift, source.svelte meta.scope.tag.main.svelte meta.tag.start.svelte variable.function.svelte, meta.directive.on.svelte entity.name.type.svelte, keyword.other.special-method.elixir#f6bd60
meta.object-literal.key, variable.object.property#ced0ce
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml#f6bd60
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua, keyword.operator.assignment, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math#f6bd60
punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.operator, keyword.other, punctuation.terminator, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any, entity.name.variable.tuple-element.cs, keyword.operator.assignment.tsx, meta.definition.method.signature.java, meta.class.body.groovy, meta.definition.method.groovy meta.method.body.java meta.declaration.assertion.groovy, punctuation.definition.list.begin.erlang, meta.expression.parenthesized, meta.definition.function.swift meta.parameter-clause.swift, source.swift meta.function-call.swift, punctuation.section.embedded.end.swift source.swift, source.lua, meta.function.lua, punctuation.definition.keyword.svelte, source.svelte meta.scope.tag.SpeakerPicture.svelte meta.tag.start.svelte entity.other.attribute-name.svelte, expression.embbeded.vue punctuation.definition.tag.begin.html.vue, expression.embbeded.vue punctuation.definition.tag.end.html.vue#ced0ce60
variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.this.php punctuation.definition.variable.php, meta.class.body.php storage.type.php, variable.parameter.function.swift entity.name.function.swift, variable.other.jsdoc#ffbf81
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.interface, storage.type.type, entity.name.type.class.java, support.class.php, entity.name.type.class.php, entity.other.inherited-class.php, entity.name.type.class.groovy, storage.type.rust , entity.name.type.class.swift, source.svelte meta.script.svelte source.ts entity.name.label.ts, meta.directive.on.svelte keyword.control.svelte#a596d3
string, string.template, string.quoted.single, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end.html source.js-ignored-vscode, punctuation.definition.string.end, string.other.link, constant.character.escape.regexp, variable.parameter.url, constant.other.symbol.quoted.single.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.begin.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.end.erlang, meta.import.ts punctuation.definition.variable.svelte, punctuation.definition.string.end.html source.css-ignored-vscode#52b788
string.quoted.docstring.multi.python, string.quoted.double.block.python punctuation.definition.string.end.python, string.quoted.double.block.python punctuation.definition.string.begin.python, string.quoted.double.block.python#52b78860
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type, storage.type.java, storage.type.primitive.java, storage.type.generic.java, keyword.other.type, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php source.php, punctuation.section.embedded.end.php, storage.type.object.array.java, storage.type.primitive.groovy, storage.type.groovy, meta.definition.type.body.swift meta.function-call.swift, meta.definition.type.class.swift meta.inheritance-clause.swift, variable.other.constant.elixir#7d8cc4
variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir#f4845f
source.elm constant.type-constructor#f4845f
source.elm storage.type#7d8cc4normal
entity.name.tag.other.html, meta.tag.other.html punctuation.definition.tag.end.html, meta.tag.other.html punctuation.definition.tag.begin.html, entity.name.tag support.class.component, support.class.component.html#62b6cb
support.variable.liquid, support.class.liquid#f4845f
text.html.basic entity.name, source.js-ignored-vscode, entity.name.tag, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php, meta.tag.start.svelte keyword.control.svelte, meta.tag.end.svelte keyword.control.svelte#62b6cb
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html, text.html.vue invalid.illegal.character-not-allowed-here.html, meta.tag.inline.i.start.html, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html.vue, invalid.illegal.character-not-allowed-here.html#62b6cbaa
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php#f6bd60
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown#7d8cc4
fenced_code.block.language#7d8cc4
punctuation.definition.list.begin#62b6cb
punctuation.definition.list.begin#62b6cb
entity.name.section, markup.heading.setext#f6bd60
punctuation.definition.heading#f6bd60
markup.underline.link, markup.underline.link.image#62b6cb
markup.bold, punctuation.definition.bold#f4845fbold
markup.strikethrough, punctuation.definition.strikethrough#f94144
markup.italic, punctuation.definition.italic#ffbf81italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin#b892ff
punctuation.definition.quote.begin#62b6cb
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out#929487italic
entity.other.attribute-name.pseudo-class#b892ff
entity.other.attribute-name.pseudo-element#b892ff
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity#a596d3
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity#a596d3
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css, meta.property-list meta.property-name, source.css.scss meta.property-list.scss entity.name.tag.css#ced0ce
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity#7d8cc4
entity.name.tag.reference, meta.property-list#ffbf81
keyword.other.unit#ffbf81
support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html#ffbf81
constant.numeric#ffbf81
entity.name.tag.css, meta.property-list.scss entity.name.tag.css#62b6cb