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#1a1b26
  • activityBar.activeBorder#bb9af3
  • activityBar.background#16161e
  • activityBar.foreground#a9b1d6
  • activityBar.inactiveForeground#565f89
  • activityBarBadge.background#ff007c
  • activityBarBadge.foreground#1a1b26
  • badge.background#2f3549
  • badge.foreground#a9b1d6
  • breadcrumb.activeSelectionForeground#a9b1d6
  • breadcrumb.background#1a1b26
  • breadcrumb.focusForeground#a9b1d6
  • breadcrumb.foreground#565f89
  • breadcrumbPicker.background#16161e
  • button.background#bb9af3
  • button.foreground#1a1b26
  • button.hoverBackground#ff007c
  • button.secondaryBackground#2f3549
  • button.secondaryForeground#a9b1d6
  • button.secondaryHoverBackground#20212e
  • debugToolBar.background#16161e
  • diffEditor.insertedTextBackground#9ece6a20
  • diffEditor.removedTextBackground#f7768e40
  • dropdown.background#16161e
  • dropdown.border#2f3549
  • dropdown.foreground#a9b1d6
  • editor.background#1a1b26
  • editor.findMatchBackground#e0af6860
  • editor.findMatchHighlightBackground#a9b1d630
  • editor.findRangeHighlightBackground#2f354960
  • editor.foldBackground#1a1b26
  • editor.foreground#a9b1d6
  • editor.hoverHighlightBackground#7dcfff30
  • editor.lineHighlightBackground#20212e
  • editor.lineHighlightBorder#1a1b26
  • editor.rangeHighlightBackground#bb9af315
  • editor.selectionBackground#2f3549
  • editor.selectionHighlightBackground#2f3549b0
  • editor.snippetFinalTabstopHighlightBackground#1a1b26
  • editor.snippetFinalTabstopHighlightBorder#9ece6a
  • editor.snippetTabstopHighlightBackground#1a1b26
  • editor.snippetTabstopHighlightBorder#2f3549
  • editor.wordHighlightBackground#7dcfff30
  • editor.wordHighlightStrongBackground#9ece6a30
  • editorBracketHighlight.foreground1#a9b1d6
  • editorBracketHighlight.foreground2#ff007c
  • editorBracketHighlight.foreground3#7dcfff
  • editorBracketHighlight.foreground4#9ece6a
  • editorBracketHighlight.foreground5#bb9af3
  • editorBracketHighlight.foreground6#ff9e64
  • editorBracketHighlight.unexpectedBracket.foreground#f7768e
  • editorCodeLens.foreground#565f89
  • editorCursor.foreground#bb9af3
  • editorError.foreground#f7768e
  • editorGroup.border#16161e
  • editorGroup.dropBackground#2f354970
  • editorGroupHeader.noTabsBackground#16161e
  • editorGroupHeader.tabsBackground#16161e
  • editorGroupHeader.tabsBorder#16161e
  • editorGutter.addedBackground#9ece6acc
  • editorGutter.deletedBackground#f7768ecc
  • editorGutter.modifiedBackground#7dcfffcc
  • editorHoverWidget.background#16161e
  • editorHoverWidget.border#2f3549
  • editorLineNumber.activeForeground#bb9af3
  • editorLineNumber.foreground#565f89
  • editorLink.activeForeground#7dcfff
  • editorMarkerNavigation.background#16161e
  • editorOverviewRuler.addedForeground#9ece6aaa
  • editorOverviewRuler.border#16161e
  • editorOverviewRuler.currentContentForeground#9ece6a
  • editorOverviewRuler.deletedForeground#f7768eaa
  • editorOverviewRuler.errorForeground#f7768eaa
  • editorOverviewRuler.incomingContentForeground#bb9af3
  • editorOverviewRuler.infoForeground#7dcfffaa
  • editorOverviewRuler.modifiedForeground#7dcfffaa
  • editorOverviewRuler.selectionHighlightForeground#ff9e64
  • editorOverviewRuler.warningForeground#e0af68aa
  • editorOverviewRuler.wordHighlightForeground#7dcfff
  • editorOverviewRuler.wordHighlightStrongForeground#9ece6a
  • editorRuler.foreground#a9b1d61a
  • editorSuggestWidget.background#16161e
  • editorSuggestWidget.border#2f3549
  • editorSuggestWidget.foreground#a9b1d6
  • editorSuggestWidget.selectedBackground#2f3549
  • editorWarning.foreground#e0af68
  • editorWhitespace.foreground#a9b1d61a
  • editorWidget.background#16161e
  • editorWidget.border#2f3549
  • errorForeground#f7768e
  • extensionButton.prominentBackground#bb9af3
  • extensionButton.prominentForeground#1a1b26
  • extensionButton.prominentHoverBackground#ff007c
  • focusBorder#2f3549
  • foreground#a9b1d6
  • gitDecoration.conflictingResourceForeground#ff9e64
  • gitDecoration.deletedResourceForeground#f7768e
  • gitDecoration.ignoredResourceForeground#565f89
  • gitDecoration.modifiedResourceForeground#7dcfff
  • gitDecoration.untrackedResourceForeground#9ece6a
  • inlineChat.regionHighlight#20212e
  • input.background#1a1b26
  • input.border#2f3549
  • input.foreground#a9b1d6
  • input.placeholderForeground#565f89
  • inputOption.activeBorder#bb9af3
  • inputValidation.errorBorder#f7768e
  • inputValidation.infoBorder#ff007c
  • inputValidation.warningBorder#e0af68
  • list.activeSelectionBackground#2f3549
  • list.activeSelectionForeground#a9b1d6
  • list.dropBackground#2f3549
  • list.errorForeground#f7768e
  • list.focusBackground#2f3549a0
  • list.highlightForeground#7dcfff
  • list.hoverBackground#20212e
  • list.inactiveSelectionBackground#20212e
  • list.warningForeground#e0af68
  • listFilterWidget.background#16161e
  • listFilterWidget.noMatchesOutline#f7768e
  • listFilterWidget.outline#2f3549
  • menu.background#16161e
  • menu.foreground#a9b1d6
  • menu.separatorBackground#2f3549
  • menubar.selectionBackground#20212e
  • merge.currentHeaderBackground#9ece6a40
  • merge.incomingHeaderBackground#bb9af340
  • panel.background#1a1b26
  • panel.border#16161e
  • panelTitle.activeBorder#bb9af3
  • panelTitle.activeForeground#a9b1d6
  • panelTitle.inactiveForeground#565f89
  • peekView.border#2f3549
  • peekViewEditor.background#1a1b26
  • peekViewEditor.matchHighlightBackground#e0af6840
  • peekViewResult.background#16161e
  • peekViewResult.fileForeground#a9b1d6
  • peekViewResult.lineForeground#a9b1d6
  • peekViewResult.matchHighlightBackground#e0af6840
  • peekViewResult.selectionBackground#2f3549
  • peekViewResult.selectionForeground#a9b1d6
  • peekViewTitle.background#16161e
  • peekViewTitleDescription.foreground#565f89
  • peekViewTitleLabel.foreground#a9b1d6
  • pickerGroup.border#2f3549
  • pickerGroup.foreground#7dcfff
  • progressBar.background#bb9af3
  • scrollbar.shadow#16161e33
  • selection.background#2f3549
  • settings.checkboxBackground#16161e
  • settings.checkboxBorder#2f3549
  • settings.checkboxForeground#a9b1d6
  • settings.dropdownBackground#16161e
  • settings.dropdownBorder#2f3549
  • settings.dropdownForeground#a9b1d6
  • settings.headerForeground#a9b1d6
  • settings.modifiedItemIndicator#ff9e64
  • settings.numberInputBackground#1a1b26
  • settings.numberInputBorder#2f3549
  • settings.numberInputForeground#a9b1d6
  • settings.textInputBackground#1a1b26
  • settings.textInputBorder#2f3549
  • settings.textInputForeground#a9b1d6
  • sideBar.background#16161e
  • sideBar.border#16161e
  • sideBarSectionHeader.background#16161e
  • sideBarSectionHeader.border#16161e
  • sideBarSectionHeader.foreground#a9b1d6
  • sideBarTitle.foreground#a9b1d6
  • statusBar.background#16161e
  • statusBar.border#16161e
  • statusBar.debuggingBackground#f7768e
  • statusBar.debuggingForeground#1a1b26
  • statusBar.foreground#a9b1d6
  • statusBar.noFolderBackground#16161e
  • statusBar.noFolderForeground#a9b1d6
  • statusBarItem.prominentBackground#f7768e
  • statusBarItem.prominentHoverBackground#ff9e64
  • statusBarItem.remoteBackground#bb9af3
  • statusBarItem.remoteForeground#1a1b26
  • tab.activeBackground#1a1b26
  • tab.activeBorder#bb9af3
  • tab.activeForeground#a9b1d6
  • tab.border#16161e
  • tab.hoverBackground#20212e
  • tab.hoverBorder#bb9af350
  • tab.inactiveBackground#16161e
  • tab.inactiveForeground#565f89
  • terminal.ansiBlack#1a1b26
  • terminal.ansiBlue#bb9af3
  • terminal.ansiBrightBlack#565f89
  • terminal.ansiBrightBlue#bb9af3
  • terminal.ansiBrightCyan#7dcfff
  • terminal.ansiBrightGreen#9ece6a
  • terminal.ansiBrightMagenta#ff007c
  • terminal.ansiBrightRed#f7768e
  • terminal.ansiBrightWhite#a9b1d6
  • terminal.ansiBrightYellow#e0af68
  • terminal.ansiCyan#7dcfff
  • terminal.ansiGreen#9ece6a
  • terminal.ansiMagenta#ff007c
  • terminal.ansiRed#f7768e
  • terminal.ansiWhite#a9b1d6
  • terminal.ansiYellow#e0af68
  • terminal.background#1a1b26
  • terminal.border#16161e
  • terminal.foreground#a9b1d6
  • titleBar.activeBackground#16161e
  • titleBar.activeForeground#a9b1d6
  • titleBar.border#16161e
  • titleBar.inactiveBackground#16161e
  • titleBar.inactiveForeground#565f89
  • walkThrough.embeddedEditorBackground#1a1b26

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#bb9af3—
meta.diff, meta.diff.header#565f89—
markup.inserted#9ece6a—
markup.deleted#f7768e—
markup.changed#ff9e64—
invalid.deprecated#a9b1d6underline italic
entity.name.filename#e0af68—
markup.error#f7768e—
markup.bold#ff9e64bold
markup.heading#bb9af3bold
markup.italic#e0af68italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#7dcfff—
markup.inline.raw, markup.raw.restructuredtext#9ece6a—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#ff007c—
entity.name.directive.restructuredtext, markup.quote#e0af68italic
meta.separator.markdown#565f89—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#9ece6a—
punctuation.definition.constant.restructuredtext#bb9af3—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bb9af3—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#a9b1d6—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#e0af68—
entity.name.type.class, entity.name.class#7dcfff
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#bb9af3italic
entity.other.inherited-class#7dcfffitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#565f89—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#ff007c—
comment.block.documentation entity.name.type#7dcfffitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#7dcfff—
comment.block.documentation variable#ff9e64italic
constant, variable.other.constant#bb9af3—
constant.character.escape, constant.character.string.escape, constant.regexp#ff007c—
entity.name.tag#ff007c—
entity.other.attribute-name.parent-selector#ff007c—
entity.other.attribute-name#9ece6aitalic
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#9ece6a—
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#ff9e64italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#9ece6aitalic
meta.decorator variable.other.object#9ece6a—
keyword, punctuation.definition.keyword#ff007c—
keyword.control.new, keyword.operator.new—bold
meta.selector#ff007c—
support#7dcfffitalic
support.function.magic, support.variable, variable.other.predefined#bb9af3
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#ff007c—
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#a9b1d6—
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#ff007c—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#7dcfff—
constant.other.date, constant.other.timestamp#ff9e64—
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#ff007c
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#7dcfffitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ff9e64—
storage.modifier#ff007c—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#e0af68—
punctuation.definition.group.capture.regexp#ff007c—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f7768e—
punctuation.definition.character-class.regexp#7dcfff—
punctuation.definition.group.regexp#ff9e64—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f7768e—
meta.assertion.look-ahead.regexp#9ece6a—
string#e0af68—
punctuation.definition.string.begin, punctuation.definition.string.end#e0af68ee—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#7dcfffee—
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#565f89—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#a9b1d6—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ff9e64italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#a9b1d6
meta.selectionset.graphql variable#e0af68—
meta.selectionset.graphql meta.arguments variable#a9b1d6—
entity.name.fragment.graphql, variable.fragment.graphql#7dcfff—
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#a9b1d6—
source.shell variable.other#bb9af3—
support.constant#bb9af3
meta.scope.prerequisites.makefile#e0af68—
meta.attribute-selector.scss#e0af68—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#a9b1d6—
meta.preprocessor.haskell#565f89—
log.error#f7768ebold
log.warning#e0af68bold
comment, invalid, keyword, entity.other.attribute-name—italic
comment, punctuation.definition.comment—italic
string.quoted.docstring.multi.python, string.quoted.docstring.multi.python keyword.control.flow.python—italic
string—italic
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-name—italic
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.markdown—bold
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
comment, punctuation.definition.comment—italic
Keyword, Storage—italic
keyword.control—italic
entity.other.attribute-name#9ece6aitalic
entity.name.method.js—italic
variable.language—italic
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name—italic
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js—italic
source.js constant.other.object.key.js string.unquoted.label.js—italic
markup.italic—italic
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 string—bold
markup.quote—italic
variable.other—italic
entity.name.function#9ece6a—
support.function#9ece6aitalic
string#e0af68—