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#f7258510
  • activityBar.activeBorder#9a00fa
  • activityBar.background#343746
  • activityBar.foreground#ff3d9e
  • activityBar.inactiveForeground#06b6d4
  • activityBarBadge.background#ff79c6
  • activityBarBadge.foreground#f8f8f2
  • badge.background#F564A9
  • badge.foreground#080808
  • breadcrumb.activeSelectionForeground#f8f8f2
  • breadcrumb.background#272429
  • breadcrumb.focusForeground#f8f8f2
  • breadcrumb.foreground#06b6d4
  • breadcrumbPicker.background#191a21
  • button.background#44475a
  • button.foreground#ff79c6
  • button.secondaryBackground#282a36
  • button.secondaryForeground#f8f8f2
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222c
  • diffEditor.insertedTextBackground#50fa7b20
  • diffEditor.removedTextBackground#f7258550
  • dropdown.background#343746
  • dropdown.border#191a21
  • dropdown.foreground#f8f8f2
  • editor.background#1f222e
  • editor.findMatchBackground#ffb3ed
  • editor.findMatchHighlightBackground#ffffff40
  • editor.findRangeHighlightBackground#44475a75
  • editor.foldBackground#21222c80
  • editor.foreground#f8f8f2
  • editor.hoverHighlightBackground#8be9fd50
  • editor.lineHighlightBorder#44475a
  • editor.rangeHighlightBackground#f7258515
  • editor.selectionBackground#ffbeef60
  • editor.selectionHighlightBackground#ffbeef60
  • editor.snippetFinalTabstopHighlightBackground#282a36
  • editor.snippetFinalTabstopHighlightBorder#50fa7b
  • editor.snippetTabstopHighlightBackground#282a36
  • editor.snippetTabstopHighlightBorder#06b6d4
  • editor.wordHighlightBackground#c5fffe5d
  • editor.wordHighlightStrongBackground#50fa7b50
  • editorBracketHighlight.foreground1#f8f8f2
  • editorBracketHighlight.foreground2#ff79c6
  • editorBracketHighlight.foreground3#8be9fd
  • editorBracketHighlight.foreground4#50fa7b
  • editorBracketHighlight.foreground5#f72585
  • editorBracketHighlight.foreground6#ffb86c
  • editorBracketHighlight.unexpectedBracket.foreground#f72585
  • editorCodeLens.foreground#06b6d4
  • editorError.foreground#f72585
  • editorGroup.border#f72585
  • editorGroup.dropBackground#44475a70
  • editorGroupHeader.tabsBackground#242729
  • editorGutter.addedBackground#50fa7b80
  • editorGutter.deletedBackground#f7258580
  • editorGutter.modifiedBackground#8be9fd80
  • editorHoverWidget.background#f72585
  • editorHoverWidget.border#06b6d4
  • editorIndentGuide.activeBackground1#ff3d9e
  • editorIndentGuide.background1#ffffff1a
  • editorLineNumber.activeForeground#ff3d9e
  • editorLineNumber.foreground#06b6d4
  • editorLink.activeForeground#8be9fd
  • editorMarkerNavigation.background#21222c
  • editorOverviewRuler.addedForeground#50fa7b80
  • editorOverviewRuler.border#191a21
  • editorOverviewRuler.currentContentForeground#50fa7b
  • editorOverviewRuler.deletedForeground#f7258580
  • editorOverviewRuler.errorForeground#f7258580
  • editorOverviewRuler.incomingContentForeground#f72585
  • editorOverviewRuler.infoForeground#8be9fd80
  • editorOverviewRuler.modifiedForeground#8be9fd80
  • editorOverviewRuler.warningForeground#ffb86c80
  • editorOverviewRuler.wordHighlightForeground#8be8fd21
  • editorOverviewRuler.wordHighlightStrongForeground#50fa7a28
  • editorRuler.foreground#ffffff1a
  • editorSuggestWidget.background#21222c
  • editorSuggestWidget.foreground#f8f8f2
  • editorSuggestWidget.selectedBackground#44475a
  • editorWarning.foreground#8be9fd
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#21222c
  • errorForeground#f72585
  • extensionButton.prominentBackground#50fa7b90
  • extensionButton.prominentForeground#f8f8f2
  • extensionButton.prominentHoverBackground#50fa7b60
  • focusBorder#06b6d4
  • foreground#f8f8f2
  • gitDecoration.conflictingResourceForeground#ffb86c
  • gitDecoration.deletedResourceForeground#f72585
  • gitDecoration.ignoredResourceForeground#06b6d4
  • gitDecoration.modifiedResourceForeground#8be9fd
  • gitDecoration.untrackedResourceForeground#50fa7b
  • icon.foreground#e621a4
  • input.background#282a36
  • input.border#e621a4
  • input.foreground#f8f8f2
  • input.taffyForeground#06b6d4
  • inputOption.activeBorder#f72585
  • inputValidation.errorBorder#f72585
  • inputValidation.infoBorder#ff79c6
  • inputValidation.warningBorder#ffb86c
  • list.activeSelectionBackground#f72585
  • list.activeSelectionForeground#f8f8f2
  • list.dropBackground#44475a
  • list.errorForeground#f72585
  • list.focusBackground#44475a75
  • list.highlightForeground#8be9fd
  • list.hoverBackground#f72585
  • list.inactiveSelectionBackground#44475a75
  • list.warningForeground#ffb86c
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#f72585
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#50fa7b90
  • merge.incomingHeaderBackground#f7258590
  • panel.background#242729
  • panel.border#f72585
  • panelTitle.activeBorder#ff79c6
  • panelTitle.activeForeground#ff3d9e
  • panelTitle.inactiveForeground#06b6d4
  • peekView.border#44475a
  • peekViewEditor.background#282a36
  • peekViewEditor.matchHighlightBackground#f1fa8c80
  • peekViewResult.background#21222c
  • peekViewResult.fileForeground#f8f8f2
  • peekViewResult.lineForeground#f8f8f2
  • peekViewResult.matchHighlightBackground#f1fa8c80
  • peekViewResult.selectionBackground#44475a
  • peekViewResult.selectionForeground#f8f8f2
  • peekViewTitle.background#191a21
  • peekViewTitleDescription.foreground#06b6d4
  • peekViewTitleLabel.foreground#f8f8f2
  • pickerGroup.border#f72585
  • pickerGroup.foreground#8be9fd
  • progressBar.background#ff79c6
  • scrollbar.shadow#d40078
  • scrollbarSlider.activeBackground#f6019D
  • scrollbarSlider.background#7a0045
  • scrollbarSlider.hoverBackground#d40078
  • selection.background#f72585
  • settings.checkboxBackground#21222c
  • settings.checkboxBorder#191a21
  • settings.checkboxForeground#f8f8f2
  • settings.dropdownBackground#21222c
  • settings.dropdownBorder#191a21
  • settings.dropdownForeground#f8f8f2
  • settings.headerForeground#f8f8f2
  • settings.modifiedItemIndicator#ffb86c
  • settings.numberInputBackground#21222c
  • settings.numberInputBorder#191a21
  • settings.numberInputForeground#f8f8f2
  • settings.textInputBackground#21222c
  • settings.textInputBorder#191a21
  • settings.textInputForeground#f8f8f2
  • sideBar.background#161722
  • sideBar.border#9ee534
  • sideBarSectionHeader.background#9ee534
  • sideBarSectionHeader.border#242729
  • sideBarTitle.foreground#f8f8f2
  • statusBar.background#f72585
  • statusBar.border#240c46
  • statusBar.debuggingBackground#f72585
  • statusBar.debuggingForeground#191a21
  • statusBar.foreground#f8f8f2
  • statusBar.noFolderBackground#242729
  • statusBar.noFolderForeground#f8f8f2
  • statusBarItem.prominentBackground#f72585
  • statusBarItem.prominentHoverBackground#ffb86c
  • statusBarItem.remoteBackground#f72585
  • statusBarItem.remoteForeground#282a36
  • tab.activeBackground#242925
  • tab.activeBorderTop#f72585
  • tab.activeForeground#f8f8f2
  • tab.border#242729
  • tab.inactiveBackground#242729
  • tab.inactiveForeground#06b6d4
  • terminal.ansiBlack#21222c
  • terminal.ansiBlue#f72585
  • terminal.ansiBrightBlack#06b6d4
  • terminal.ansiBrightBlue#d6acff
  • terminal.ansiBrightCyan#a4ffff
  • terminal.ansiBrightGreen#69ff94
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#ff6e6e
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffa5
  • terminal.ansiCyan#8be9fd
  • terminal.ansiGreen#50fa7b
  • terminal.ansiMagenta#ff79c6
  • terminal.ansiRed#f72585
  • terminal.ansiWhite#f8f8f2
  • terminal.ansiYellow#f1fa8c
  • terminal.background#242729
  • terminal.border#f72585
  • terminal.foreground#f8f8f2
  • titleBar.activeBackground#242729
  • titleBar.activeForeground#f8f8f2
  • titleBar.inactiveBackground#242729
  • titleBar.inactiveForeground#ffa6c1
  • walkThrough.embeddedEditorBackground#f72585

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#f72585—
meta.diff, meta.diff.header#06b6d4—
markup.inserted#50FA7B—
markup.deleted#f72585—
markup.changed#FFB86C—
invalid#f72585underline italic
invalid.deprecated#4cc9f0underline italic
entity.name.filename#F1FA8C—
markup.error#f72585—
markup.underline—underline
markup.bold#FFB86Cbold
markup.heading#f72585bold
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
meta.separator.markdown#06b6d4—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B—
punctuation.definition.constant.restructuredtext#f72585—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#f72585—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#4cc9f0—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F1FA8C—
entity.name.type.class, entity.name.class#8BE9FD—
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#f72585italic
entity.other.inherited-class#8BE9FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#06b6d4—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6—
comment.block.documentation entity.name.type#8BE9FDitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD—
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#f72585—
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6—
entity.name.tag#FF79C6—
entity.other.attribute-name.parent-selector#FF79C6—
entity.other.attribute-name#50FA7Bitalic
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#50FA7B—
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#FFB86Citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7Bitalic
meta.decorator variable.other.object#50FA7B—
keyword, punctuation.definition.keyword#FF79C6—
keyword.control.new, keyword.operator.new—bold
meta.selector#FF79C6—
support#8BE9FDitalic
support.function.magic, support.variable, variable.other.predefined#f72585—
support.function, support.type.property-name——
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.taffy 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#FF79C6—
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#4cc9f0—
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#FF79C6—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD—
constant.other.date, constant.other.timestamp#FFB86C—
variable.other.alias.yaml#50FA7Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6—
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#8BE9FDitalic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#fff86c—
storage.modifier#FF79C6—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#f3ff74—
punctuation.definition.group.capture.regexp#FF79C6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#f72585—
punctuation.definition.character-class.regexp#8BE9FD—
punctuation.definition.group.regexp#FFB86C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#f72585—
meta.assertion.look-ahead.regexp#50FA7B—
string#F1FA8C—
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE—
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#06b6d4—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#CE97FC—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#FFB86Citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F8F8F2—
meta.selectionset.graphql variable#F1FA8C—
meta.selectionset.graphql meta.arguments variable#F8F8F2—
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD—
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#F8F8F2—
source.shell variable.other#f72585—
support.constant#f72585—
meta.scope.prerequisites.makefile#F1FA8C—
meta.attribute-selector.scss#F1FA8C—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2—
meta.preprocessor.haskell#032a9f—
log.error#f72585bold
log.warning#F1FA8Cbold
entity.other.attribute-name, entity.name.function, support.function, support.function.css, support.function.transform.css, entity.other.attribute-name.html, support.type.media-names.css, support.type.property-names.css, entity.other.attribute-name.jsx#29f5f1
variable.other.property.js, variable.other.class.js, variable.other.property.static.js#FFFFFF—
JSXNested, variable.other.readwrite.js, punctuation.definition.tag.jsx, punctuation.semi-colon, punctuation.colon#ffffff—
variable.graphql, string, punctuation.definition.string.begin, punctuation.definition.string.end, meta.attribute-selector.scss, meta.attribute-selector.css#ffc8dd—
entity.name.tag, keyword, storage, constant.length.units.css, source.inside-js.css.styled, keyword.other.unit.percentage.css, keyword.other.unit.px.css, keyword.other.unit.rem.css, constant.length.units.css, constant.percentage.units.css, constant.time.units.css, constant.angle.units.css, constant.numeric.css, punctuation.definition.keyword#FF6BCB—
support.type.property-name.media.css, meta.property-values.css#9A86FD
variable.parameter, variable.other.constant, support.variable, constant, support.constant#f2ff7a
support.class.component—
variable.other.constant.object.js#ffffff—
entity.name.type.parameter#FF03D5—
support, entity.name.type, meta.interface.ts, entity.other.inherited-class#ff38b9—
entity.name.type.class#8BE9FD—
variable.other.property.js, variable.scss#42e3ff—
variable.other.readwrite.js#ff38b9—
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—