Skip to main content
CodingTheme

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#F8F8F2
  • activityBarBadge.background#E1623E
  • activityBarBadge.foreground#F8F8F2
  • badge.background#253340
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#0E1419
  • button.background#A24E36
  • button.foreground#F8F8F2
  • contrastBorder#191A21
  • debugToolBar.background#0E1419
  • debugToolBar.border#6272A4
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#253340
  • dropdown.border#6272A4
  • dropdown.foreground#F8F8F2
  • dropdown.listBackground#253340
  • editor.background#0E1419
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#253340
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#191A21
  • editor.lineHighlightBackground#253340
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBorder#FFB86C
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorCodeLens.foreground#6272A4
  • editorCursor.foreground#8BE9FD
  • editorError.foreground#FF5555
  • editorGroup.border#BD93F9
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#253340
  • editorGroupHeader.tabsBorder#574473
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#FFB86C80
  • editorHoverWidget.background#0E1419
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#6272A4
  • editorIndentGuide.background#424450
  • editorLineNumber.activeForeground#8BE9FD
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#50FA7B
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#BD93F9
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#FFB86C80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#F1FA8C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#50FA7B
  • editorSuggestWidget.background#0E1419
  • editorSuggestWidget.border#6272A4
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#253340
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#424450
  • editorWidget.background#0E1419
  • editorWidget.border#6272A4
  • editorWidget.resizeBorder#BD93F9
  • errorForeground#FF5555
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#6272A4
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#FFB86C
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#0E1419
  • input.border#253340
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#6272A4
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#E1623E
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#253340
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#44475A
  • list.focusBackground#253340
  • list.focusForeground#F8F8F2
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#253340
  • list.hoverForeground#F8F8F2
  • list.inactiveSelectionBackground#253340
  • list.inactiveSelectionForeground#F8F8F2
  • menu.selectionBackground#3A434D
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#BD93F990
  • notification.background#0E1419
  • notification.buttonBackground#253340
  • notification.buttonForeground#F8F8F2
  • notification.errorBackground#FF5555
  • notification.errorForeground#F8F8F2
  • notification.foreground#F8F8F2
  • notification.infoBackground#8BE9FD
  • notification.infoForeground#0E1419
  • notification.warningBackground#FFB86C
  • notification.warningForeground#0E1419
  • notificationCenter.border#6272A4
  • notificationCenterHeader.background#253340
  • notificationCenterHeader.foreground#F8F8F2
  • notificationLink.foreground#F8F8F2
  • notifications.background#0E1419
  • notifications.border#6272A4
  • notifications.foreground#F8F8F2
  • notificationToast.border#6272A4
  • panel.background#0E1419
  • panel.border#BD93F9
  • panelTitle.activeBorder#E1623E
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#6272A4
  • peekViewEditor.background#0E1419
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#0E1419
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#F8F8F2
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#253340
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#253340
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#BD93F9
  • pickerGroup.foreground#8BE9FD
  • progressBar.background#E1623E
  • selection.background#BD93F9
  • sideBar.background#0E1419
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#0E1419
  • statusBar.border#6272A4
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingBorder#6272A4
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#0E1419
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • tab.activeBackground#574473
  • tab.activeForeground#F8F8F2
  • tab.border#253340
  • tab.inactiveBackground#253340
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#44475A
  • terminal.ansiBlue#9C6FCF
  • terminal.ansiBrightBlack#656B84
  • terminal.ansiBrightBlue#BD93F9
  • terminal.ansiBrightCyan#8BE9FD
  • terminal.ansiBrightGreen#50FA7B
  • terminal.ansiBrightMagenta#E1623E
  • 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#F8F8F2
  • terminalCursor.background#0E1419
  • terminalCursor.foreground#2FD651
  • titleBar.activeBackground#253340
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#253340
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#253340
  • welcomePage.buttonHoverBackground#253340

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#BD93F9—
source#F8F8F2—
entity.name.type.class#50FA7B—
keyword.other.this, variable.language, variable.parameter.function.language.special#BD93F9—
entity.other.inherited-class#8BE9FD—
support.class.builtin#50FA7B—
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#8BE9FD—
comment.block.documentation variable#FFB86C—
constant#FFB86C—
variable.other.constant#BD93F9—
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6—
constant.other.date, constant.other.timestamp#FFB86C—
support.variable, variable.other.predefined#BD93F9—
meta.definition.function, meta.definition.method#50FA7B—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, variable.parameter#FFB86C—
meta.function-call.generic, meta.function-call.object, meta.function-call.static, keyword.operator.function.infix#8BE9FD—
meta.decorator variable.other.readwrite, meta.decorator variable.other.property, meta.decorator variable.other.object#50FA7B—
variable.other.object.property#BD93F9italic
support.function.magic#BD93F9—
keyword, punctuation.definition.keyword#FF79C6italic
keyword.control.new, keyword.operator.new—bold
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#FF79C6—
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#F8F8F2—
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#FF79C6—
string, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#F1FA8C—
storage#FF79C6italic
entity.name.type#8BE9FD—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C—
storage.modifier#FF79C6—
variable, support.variable.property#F8F8F2—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property#FFB86C—
meta.import variable.other.readwrite.alias#F8F8F2—
storage.type.c#8BE9FD—
punctuation.section.embedded.coffee#FF79C6—
meta.variable.assignment.destructured.object.coffee variable#FFB86C—
meta.variable.assignment.destructured.object.coffee variable variable#F8F8F2—
punctuation.definition.tag.cs#F8F8F2—
keyword.type.cs, storage.type.cs#8BE9FD—
meta.diff, meta.diff.header#6272A4—
markup.inserted#50FA7Bitalic
markup.deleted#FF5555italic
markup.changed#FFB86Citalic
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C—
markup.error#FF5555—
entity.name.function.elixir#50FA7Bitalic
constant.other.symbol.elixir, constant.language.symbol.elixir#8BE9FD—
entity.name.type.module.elixir#50FA7B—
variable.other.readwrite.module.elixir, variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#FFB86C—
punctuation.separator.method.elixir#FF79C6—
punctuation.section.embedded.elixir#FF79C6—
variable.other.anonymous.elixir punctuation.definition.variable.elixir#FF79C6—
punctuation.other.period.go, punctuation.other.colon.go#FF79C6—
source.go storage.type#8BE9FD—
entity.name.type.go#BD93F9—
entity.name.function.go#50FA7Bitalic
support.function.go#8BE9FD—
punctuation.colon.graphql#FF79C6—
variable.graphql, variable.arguments.graphql#F1FA8C—
support.type.graphql, support.type.builtin.graphql, support.type.enum.graphql, entity.scalar.graphql#8BE9FD—
entity.name.function.graphql#50FA7Bitalic
meta.selectionset.graphql variable.graphql, variable.parameter.graphql#FFB86C—
comment.line.graphql#6272A4—
string.block.description.graphql.DOCSTRING#6272A4—
meta.method.groovy#50FA7B—
source.groovy storage.type.def#FF79C6—
source.groovy storage.type, storage.type.groovy#8BE9FD—
keyword.operator.navigation.groovy#F8F8F2—
storage.type.haskell#8BE9FD—
meta.preprocessor.haskell#6272A4—
constant.language.empty-list.haskell#F8F8F2—
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx#FF79C6—
entity.name.tag#FF79C6—
entity.name.tag support.class.component.js, entity.name.tag support.class.component.tsx#FFFFFF—
meta.selector#FF79C6italic
entity.other.attribute-name.parent-selector#FF79C6—
meta.attribute-selector.scss#F1FA8C—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2—
entity.other.attribute-name#50FA7Bitalic
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#F8F8F2—
support.constant.property-value.css#8BE9FD—
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#8BE9FDitalic
italic#8BE9FDitalic
keyword.control.at-rule.media.scss, keyword.control.at-rule.media.scss punctuation.definition.keyword.scss#50FA7B—
meta.method-call.java meta.method#50FA7B—
storage.type.generic.java#F8F8F2—
source.java storage.type#8BE9FD—
keyword.operator.dereference.java, storage.modifier.import#F8F8F2—
keyword.operator.relational#F8F8F2italic
meta.delimiter.period#F8F8F2italic
support.variable.property.js#BD93F9—
variable.other.constant.js#8BE9FD—
support.class.console.js, support.type.object.module.js, support.class.promise.js, support.constant.json.js#50FA7B—
support.class.js#50FA7B—
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#50FA7B—
meta.function-call.js#8BE9FD—
support.function.any-method.lua#50FA7B—
punctuation.definition.variable.makefile#FF79C6—
entity.name.function.target.makefile#8BE9FDitalic
meta.scope.prerequisites.makefile#F1FA8C—
markup.underline—underline
markup.bold#FFB86Cbold
markup.heading#BD93F9bold
markup.italic#F1FA8Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD—
markup.inline.raw, markup.raw.restructuredtext#50FA7B—
markup.underline.link, markup.underline.link.image#8BE9FD—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79C6—
entity.name.directive.restructuredtext, markup.quote#F1FA8Citalic
quote#F1FA8Citalic
meta.separator.markdown#6272A4—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B—
punctuation.definition.constant.restructuredtext#BD93F9—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#BD93F9—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F8F8F2—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F1FA8C—
meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc#FF79C6—
meta.protocol-list.objc, meta.return-type.objc, storage.type.objc#8BE9FD—
storage.type.ocaml#8BE9FD—
constant.other.key.perl#F8F8F2—
variable.language punctuation.definition.variable.php#BD93F9—
meta.function.arguments variable.other.php#50FA7B—
meta.function-call.php#8BE9FD—
punctuation.section.embedded.end source.php#FF79C6—
storage.type.php#8BE9FD—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell#F8F8F2—
source.powershell entity.other.attribute-name#8BE9FD—
support.constant#BD93F9—
entity.name.function.python#50FA7Bitalic
meta.function-call.python support.type.python, meta.function-call.python support.function.builtin.python#8BE9FD—
punctuation.separator.period.python, punctuation.separator.colon.python, punctuation.separator.dict.python, punctuation.section.function.begin.python#FF79C6—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C—
punctuation.definition.group.capture.regexp#FF79C6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555—
punctuation.definition.character-class.regexp#8BE9FD—
punctuation.definition.group.regexp#FFB86C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555—
meta.assertion.look-ahead.regexp#50FA7B—
variable.other.readwrite.instance.ruby, variable.other.readwrite.instance.ruby punctuation.definition.variable.ruby#FFB86C—
variable.other.readwrite.class.ruby, variable.other.readwrite.class.ruby punctuation.definition.variable.ruby#FFB86C—
variable.other.constant.ruby#BD93F9—
entity.name.type.module.ruby#50FA7B—
entity.name.type.class.ruby#50FA7B—
entity.other.inherited-class.ruby#BD93F9—
support.class.ruby#BD93F9—
meta.function.method.with-arguments.ruby entity.name.function.ruby, meta.function.method.without-arguments.ruby entity.name.function.ruby#50FA7B—
variable.parameter.function.ruby#F8F8F2italic
variable.other.block.ruby#F8F8F2—
meta.function-call.ruby entity.name.function.ruby, support.function.kernel.ruby#F8F8F2italic
support.function.kernel.ruby#FF79C6—
punctuation.separator.method.ruby#FF79C6—
punctuation.section.embedded.end source.ruby#FF79C6—
constant.language.symbol.hashkey.ruby, constant.language.symbol.hashkey.parameter.function.ruby, constant.other.symbol.hashkey.parameter.function.ruby, constant.language.symbol.ruby, constant.other.symbol.hashkey.ruby, constant.other.symbol.ruby, punctuation.definition.constant.ruby, punctuation.definition.constant.hashkey.ruby#8BE9FD—
storage.class.std.rust, storage.type.core.rust#8BE9FD—
source.shell variable.other#BD93F9—
meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string#F8F8F2—
keyword.expressions-and-types.swift#BD93F9—
punctuation.function.swift#FF79C6—
keyword.primitive-datatypes.swift, storage.type.attribute.swift#8BE9FD—
meta.group.double.toml, meta.group.toml#FF79C6—
entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD—
support.variable.property.ts, support.variable.property.tsx#BD93F9—
variable.other.constant.ts, variable.other.constant.tsx#8BE9FD—
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#50FA7B—
support.class.ts, support.class.tsx#50FA7B—
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#50FA7Bitalic
meta.function-call.ts, meta.function-call.tsx#8BE9FD—
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#50FA7B—
support.type.primitive.ts, support.type.builtin.ts, entity.name.type.ts, support.type.primitive.tsx, support.type.builtin.tsx, entity.name.type.tsx#8BE9FD—
meta.tag.sgml.doctype.html#8BE9FDitalic
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#FFB86C—
punctuation.definition.typeparameters.begin.ts, punctuation.definition.typeparameters.end.ts, punctuation.definition.typeparameters.begin.tsx, punctuation.definition.typeparameters.end.tsx#FF79C6—
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#FF79C6—
entity.name.tag.yaml#8BE9FD—
variable.other.alias.yaml#50FA7Bunderline

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...