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#253340
  • activityBar.border#253340
  • activityBar.foreground#EBEBE6
  • activityBarBadge.background#F2ACDC
  • activityBarBadge.foreground#0E1419
  • badge.background#253340
  • badge.foreground#EBEBE6
  • breadcrumb.activeSelectionForeground#EBEBE6
  • breadcrumb.focusForeground#EBEBE6
  • breadcrumb.foreground#818eb6
  • breadcrumbPicker.background#0E1419
  • button.background#574473
  • button.foreground#EBEBE6
  • contrastBorder#191A21
  • debugToolBar.background#0E1419
  • debugToolBar.border#6272A4
  • diffEditor.insertedTextBackground#4EEE9420
  • diffEditor.removedTextBackground#F2A2A250
  • dropdown.background#253340
  • dropdown.border#6272A4
  • dropdown.foreground#EBEBE6
  • dropdown.listBackground#253340
  • editor.background#0E1419
  • editor.findMatchBackground#FBC78D80
  • editor.findMatchHighlightBackground#F2F2F240
  • editor.findRangeHighlightBackground#253340
  • editor.foreground#EBEBE6
  • editor.hoverHighlightBackground#191A21
  • editor.lineHighlightBackground#253340
  • editor.rangeHighlightBackground#9E92F215
  • editor.selectionBackground#555555
  • editor.selectionHighlightBackground#55555500
  • editor.selectionHighlightBorder#FBC78D
  • editor.wordHighlightBackground#5EE4F150
  • editor.wordHighlightStrongBackground#4EEE9450
  • editorCodeLens.foreground#818eb6
  • editorCursor.foreground#5EE4F1
  • editorError.foreground#F2A2A2
  • editorGroup.border#9E92F2
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#253340
  • editorGroupHeader.tabsBorder#574473
  • editorGutter.addedBackground#4EEE9480
  • editorGutter.deletedBackground#F2A2A280
  • editorGutter.modifiedBackground#FBC78D80
  • editorHoverWidget.background#0E1419
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#6272A4
  • editorIndentGuide.background#424450
  • editorLineNumber.activeForeground#5EE4F1
  • editorLineNumber.foreground#818eb6
  • editorLink.activeForeground#5EE4F1
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#4EEE9480
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#4EEE94
  • editorOverviewRuler.deletedForeground#F2A2A280
  • editorOverviewRuler.errorForeground#F2A2A280
  • editorOverviewRuler.incomingContentForeground#9E92F2
  • editorOverviewRuler.infoForeground#5EE4F180
  • editorOverviewRuler.modifiedForeground#FBC78D80
  • editorOverviewRuler.selectionHighlightForeground#FBC78D
  • editorOverviewRuler.warningForeground#F2E8B080
  • editorOverviewRuler.wordHighlightForeground#5EE4F1
  • editorOverviewRuler.wordHighlightStrongForeground#4EEE94
  • editorStickyScroll.border#424450
  • editorStickyScroll.shadow#44475A70
  • editorSuggestWidget.background#0E1419
  • editorSuggestWidget.border#6272A4
  • editorSuggestWidget.foreground#EBEBE6
  • editorSuggestWidget.selectedBackground#253340
  • editorWarning.foreground#5EE4F1
  • editorWhitespace.foreground#424450
  • editorWidget.background#0E1419
  • editorWidget.border#6272A4
  • editorWidget.resizeBorder#9E92F2
  • errorForeground#F2A2A2
  • extensionButton.prominentBackground#4EEE9490
  • extensionButton.prominentForeground#EBEBE6
  • extensionButton.prominentHoverBackground#4EEE9460
  • focusBorder#818eb6
  • foreground#EBEBE6
  • gitDecoration.conflictingResourceForeground#FBC78D
  • gitDecoration.deletedResourceForeground#F2A2A2
  • gitDecoration.ignoredResourceForeground#818eb6
  • gitDecoration.modifiedResourceForeground#FBC78D
  • gitDecoration.untrackedResourceForeground#4EEE94
  • input.background#0E1419
  • input.border#253340
  • input.foreground#EBEBE6
  • input.placeholderForeground#818eb6
  • inputOption.activeBorder#6272A4
  • inputValidation.errorBorder#F2A2A2
  • inputValidation.infoBorder#F2ACDC
  • inputValidation.warningBorder#FBC78D
  • list.activeSelectionBackground#253340
  • list.activeSelectionForeground#EBEBE6
  • list.dropBackground#555555
  • list.focusBackground#253340
  • list.focusForeground#EBEBE6
  • list.highlightForeground#5EE4F1
  • list.hoverBackground#253340
  • list.hoverForeground#EBEBE6
  • list.inactiveSelectionBackground#253340
  • list.inactiveSelectionForeground#EBEBE6
  • menu.selectionBackground#3A434D
  • merge.currentHeaderBackground#4EEE9490
  • merge.incomingHeaderBackground#9E92F290
  • notification.background#0E1419
  • notification.buttonBackground#253340
  • notification.buttonForeground#EBEBE6
  • notification.errorBackground#F2A2A2
  • notification.errorForeground#EBEBE6
  • notification.foreground#EBEBE6
  • notification.infoBackground#5EE4F1
  • notification.infoForeground#0E1419
  • notification.warningBackground#FBC78D
  • notification.warningForeground#0E1419
  • notificationCenter.border#6272A4
  • notificationCenterHeader.background#253340
  • notificationCenterHeader.foreground#EBEBE6
  • notificationLink.foreground#EBEBE6
  • notifications.background#0E1419
  • notifications.border#6272A4
  • notifications.foreground#EBEBE6
  • notificationToast.border#6272A4
  • panel.background#0E1419
  • panel.border#9E92F2
  • panelTitle.activeBorder#F2ACDC
  • panelTitle.activeForeground#EBEBE6
  • panelTitle.inactiveForeground#818eb6
  • peekView.border#6272A4
  • peekViewEditor.background#0E1419
  • peekViewEditor.matchHighlightBackground#F2E8B080
  • peekViewResult.background#0E1419
  • peekViewResult.fileForeground#EBEBE6
  • peekViewResult.lineForeground#EBEBE6
  • peekViewResult.matchHighlightBackground#F2E8B080
  • peekViewResult.selectionBackground#253340
  • peekViewResult.selectionForeground#EBEBE6
  • peekViewTitle.background#253340
  • peekViewTitleDescription.foreground#818eb6
  • peekViewTitleLabel.foreground#EBEBE6
  • pickerGroup.border#9E92F2
  • pickerGroup.foreground#5EE4F1
  • progressBar.background#F2ACDC
  • selection.background#9E92F2
  • sideBar.background#0E1419
  • sideBar.border#424450
  • sideBarTitle.foreground#EBEBE6
  • statusBar.background#0E1419
  • statusBar.border#6272A4
  • statusBar.debuggingBackground#F2A2A2
  • statusBar.debuggingBorder#6272A4
  • statusBar.debuggingForeground#EBEBE6
  • statusBar.foreground#EBEBE6
  • statusBar.noFolderBackground#0E1419
  • statusBar.noFolderForeground#EBEBE6
  • statusBarItem.prominentBackground#F2A2A2
  • statusBarItem.prominentHoverBackground#FBC78D
  • tab.activeBackground#434C55
  • tab.activeForeground#EBEBE6
  • tab.border#253340
  • tab.inactiveBackground#253340
  • tab.inactiveForeground#EBEBE6AA
  • terminal.ansiBlack#44475A
  • terminal.ansiBlue#9C6FCF
  • terminal.ansiBrightBlack#656B84
  • terminal.ansiBrightBlue#BD93F9
  • terminal.ansiBrightCyan#8BE9FD
  • terminal.ansiBrightGreen#50FA7B
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#F8F8F2
  • terminal.ansiBrightYellow#F1FA8C
  • terminal.ansiCyan#6AC5D3
  • terminal.ansiGreen#2FD651
  • terminal.ansiMagenta#DE559C
  • terminal.ansiRed#DE312B
  • terminal.ansiWhite#656B84
  • terminal.ansiYellow#D0D662
  • terminal.background#0E1419
  • terminal.foreground#EBEBE6
  • terminalCursor.background#0E1419
  • terminalCursor.foreground#2FD651
  • titleBar.activeBackground#253340
  • titleBar.activeForeground#EBEBE6
  • titleBar.inactiveBackground#253340
  • titleBar.inactiveForeground#818eb6
  • walkThrough.embeddedEditorBackground#253340
  • welcomePage.buttonHoverBackground#253340

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#9E92F2
source#EBEBE6
entity.name.type.class#4EEE94
keyword.other.this, variable.language, variable.parameter.function.language.special#9E92F2
entity.other.inherited-class#5EE4F1
support.class.builtin#4EEE94
comment, punctuation.definition.comment, unused.comment, wildcard.comment#818eb6
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#5EE4F1
comment.block.documentation variable#FBC78D
constant#FBC78D
variable.other.constant#9E92F2
constant.character.escape, constant.character.string.escape, constant.regexp#F2ACDC
constant.other.date, constant.other.timestamp#FBC78D
support.variable, variable.other.predefined#9E92F2
meta.definition.function, meta.definition.method#FBC78D
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter#5EE4F1
meta.function-call.generic, meta.function-call.object, meta.function-call.static, keyword.operator.function.infix#5EE4F1
meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object#FBC78D
support.function.magic#9E92F2
keyword, punctuation.definition.keyword#F2ACDC
keyword.control.new, keyword.operator.newbold
entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.definition.entity.other.inherited-class, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, punctuation.separator.annotation, punctuation.accessor#F2ACDC
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.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, string.template meta.brace#EBEBE6
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.end#F2ACDC
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F2E8B0
storage#F2ACDC
entity.name.type#5EE4F1
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FBC78D
storage.modifier#F2ACDC
variable, support.variable.property#EBEBE6
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property#FBC78D
meta.import variable.other.readwrite.alias#EBEBE6
storage.type.c#5EE4F1
punctuation.section.embedded.coffee#F2ACDC
meta.variable.assignment.destructured.object.coffee variable#FBC78D
meta.variable.assignment.destructured.object.coffee variable variable#EBEBE6
punctuation.definition.tag.cs#EBEBE6
keyword.type.cs, storage.type.cs#5EE4F1
meta.diff, meta.diff.header#818eb6
markup.inserted#4EEE94
markup.deleted#F2A2A2
markup.changed#FBC78D
invalid#F2A2A2underline italic
invalid.deprecated#EBEBE6underline italic
entity.name.filename#F2E8B0
markup.error#F2A2A2
entity.name.function.elixir#4EEE94
constant.other.symbol.elixir#5EE4F1
entity.name.type.module.elixir#4EEE94
variable.other.readwrite.module.elixir, variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#FBC78D
punctuation.separator.method.elixir#F2ACDC
punctuation.section.embedded.elixir#F2ACDC
variable.other.anonymous.elixir punctuation.definition.variable.elixir#F2ACDC
punctuation.other.period.go, punctuation.other.colon.go#F2ACDC
source.go storage.type#5EE4F1
entity.name.type.go#9E92F2
entity.name.function.go#4EEE94
support.function.go#5EE4F1
punctuation.colon.graphql#F2ACDC
variable.graphql, variable.arguments.graphql#F2E8B0
support.type.graphql, support.type.builtin.graphql, support.type.enum.graphql, entity.scalar.graphql#5EE4F1
entity.name.function.graphql#4EEE94
meta.selectionset.graphql variable.graphql, variable.parameter.graphql#FBC78D
meta.method.groovy#4EEE94
source.groovy storage.type.def#F2ACDC
source.groovy storage.type, storage.type.groovy#5EE4F1
keyword.operator.navigation.groovy#EBEBE6
storage.type.haskell#5EE4F1
meta.preprocessor.haskell#818eb6
constant.language.empty-list.haskell#EBEBE6
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx#F2ACDC
entity.name.tag#F2ACDC
entity.name.tag support.class.component.js, entity.name.tag support.class.component.tsx#F2F2F2
meta.selector#F2ACDC
entity.other.attribute-name.parent-selector#F2ACDC
meta.attribute-selector.scss#F2E8B0
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#EBEBE6
entity.other.attribute-name#4EEE94
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#EBEBE6
support.constant.property-value.css#5EE4F1
keyword.control.at-rule.media.scss, keyword.control.at-rule.media.scss punctuation.definition.keyword.scss#4EEE94
meta.method-call.java meta.method#4EEE94
storage.type.generic.java#EBEBE6
source.java storage.type#5EE4F1
keyword.operator.dereference.java, storage.modifier.import#EBEBE6
support.variable.property.js#9E92F2
support.class.console.js, support.type.object.module.js, support.class.promise.js, support.constant.json.js#4EEE94
support.class.js#4EEE94
variable.other.constant.js#5EE4F1
meta.object.member.js, meta.object-literal.key.js#5EE4F1
meta.object-literal.key.js entity.name.function.js, meta.var.expr.js meta.definition.variable.js entity.name.function.js, meta.definition.property.js entity.name.function.js#4EEE94
meta.function-call.js#5EE4F1
meta.object-literal.key, string.json support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#5EE4F1
support.function.any-method.lua#4EEE94
punctuation.definition.variable.makefile#F2ACDC
entity.name.function.target.makefile#5EE4F1
meta.scope.prerequisites.makefile#F2E8B0
markup.underlineunderline
markup.bold#FBC78Dbold
markup.heading#9E92F2bold
markup.italic#F2E8B0italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#5EE4F1
markup.inline.raw, markup.raw.restructuredtext#4EEE94
markup.underline.link, markup.underline.link.image#5EE4F1
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#F2ACDC
entity.name.directive.restructuredtext, markup.quote#F2E8B0italic
meta.separator.markdown#818eb6
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#4EEE94
punctuation.definition.constant.restructuredtext#9E92F2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#9E92F2
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#EBEBE6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F2E8B0
meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc#F2ACDC
meta.protocol-list.objc, meta.return-type.objc, storage.type.objc#5EE4F1
storage.type.ocaml#5EE4F1
constant.other.key.perl#EBEBE6
variable.language punctuation.definition.variable.php#9E92F2
meta.function.arguments variable.other.php#4EEE94
meta.function-call.php#5EE4F1
punctuation.section.embedded.end source.php#F2ACDC
storage.type.php#5EE4F1
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#EBEBE6
source.powershell entity.other.attribute-name#5EE4F1
support.constant#9E92F2
entity.name.function.python#4EEE94
meta.function-call.python support.type.python, meta.function-call.python support.function.builtin.python#5EE4F1
punctuation.separator.period.python, punctuation.separator.colon.python, punctuation.separator.dict.python, punctuation.section.function.begin.python#F2ACDC
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F2E8B0
punctuation.definition.group.capture.regexp#F2ACDC
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#F2A2A2
punctuation.definition.character-class.regexp#5EE4F1
punctuation.definition.group.regexp#FBC78D
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F2A2A2
meta.assertion.look-ahead.regexp#4EEE94
variable.other.readwrite.instance.ruby, variable.other.readwrite.instance.ruby punctuation.definition.variable.ruby#FBC78D
variable.other.readwrite.class.ruby, variable.other.readwrite.class.ruby punctuation.definition.variable.ruby#5EE4F1
support.class.ruby#4EEE94
variable.other.constant.ruby#5EE4F1
meta.function.method.with-arguments.ruby entity.name.function.ruby, meta.function.method.without-arguments.ruby entity.name.function.ruby#4EEE94
variable.other.block.ruby#FBC78D
meta.function-call.ruby entity.name.function.ruby, support.function.kernel.ruby#5EE4F1
punctuation.separator.method.ruby#F2ACDC
punctuation.section.embedded.end source.ruby#F2ACDC
constant.language.symbol.hashkey.ruby, constant.language.symbol.ruby, constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby, punctuation.definition.constant.hashkey.ruby#9E92F2
storage.class.std.rust, storage.type.core.rust#5EE4F1
source.shell variable.other#9E92F2
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string#EBEBE6
keyword.expressions-and-types.swift#9E92F2
punctuation.function.swift#F2ACDC
keyword.primitive-datatypes.swift, storage.type.attribute.swift#5EE4F1
meta.group.double.toml, meta.group.toml#F2ACDC
entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#5EE4F1
support.variable.property.ts, support.variable.property.tsx#9E92F2
variable.other.constant.ts, variable.other.constant.tsx#5EE4F1
support.class.console.ts, support.type.object.module.ts, support.class.promise.ts, support.constant.json.ts, support.class.console.tsx, support.type.object.module.tsx, support.class.promise.tsx, support.constant.json.tsx#4EEE94
support.class.ts, support.class.tsx#4EEE94
meta.object-literal.key.ts entity.name.function.ts, meta.var.expr.ts meta.definition.variable.ts entity.name.function.ts, meta.definition.property.ts entity.name.function.ts, meta.object-literal.key.tsx entity.name.function.tsx, meta.var.expr.tsx meta.definition.variable.tsx entity.name.function.tsx, meta.definition.property.tsx entity.name.function.tsx#FBC78D
meta.function-call.ts, meta.function-call.tsx#5EE4F1
entity.name.type.alias.ts, entity.name.type.interface.ts, entity.name.type.enum.ts, entity.name.type.alias.tsx, entity.name.type.interface.tsx, entity.name.type.enum.tsx#4EEE94
support.type.primitive.ts, support.type.builtin.ts, entity.name.type.ts, support.type.primitive.tsx, support.type.builtin.tsx, entity.name.type.tsx#4EEE94
meta.type.parameters.ts support.type.primitive.ts, meta.type.parameters.ts entity.name.type.ts, meta.type.parameters.tsx support.type.primitive.tsx, meta.type.parameters.tsx entity.name.type.tsx#5EE4F1
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx#F2ACDC
punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.separator.key-value.mapping.yaml, support.other.chomping-indicator.yaml#F2ACDC
entity.name.tag.yaml#5EE4F1
variable.other.alias.yaml#4EEE94underline