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.activeBackground#231a1c
  • activityBar.activeBorder#ffb7c5
  • activityBar.background#140e0f
  • activityBar.foreground#fcf6f7
  • activityBar.inactiveForeground#8d7a7d
  • activityBarBadge.background#ffb7c5
  • activityBarBadge.foreground#231a1c
  • badge.background#ffb7c530
  • badge.foreground#fcf6f7
  • breadcrumb.activeSelectionForeground#fcf6f7
  • breadcrumb.background#231a1c
  • breadcrumb.focusForeground#fcf6f7
  • breadcrumb.foreground#8d7a7d
  • breadcrumbPicker.background#1a1314
  • button.background#d8b4fe
  • button.foreground#231a1c
  • button.hoverBackground#ffb7c5
  • button.secondaryBackground#ffb7c530
  • button.secondaryForeground#fcf6f7
  • button.secondaryHoverBackground#312427
  • debugToolBar.background#1a1314
  • diffEditor.insertedTextBackground#34d39920
  • diffEditor.removedTextBackground#f8717140
  • dropdown.background#1a1314
  • dropdown.border#ffb7c530
  • dropdown.foreground#fcf6f7
  • editor.background#231a1c
  • editor.findMatchBackground#fde04760
  • editor.findMatchHighlightBackground#fcf6f730
  • editor.findRangeHighlightBackground#ffb7c53060
  • editor.foldBackground#231a1c
  • editor.foreground#fcf6f7
  • editor.hoverHighlightBackground#818cf830
  • editor.lineHighlightBackground#312427
  • editor.lineHighlightBorder#231a1c
  • editor.rangeHighlightBackground#d8b4fe15
  • editor.selectionBackground#ffb7c530
  • editor.selectionHighlightBackground#ffb7c530b0
  • editor.snippetFinalTabstopHighlightBackground#231a1c
  • editor.snippetFinalTabstopHighlightBorder#34d399
  • editor.snippetTabstopHighlightBackground#231a1c
  • editor.snippetTabstopHighlightBorder#ffb7c530
  • editor.wordHighlightBackground#818cf830
  • editor.wordHighlightStrongBackground#34d39930
  • editorBracketHighlight.foreground1#fcf6f7
  • editorBracketHighlight.foreground2#ffb7c5
  • editorBracketHighlight.foreground3#818cf8
  • editorBracketHighlight.foreground4#34d399
  • editorBracketHighlight.foreground5#d8b4fe
  • editorBracketHighlight.foreground6#fb923c
  • editorBracketHighlight.unexpectedBracket.foreground#f87171
  • editorCodeLens.foreground#8d7a7d
  • editorCursor.foreground#ffb7c5
  • editorError.foreground#f87171
  • editorGroup.border#140e0f
  • editorGroup.dropBackground#ffb7c53070
  • editorGroupHeader.noTabsBackground#1a1314
  • editorGroupHeader.tabsBackground#1a1314
  • editorGroupHeader.tabsBorder#140e0f
  • editorGutter.addedBackground#34d399cc
  • editorGutter.deletedBackground#f87171cc
  • editorGutter.modifiedBackground#818cf8cc
  • editorHoverWidget.background#1a1314
  • editorHoverWidget.border#ffb7c530
  • editorLineNumber.activeForeground#ffb7c5
  • editorLineNumber.foreground#8d7a7d
  • editorLink.activeForeground#818cf8
  • editorMarkerNavigation.background#1a1314
  • editorOverviewRuler.addedForeground#34d399aa
  • editorOverviewRuler.border#140e0f
  • editorOverviewRuler.currentContentForeground#34d399
  • editorOverviewRuler.deletedForeground#f87171aa
  • editorOverviewRuler.errorForeground#f87171aa
  • editorOverviewRuler.incomingContentForeground#d8b4fe
  • editorOverviewRuler.infoForeground#818cf8aa
  • editorOverviewRuler.modifiedForeground#818cf8aa
  • editorOverviewRuler.selectionHighlightForeground#fb923c
  • editorOverviewRuler.warningForeground#fde047aa
  • editorOverviewRuler.wordHighlightForeground#818cf8
  • editorOverviewRuler.wordHighlightStrongForeground#34d399
  • editorRuler.foreground#fcf6f71a
  • editorSuggestWidget.background#1a1314
  • editorSuggestWidget.border#ffb7c530
  • editorSuggestWidget.foreground#fcf6f7
  • editorSuggestWidget.selectedBackground#ffb7c530
  • editorWarning.foreground#fde047
  • editorWhitespace.foreground#fcf6f71a
  • editorWidget.background#1a1314
  • editorWidget.border#ffb7c530
  • errorForeground#f87171
  • extensionButton.prominentBackground#d8b4fe
  • extensionButton.prominentForeground#231a1c
  • extensionButton.prominentHoverBackground#ffb7c5
  • focusBorder#ffb7c530
  • foreground#fcf6f7
  • gitDecoration.conflictingResourceForeground#fb923c
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.ignoredResourceForeground#8d7a7d
  • gitDecoration.modifiedResourceForeground#818cf8
  • gitDecoration.untrackedResourceForeground#34d399
  • inlineChat.regionHighlight#312427
  • input.background#231a1c
  • input.border#ffb7c530
  • input.foreground#fcf6f7
  • input.placeholderForeground#8d7a7d
  • inputOption.activeBorder#ffb7c5
  • inputValidation.errorBorder#f87171
  • inputValidation.infoBorder#ffb7c5
  • inputValidation.warningBorder#fde047
  • list.activeSelectionBackground#ffb7c530
  • list.activeSelectionForeground#fcf6f7
  • list.dropBackground#ffb7c530
  • list.errorForeground#f87171
  • list.focusBackground#ffb7c530a0
  • list.highlightForeground#818cf8
  • list.hoverBackground#312427
  • list.inactiveSelectionBackground#312427
  • list.warningForeground#fde047
  • listFilterWidget.background#1a1314
  • listFilterWidget.noMatchesOutline#f87171
  • listFilterWidget.outline#ffb7c530
  • menu.background#1a1314
  • menu.foreground#fcf6f7
  • menu.separatorBackground#ffb7c530
  • menubar.selectionBackground#312427
  • merge.currentHeaderBackground#34d39940
  • merge.incomingHeaderBackground#d8b4fe40
  • panel.background#231a1c
  • panel.border#140e0f
  • panelTitle.activeBorder#ffb7c5
  • panelTitle.activeForeground#fcf6f7
  • panelTitle.inactiveForeground#8d7a7d
  • peekView.border#ffb7c530
  • peekViewEditor.background#231a1c
  • peekViewEditor.matchHighlightBackground#fde04740
  • peekViewResult.background#1a1314
  • peekViewResult.fileForeground#fcf6f7
  • peekViewResult.lineForeground#fcf6f7
  • peekViewResult.matchHighlightBackground#fde04740
  • peekViewResult.selectionBackground#ffb7c530
  • peekViewResult.selectionForeground#fcf6f7
  • peekViewTitle.background#140e0f
  • peekViewTitleDescription.foreground#8d7a7d
  • peekViewTitleLabel.foreground#fcf6f7
  • pickerGroup.border#ffb7c530
  • pickerGroup.foreground#818cf8
  • progressBar.background#ffb7c5
  • scrollbar.shadow#140e0f33
  • selection.background#ffb7c530
  • settings.checkboxBackground#1a1314
  • settings.checkboxBorder#ffb7c530
  • settings.checkboxForeground#fcf6f7
  • settings.dropdownBackground#1a1314
  • settings.dropdownBorder#ffb7c530
  • settings.dropdownForeground#fcf6f7
  • settings.headerForeground#fcf6f7
  • settings.modifiedItemIndicator#fb923c
  • settings.numberInputBackground#231a1c
  • settings.numberInputBorder#ffb7c530
  • settings.numberInputForeground#fcf6f7
  • settings.textInputBackground#231a1c
  • settings.textInputBorder#ffb7c530
  • settings.textInputForeground#fcf6f7
  • sideBar.background#1a1314
  • sideBar.border#140e0f
  • sideBarSectionHeader.background#1a1314
  • sideBarSectionHeader.border#1a1314
  • sideBarSectionHeader.foreground#fcf6f7
  • sideBarTitle.foreground#fcf6f7
  • statusBar.background#140e0f
  • statusBar.border#140e0f
  • statusBar.debuggingBackground#f87171
  • statusBar.debuggingForeground#231a1c
  • statusBar.foreground#fcf6f7
  • statusBar.noFolderBackground#140e0f
  • statusBar.noFolderForeground#fcf6f7
  • statusBarItem.prominentBackground#f87171
  • statusBarItem.prominentHoverBackground#fb923c
  • statusBarItem.remoteBackground#ffb7c5
  • statusBarItem.remoteForeground#231a1c
  • tab.activeBackground#231a1c
  • tab.activeBorder#ffb7c5
  • tab.activeForeground#fcf6f7
  • tab.border#140e0f
  • tab.hoverBackground#312427
  • tab.hoverBorder#ffb7c550
  • tab.inactiveBackground#1a1314
  • tab.inactiveForeground#8d7a7d
  • terminal.ansiBlack#231a1c
  • terminal.ansiBlue#d8b4fe
  • terminal.ansiBrightBlack#8d7a7d
  • terminal.ansiBrightBlue#d8b4fe
  • terminal.ansiBrightCyan#818cf8
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#ffb7c5
  • terminal.ansiBrightRed#f87171
  • terminal.ansiBrightWhite#fcf6f7
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#818cf8
  • terminal.ansiGreen#34d399
  • terminal.ansiMagenta#ffb7c5
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#fcf6f7
  • terminal.ansiYellow#fde047
  • terminal.background#231a1c
  • terminal.border#140e0f
  • terminal.foreground#fcf6f7
  • titleBar.activeBackground#140e0f
  • titleBar.activeForeground#fcf6f7
  • titleBar.border#140e0f
  • titleBar.inactiveBackground#140e0f
  • titleBar.inactiveForeground#8d7a7d
  • walkThrough.embeddedEditorBackground#231a1c

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#d8b4fe
meta.diff, meta.diff.header#8d7a7d
markup.inserted#34d399
markup.deleted#f87171
markup.changed#fb923c
invalid.deprecated#fcf6f7underline italic
entity.name.filename#fde047
markup.error#f87171
markup.bold#fb923cbold
markup.heading#d8b4febold
markup.italic#fde047italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#818cf8
markup.inline.raw, markup.raw.restructuredtext#34d399
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ffb7c5
entity.name.directive.restructuredtext, markup.quote#fde047italic
meta.separator.markdown#8d7a7d
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#34d399
punctuation.definition.constant.restructuredtext#d8b4fe
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#d8b4fe
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#fcf6f7
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#fde047
entity.name.type.class, entity.name.class#818cf8
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#d8b4feitalic
entity.other.inherited-class#818cf8italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#8d7a7d
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ffb7c5
comment.block.documentation entity.name.type#818cf8italic
comment.block.documentation entity.name.type punctuation.definition.bracket#818cf8
comment.block.documentation variable#fb923citalic
constant, variable.other.constant#d8b4fe
constant.character.escape, constant.character.string.escape, constant.regexp#ffb7c5
entity.name.tag#ffb7c5
entity.other.attribute-name.parent-selector#ffb7c5
entity.other.attribute-name#34d399italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#34d399
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#fb923citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#34d399italic
meta.decorator variable.other.object#34d399
keyword, punctuation.definition.keyword#ffb7c5
keyword.control.new, keyword.operator.newbold
meta.selector#ffb7c5
support#818cf8italic
support.function.magic, support.variable, variable.other.predefined#d8b4fe
support.function, support.type.property-name
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#ffb7c5
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.terminator.expression.php, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#fcf6f7
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#ffb7c5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#818cf8
constant.other.date, constant.other.timestamp#fb923c
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ffb7c5
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#818cf8italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fb923c
storage.modifier#ffb7c5
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fde047
punctuation.definition.group.capture.regexp#ffb7c5
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f87171
punctuation.definition.character-class.regexp#818cf8
punctuation.definition.group.regexp#fb923c
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f87171
meta.assertion.look-ahead.regexp#34d399
string#fde047
punctuation.definition.string.begin, punctuation.definition.string.end#fde047ee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#818cf8ee
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#8d7a7d
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#fcf6f7
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#fb923citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#fcf6f7
meta.selectionset.graphql variable#fde047
meta.selectionset.graphql meta.arguments variable#fcf6f7
entity.name.fragment.graphql, variable.fragment.graphql#818cf8
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#fcf6f7
source.shell variable.other#d8b4fe
support.constant#d8b4fe
meta.scope.prerequisites.makefile#fde047
meta.attribute-selector.scss#fde047
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#fcf6f7
meta.preprocessor.haskell#8d7a7d
log.error#f87171bold
log.warning#fde047bold
comment, invalid, keyword, entity.other.attribute-nameitalic
comment, punctuation.definition.commentitalic
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.pythonitalic
stringitalic
storage.type
entity.name.class, meta.class.extends variable.other.readwrite
variable.parameter
variable.parameter.function.language.python
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-nameitalic
python.builtin.support.function
python.meta.function-call.builtin.support.function, python.meta.type.support.function-call, python.meta.variable.function-call.legacy.builtin
meta.type.support.inheritance.python
support.constant
support.type, support.class
support.other.variable
css.property-list.property-name
markup.bold.markdownbold
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
comment, punctuation.definition.commentitalic
Keyword, Storageitalic
keyword.controlitalic
entity.other.attribute-name#34d399italic
entity.name.method.jsitalic
variable.languageitalic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-nameitalic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.jsitalic
source.js constant.other.object.key.js string.unquoted.label.jsitalic
markup.italicitalic
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold stringbold
markup.quoteitalic
variable.otheritalic
entity.name.function#34d399
support.function#34d399italic
string#fde047