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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasis—italic
strong—bold
header#BD93F9—
meta.diff, meta.diff.header#6272A4—
markup.inserted#5FEA77—
markup.deleted#FF5555—
markup.changed#FFB86C—
invalid#FF5555underline italic
invalid.deprecated#F5F5EFunderline italic
entity.name.filename#EAF48C—
markup.error#FF5555—
markup.underline—underline
markup.bold#FFB86Cbold
markup.heading#BD93F9bold
markup.italic#EAF48Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD—
markup.inline.raw, markup.raw.restructuredtext#5FEA77—
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#EAF48Citalic
meta.separator.markdown#6272A4—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#5FEA77—
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#F5F5EF—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#EAF48C—
entity.name.type.class, entity.name.class#8BE9FDnormal
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#8BE9FDitalic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4regular
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#BD93F9—
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#5FEA77italic
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#5FEA77—
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#5FEA77italic
meta.decorator variable.other.object#5FEA77—
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#BD93F9regular
support.function, support.type.property-name—regular
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#F5F5EF—
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#5FEA77italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6regular
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#FFB86C—
storage.modifier#FF79C6—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#EAF48C—
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#5FEA77—
string#EAF48C—
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#FFB86C—
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#FFB86Cnormal
meta.selectionset.graphql variable#EAF48C—
meta.selectionset.graphql meta.arguments variable#FFB86C—
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#FFB86C—
source.shell variable.other#BD93F9—
support.constant#BD93F9normal
meta.scope.prerequisites.makefile#EAF48C—
meta.attribute-selector.scss#EAF48C—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#FFB86C—
meta.preprocessor.haskell#6272A4—
log.error#FF5555bold
log.warning#EAF48Cbold
———
———
storage.modifier, storage.type#5FEA77regular
storage.type.built-in#8BE9FDregular
meta.attribute, meta.member#939CE9regular
variable.other.constant.js, variable.other.object, variable.other.readwrite.js, variable.other#FFB86Cregular
variable.other.property, variable.other.object.property#939CE9regular
keyword, entity.name.operatorv#5FEA77regular
keyword.operator.logical, keyword.operator.comparison#FF5555regular
punctuation.separator.pointer-access, punctuation.separator.dot-access, punctuation.section#5FEA77regular
constant.numeric#EAF48Cregular
string, string.quoted.double#EAF48Cregular
entity.name.namespace#8BE9FDbold
meta.preprocessor, meta.preprocessor.macro#FF79C6bold
———
meta.function-call.c, meta.function.definition.c, entity.name.function.c, entity.name.function.definition.cpp, entity.name.function.call.cpp#5FEA77regular
entity.name.function.member.cpp#5FEA77italic
C/C++ Pro Theme by Xen - VS Code Theme