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#BD93F910
  • activityBar.activeBorder#FF79C680
  • activityBar.background#343746
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#6272A4
  • activityBarBadge.background#FF79C6
  • activityBarBadge.foreground#F8F8F2
  • badge.background#44475A
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#0B0B0B
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#6272A4
  • breadcrumbPicker.background#0B0B0B
  • button.background#44475A
  • button.foreground#F8F8F2
  • button.secondaryBackground#0B0B0B
  • button.secondaryForeground#F8F8F2
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#0B0B0B
  • diffEditor.insertedTextBackground#7bb25620
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#0B0B0B
  • dropdown.foreground#F8F8F2
  • editor.background#0B0B0B
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#0B0B0B80
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#0B0B0B
  • editor.snippetFinalTabstopHighlightBorder#7bb256
  • editor.snippetTabstopHighlightBackground#0B0B0B
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#7bb25650
  • editorBracketHighlight.foreground1#F8F8F2
  • editorBracketHighlight.foreground2#FF79C6
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#7bb256
  • editorBracketHighlight.foreground5#BD93F9
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketHighlight.unexpectedBracket.foreground#FF5555
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#BD93F9
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#0B0B0B
  • editorGutter.addedBackground#7bb25680
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#0B0B0B
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#6272A4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#0B0B0B
  • editorOverviewRuler.addedForeground#7bb25680
  • editorOverviewRuler.border#0B0B0B
  • editorOverviewRuler.currentContentForeground#7bb256
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#BD93F9
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#FFB86C
  • editorOverviewRuler.warningForeground#FFB86C80
  • editorOverviewRuler.wordHighlightForeground#8BE9FD
  • editorOverviewRuler.wordHighlightStrongForeground#7bb256
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#0B0B0B
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#0B0B0B
  • errorForeground#FF5555
  • extensionButton.prominentBackground#7bb25690
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#7bb25660
  • focusBorder#BD93F9
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#8BE9FD
  • gitDecoration.untrackedResourceForeground#7bb256
  • inlineChat.regionHighlight#343746
  • input.background#0B0B0B
  • input.border#BD93F9
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#BD93F9
  • inputValidation.errorBorder#FF5555
  • inputValidation.infoBorder#FF79C6
  • inputValidation.warningBorder#FFB86C
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#44475A
  • list.errorForeground#FF5555
  • list.focusBackground#44475A75
  • list.highlightForeground#8BE9FD
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#FFB86C
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#FF5555
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#7bb25690
  • merge.incomingHeaderBackground#BD93F990
  • panel.background#0B0B0B
  • panel.border#BD93F9
  • panelTitle.activeBorder#BD93F9
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272A4
  • peekView.border#44475A
  • peekViewEditor.background#0B0B0B
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#0B0B0B
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#F8F8F2
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#0B0B0B
  • peekViewTitleDescription.foreground#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#BD93F9
  • pickerGroup.foreground#BD93F9
  • progressBar.background#BD93F9
  • selection.background#BD93F9
  • settings.checkboxBackground#0B0B0B
  • settings.checkboxBorder#0B0B0B
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#0B0B0B
  • settings.dropdownBorder#0B0B0B
  • settings.dropdownForeground#F8F8F2
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#FFB86C
  • settings.numberInputBackground#0B0B0B
  • settings.numberInputBorder#0B0B0B
  • settings.numberInputForeground#F8F8F2
  • settings.textInputBackground#0B0B0B
  • settings.textInputBorder#0B0B0B
  • settings.textInputForeground#F8F8F2
  • sideBar.background#0B0B0B
  • sideBarSectionHeader.background#0B0B0B
  • sideBarSectionHeader.border#0B0B0B
  • sideBarTitle.foreground#F8F8F2
  • statusBar.background#0B0B0B
  • statusBar.debuggingBackground#FF5555
  • statusBar.debuggingForeground#0B0B0B
  • statusBar.foreground#F8F8F2
  • statusBar.noFolderBackground#0B0B0B
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#FFB86C
  • statusBarItem.remoteBackground#BD93F9
  • statusBarItem.remoteForeground#0B0B0B
  • tab.activeBackground#0B0B0B
  • tab.activeBorderTop#BD93F9
  • tab.activeForeground#F8F8F2
  • tab.border#0B0B0B
  • tab.inactiveBackground#0B0B0B
  • tab.inactiveForeground#6272A4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#BD93F9
  • 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#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#FF79C6
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#7bb256
  • terminal.background#0B0B0B
  • terminal.border#BD93F9
  • terminal.foreground#F8F8F2
  • titleBar.activeBackground#0B0B0B
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#0B0B0B
  • titleBar.inactiveForeground#6272A4
  • walkThrough.embeddedEditorBackground#0B0B0B

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#BD93F9
meta.diff, meta.diff.header#6272A4
markup.inserted#7bb256
markup.deleted#FF5555
markup.changed#FFB86C
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C
markup.error#FF5555
markup.underlineunderline
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#7bb256
markup.underline.link, markup.underline.link.image#8BE9FDitalic
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#BD93F9italic
entity.name.directive.restructuredtext, markup.quote#F1FA8Citalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#7bb256
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
entity.name.type.class, entity.name.class#6989d0normal
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#BD93F9italic
entity.other.inherited-class#6989d0italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#BD93F9italic
comment.block.documentation entity.name.type#8BE9FDitalic
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FDitalic
comment.block.documentation variable#FFB86Citalic
constant, variable.other.constant#BD93F9
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6italic
entity.name.tag#FF79C6
entity.other.attribute-name.parent-selector#FF79C6
entity.other.attribute-name#7bb256italic
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#6989d0
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#6989d0italic
meta.decorator variable.other.object#7bb256
keyword, punctuation.definition.keyword#BD93F9
keyword.control.new, keyword.operator.newbold
meta.selector#FF79C6
support#6989d0italic
support.function.magic, support.variable, variable.other.predefined#BD93F9regular
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#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#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#FF79C6
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#6989d0
constant.other.date, constant.other.timestamp#7bb256
variable.other.alias.yaml#7bb256italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#BD93F9regular
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#6989d0italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#BD93F9
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C
punctuation.definition.group.capture.regexp#BD93F9
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#7bb256
string#7bb256
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#6272A4italic
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#FFB86Citalic
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#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#BD93F9
support.constant#BD93F9normal
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#6272A4
log.error#FF5555bold
log.warning#F1FA8Cbold