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#1d1b26
  • activityBar.activeBorder#c084fc
  • activityBar.background#121017
  • activityBar.foreground#e9e6f0
  • activityBar.inactiveForeground#847e96
  • activityBarBadge.background#f472b6
  • activityBarBadge.foreground#1d1b26
  • badge.background#403b54
  • badge.foreground#e9e6f0
  • breadcrumb.activeSelectionForeground#e9e6f0
  • breadcrumb.background#1d1b26
  • breadcrumb.focusForeground#e9e6f0
  • breadcrumb.foreground#847e96
  • breadcrumbPicker.background#16141d
  • button.background#c084fc
  • button.foreground#1d1b26
  • button.hoverBackground#f472b6
  • button.secondaryBackground#403b54
  • button.secondaryForeground#e9e6f0
  • button.secondaryHoverBackground#272433
  • debugToolBar.background#16141d
  • diffEditor.insertedTextBackground#86efac20
  • diffEditor.removedTextBackground#fca5a540
  • dropdown.background#16141d
  • dropdown.border#403b54
  • dropdown.foreground#e9e6f0
  • editor.background#1d1b26
  • editor.findMatchBackground#fde04760
  • editor.findMatchHighlightBackground#e9e6f030
  • editor.findRangeHighlightBackground#403b5460
  • editor.foldBackground#1d1b26
  • editor.foreground#e9e6f0
  • editor.hoverHighlightBackground#a5f3fc30
  • editor.lineHighlightBackground#272433
  • editor.lineHighlightBorder#1d1b26
  • editor.rangeHighlightBackground#c084fc15
  • editor.selectionBackground#403b54
  • editor.selectionHighlightBackground#403b54b0
  • editor.snippetFinalTabstopHighlightBackground#1d1b26
  • editor.snippetFinalTabstopHighlightBorder#86efac
  • editor.snippetTabstopHighlightBackground#1d1b26
  • editor.snippetTabstopHighlightBorder#403b54
  • editor.wordHighlightBackground#a5f3fc30
  • editor.wordHighlightStrongBackground#86efac30
  • editorBracketHighlight.foreground1#e9e6f0
  • editorBracketHighlight.foreground2#f472b6
  • editorBracketHighlight.foreground3#a5f3fc
  • editorBracketHighlight.foreground4#86efac
  • editorBracketHighlight.foreground5#c084fc
  • editorBracketHighlight.foreground6#fed7aa
  • editorBracketHighlight.unexpectedBracket.foreground#fca5a5
  • editorCodeLens.foreground#847e96
  • editorCursor.foreground#c084fc
  • editorError.foreground#fca5a5
  • editorGroup.border#121017
  • editorGroup.dropBackground#403b5470
  • editorGroupHeader.noTabsBackground#16141d
  • editorGroupHeader.tabsBackground#16141d
  • editorGroupHeader.tabsBorder#121017
  • editorGutter.addedBackground#86efaccc
  • editorGutter.deletedBackground#fca5a5cc
  • editorGutter.modifiedBackground#a5f3fccc
  • editorHoverWidget.background#16141d
  • editorHoverWidget.border#403b54
  • editorLineNumber.activeForeground#c084fc
  • editorLineNumber.foreground#847e96
  • editorLink.activeForeground#a5f3fc
  • editorMarkerNavigation.background#16141d
  • editorOverviewRuler.addedForeground#86efacaa
  • editorOverviewRuler.border#121017
  • editorOverviewRuler.currentContentForeground#86efac
  • editorOverviewRuler.deletedForeground#fca5a5aa
  • editorOverviewRuler.errorForeground#fca5a5aa
  • editorOverviewRuler.incomingContentForeground#c084fc
  • editorOverviewRuler.infoForeground#a5f3fcaa
  • editorOverviewRuler.modifiedForeground#a5f3fcaa
  • editorOverviewRuler.selectionHighlightForeground#fed7aa
  • editorOverviewRuler.warningForeground#fde047aa
  • editorOverviewRuler.wordHighlightForeground#a5f3fc
  • editorOverviewRuler.wordHighlightStrongForeground#86efac
  • editorRuler.foreground#e9e6f01a
  • editorSuggestWidget.background#16141d
  • editorSuggestWidget.border#403b54
  • editorSuggestWidget.foreground#e9e6f0
  • editorSuggestWidget.selectedBackground#403b54
  • editorWarning.foreground#fde047
  • editorWhitespace.foreground#e9e6f01a
  • editorWidget.background#16141d
  • editorWidget.border#403b54
  • errorForeground#fca5a5
  • extensionButton.prominentBackground#c084fc
  • extensionButton.prominentForeground#1d1b26
  • extensionButton.prominentHoverBackground#f472b6
  • focusBorder#403b54
  • foreground#e9e6f0
  • gitDecoration.conflictingResourceForeground#fed7aa
  • gitDecoration.deletedResourceForeground#fca5a5
  • gitDecoration.ignoredResourceForeground#847e96
  • gitDecoration.modifiedResourceForeground#a5f3fc
  • gitDecoration.untrackedResourceForeground#86efac
  • inlineChat.regionHighlight#272433
  • input.background#1d1b26
  • input.border#403b54
  • input.foreground#e9e6f0
  • input.placeholderForeground#847e96
  • inputOption.activeBorder#c084fc
  • inputValidation.errorBorder#fca5a5
  • inputValidation.infoBorder#f472b6
  • inputValidation.warningBorder#fde047
  • list.activeSelectionBackground#403b54
  • list.activeSelectionForeground#e9e6f0
  • list.dropBackground#403b54
  • list.errorForeground#fca5a5
  • list.focusBackground#403b54a0
  • list.highlightForeground#a5f3fc
  • list.hoverBackground#272433
  • list.inactiveSelectionBackground#272433
  • list.warningForeground#fde047
  • listFilterWidget.background#16141d
  • listFilterWidget.noMatchesOutline#fca5a5
  • listFilterWidget.outline#403b54
  • menu.background#16141d
  • menu.foreground#e9e6f0
  • menu.separatorBackground#403b54
  • menubar.selectionBackground#272433
  • merge.currentHeaderBackground#86efac40
  • merge.incomingHeaderBackground#c084fc40
  • panel.background#1d1b26
  • panel.border#121017
  • panelTitle.activeBorder#c084fc
  • panelTitle.activeForeground#e9e6f0
  • panelTitle.inactiveForeground#847e96
  • peekView.border#403b54
  • peekViewEditor.background#1d1b26
  • peekViewEditor.matchHighlightBackground#fde04740
  • peekViewResult.background#16141d
  • peekViewResult.fileForeground#e9e6f0
  • peekViewResult.lineForeground#e9e6f0
  • peekViewResult.matchHighlightBackground#fde04740
  • peekViewResult.selectionBackground#403b54
  • peekViewResult.selectionForeground#e9e6f0
  • peekViewTitle.background#121017
  • peekViewTitleDescription.foreground#847e96
  • peekViewTitleLabel.foreground#e9e6f0
  • pickerGroup.border#403b54
  • pickerGroup.foreground#a5f3fc
  • progressBar.background#c084fc
  • scrollbar.shadow#12101733
  • selection.background#403b54
  • settings.checkboxBackground#16141d
  • settings.checkboxBorder#403b54
  • settings.checkboxForeground#e9e6f0
  • settings.dropdownBackground#16141d
  • settings.dropdownBorder#403b54
  • settings.dropdownForeground#e9e6f0
  • settings.headerForeground#e9e6f0
  • settings.modifiedItemIndicator#fed7aa
  • settings.numberInputBackground#1d1b26
  • settings.numberInputBorder#403b54
  • settings.numberInputForeground#e9e6f0
  • settings.textInputBackground#1d1b26
  • settings.textInputBorder#403b54
  • settings.textInputForeground#e9e6f0
  • sideBar.background#16141d
  • sideBar.border#121017
  • sideBarSectionHeader.background#16141d
  • sideBarSectionHeader.border#16141d
  • sideBarSectionHeader.foreground#e9e6f0
  • sideBarTitle.foreground#e9e6f0
  • statusBar.background#121017
  • statusBar.border#121017
  • statusBar.debuggingBackground#fca5a5
  • statusBar.debuggingForeground#1d1b26
  • statusBar.foreground#e9e6f0
  • statusBar.noFolderBackground#121017
  • statusBar.noFolderForeground#e9e6f0
  • statusBarItem.prominentBackground#fca5a5
  • statusBarItem.prominentHoverBackground#fed7aa
  • statusBarItem.remoteBackground#c084fc
  • statusBarItem.remoteForeground#1d1b26
  • tab.activeBackground#1d1b26
  • tab.activeBorder#c084fc
  • tab.activeForeground#e9e6f0
  • tab.border#121017
  • tab.hoverBackground#272433
  • tab.hoverBorder#c084fc50
  • tab.inactiveBackground#16141d
  • tab.inactiveForeground#847e96
  • terminal.ansiBlack#1d1b26
  • terminal.ansiBlue#c084fc
  • terminal.ansiBrightBlack#847e96
  • terminal.ansiBrightBlue#c084fc
  • terminal.ansiBrightCyan#a5f3fc
  • terminal.ansiBrightGreen#86efac
  • terminal.ansiBrightMagenta#f472b6
  • terminal.ansiBrightRed#fca5a5
  • terminal.ansiBrightWhite#e9e6f0
  • terminal.ansiBrightYellow#fde047
  • terminal.ansiCyan#a5f3fc
  • terminal.ansiGreen#86efac
  • terminal.ansiMagenta#f472b6
  • terminal.ansiRed#fca5a5
  • terminal.ansiWhite#e9e6f0
  • terminal.ansiYellow#fde047
  • terminal.background#1d1b26
  • terminal.border#121017
  • terminal.foreground#e9e6f0
  • titleBar.activeBackground#121017
  • titleBar.activeForeground#e9e6f0
  • titleBar.border#121017
  • titleBar.inactiveBackground#121017
  • titleBar.inactiveForeground#847e96
  • walkThrough.embeddedEditorBackground#1d1b26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#c084fc
meta.diff, meta.diff.header#847e96
markup.inserted#86efac
markup.deleted#fca5a5
markup.changed#fed7aa
invalid.deprecated#e9e6f0underline italic
entity.name.filename#fde047
markup.error#fca5a5
markup.bold#fed7aabold
markup.heading#c084fcbold
markup.italic#fde047italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#a5f3fc
markup.inline.raw, markup.raw.restructuredtext#86efac
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f472b6
entity.name.directive.restructuredtext, markup.quote#fde047italic
meta.separator.markdown#847e96
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#86efac
punctuation.definition.constant.restructuredtext#c084fc
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#c084fc
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#e9e6f0
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#a5f3fc
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#c084fcitalic
entity.other.inherited-class#a5f3fcitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#847e96
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#f472b6
comment.block.documentation entity.name.type#a5f3fcitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#a5f3fc
comment.block.documentation variable#fed7aaitalic
constant, variable.other.constant#c084fc
constant.character.escape, constant.character.string.escape, constant.regexp#f472b6
entity.name.tag#f472b6
entity.other.attribute-name.parent-selector#f472b6
entity.other.attribute-name#86efacitalic
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#86efac
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#fed7aaitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#86efacitalic
meta.decorator variable.other.object#86efac
keyword, punctuation.definition.keyword#f472b6
keyword.control.new, keyword.operator.newbold
meta.selector#f472b6
support#a5f3fcitalic
support.function.magic, support.variable, variable.other.predefined#c084fc
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#f472b6
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#e9e6f0
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#f472b6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#a5f3fc
constant.other.date, constant.other.timestamp#fed7aa
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#f472b6
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#a5f3fcitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fed7aa
storage.modifier#f472b6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#fde047
punctuation.definition.group.capture.regexp#f472b6
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#fca5a5
punctuation.definition.character-class.regexp#a5f3fc
punctuation.definition.group.regexp#fed7aa
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#fca5a5
meta.assertion.look-ahead.regexp#86efac
string#fde047
punctuation.definition.string.begin, punctuation.definition.string.end#fde047ee
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#a5f3fcee
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#847e96
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#e9e6f0
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#fed7aaitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#e9e6f0
meta.selectionset.graphql variable#fde047
meta.selectionset.graphql meta.arguments variable#e9e6f0
entity.name.fragment.graphql, variable.fragment.graphql#a5f3fc
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#e9e6f0
source.shell variable.other#c084fc
support.constant#c084fc
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#e9e6f0
meta.preprocessor.haskell#847e96
log.error#fca5a5bold
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#86efacitalic
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#86efac
support.function#86efacitalic
string#fde047