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#FC3AA810
  • activityBar.activeBorder#A855F780
  • activityBar.background#343746
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#A855F7
  • activityBarBadge.foreground#F8F8F2
  • badge.background#44475A
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#111112
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#F8F8F2
  • button.secondaryBackground#111112
  • button.secondaryForeground#F8F8F2
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#00BCDD20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#F8F8F2
  • editor.background#111112
  • editor.findMatchBackground#ED783980
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#0a6bf350
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#FC3AA815
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#111112
  • editor.snippetFinalTabstopHighlightBorder#00BCDD
  • editor.snippetTabstopHighlightBackground#111112
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#0a6bf350
  • editor.wordHighlightStrongBackground#00BCDD50
  • editorBracketHighlight.foreground1#F8F8F2
  • editorBracketHighlight.foreground2#A855F7
  • editorBracketHighlight.foreground3#0a6bf3
  • editorBracketHighlight.foreground4#00BCDD
  • editorBracketHighlight.foreground5#FC3AA8
  • editorBracketHighlight.foreground6#ED7839
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#FC3AA8
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#00BCDD80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#0a6bf380
  • editorHoverWidget.background#111112
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#0a6bf3
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#00BCDD80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#00BCDD
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#FC3AA8
  • editorOverviewRuler.infoForeground#0a6bf380
  • editorOverviewRuler.modifiedForeground#0a6bf380
  • editorOverviewRuler.selectionHighlightForeground#ED7839
  • editorOverviewRuler.warningForeground#ED783980
  • editorOverviewRuler.wordHighlightForeground#0a6bf3
  • editorOverviewRuler.wordHighlightStrongForeground#00BCDD
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#0a6bf3
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#FF5555
  • extensionButton.prominentBackground#00BCDD90
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#00BCDD60
  • focusBorder#6272A4
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#ED7839
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#0a6bf3
  • gitDecoration.untrackedResourceForeground#00BCDD
  • input.background#111112
  • input.border#191A21
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#FC3AA8
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#A855F7
  • inputValidation.warningBorder#ED7839
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#0a6bf3
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ED7839
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#00BCDD90
  • merge.incomingHeaderBackground#FC3AA890
  • panel.background#111112
  • panel.border#FC3AA8
  • panelTitle.activeBorder#A855F7
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#111112
  • peekViewEditor.matchHighlightBackground#ED783980
  • peekViewResult.background#21222C
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#F8F8F2
  • peekViewResult.matchHighlightBackground#ED783980
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#FC3AA8
  • pickerGroup.foreground#0a6bf3
  • progressBar.background#A855F7
  • selection.background#FC3AA8
  • settings.checkboxBackground#21222C
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#21222C
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#ED7839
  • settings.numberInputBackground#21222C
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#21222C
  • settings.textInputBorder#191A21
  • settings.textInputForeground#F8F8F2
  • sideBar.background#21222C
  • sideBarSectionHeader.background#111112
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#191A21
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#ED7839
  • statusBarItem.remoteBackground#FC3AA8
  • statusBarItem.remoteForeground#111112
  • tab.activeBackground#111112
  • tab.activeBorderTop#A855F780
  • tab.activeForeground#F8F8F2
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#FC3AA8
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#D6ACFF
  • terminal.ansiBrightCyan#A4FFFF
  • terminal.ansiBrightGreen#69FF94
  • terminal.ansiBrightMagenta#FF92DF
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFFFA5
  • terminal.ansiCyan#0a6bf3
  • terminal.ansiGreen#00BCDD
  • terminal.ansiMagenta#A855F7
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#ED7839
  • terminal.background#111112
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#21222C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#FC3AA8
meta.diff, meta.diff.header#6272A4
markup.inserted#00BCDD
markup.deleted#FF5555
markup.changed#ED7839
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#ED7839
markup.error#FF5555
markup.underlineunderline
markup.bold#ED7839bold
markup.heading#FC3AA8bold
markup.italic#ED7839italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#0a6bf3
markup.inline.raw, markup.raw.restructuredtext#00BCDD
markup.underline.link, markup.underline.link.image#0a6bf3
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#A855F7
entity.name.directive.restructuredtext, markup.quote#ED7839italic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#00BCDD
punctuation.definition.constant.restructuredtext#FC3AA8
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#FC3AA8
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#ED7839
entity.name.type.class, entity.name.class#0a6bf3normal
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#FC3AA8italic
entity.other.inherited-class#0a6bf3italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#A855F7
comment.block.documentation entity.name.type#0a6bf3italic
comment.block.documentation entity.name.type punctuation.definition.bracket#0a6bf3
comment.block.documentation variable#ED7839italic
constant, variable.other.constant#FC3AA8
constant.character.escape, constant.character.string.escape, constant.regexp#A855F7
entity.name.tag#A855F7
entity.other.attribute-name.parent-selector#A855F7
entity.other.attribute-name#00BCDDitalic
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#00BCDD
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#ED7839italic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#00BCDDitalic
meta.decorator variable.other.object#00BCDD
keyword, punctuation.definition.keyword#A855F7
keyword.control.new, keyword.operator.newbold
meta.selector#A855F7
support#0a6bf3italic
support.function.magic, support.variable, variable.other.predefined#FC3AA8regular
support.function, support.type.property-nameregular
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#A855F7
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#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.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#A855F7
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#0a6bf3
constant.other.date, constant.other.timestamp#ED7839
variable.other.alias.yaml#00BCDDitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#A855F7regular
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#0a6bf3italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#ED7839
storage.modifier#A855F7
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ED7839
punctuation.definition.group.capture.regexp#A855F7
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF5555
punctuation.definition.character-class.regexp#0a6bf3
punctuation.definition.group.regexp#ED7839
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555
meta.assertion.look-ahead.regexp#00BCDD
string#ED7839
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#6272A4
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F8F8F2
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ED7839italic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F8F8F2normal
meta.selectionset.graphql variable#ED7839
meta.selectionset.graphql meta.arguments variable#F8F8F2
entity.name.fragment.graphql, variable.fragment.graphql#0a6bf3
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#FC3AA8
support.constant#FC3AA8normal
meta.scope.prerequisites.makefile#ED7839
meta.attribute-selector.scss#ED7839
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2
meta.preprocessor.haskell#6272A4
log.error#FF5555bold
log.warning#ED7839bold