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#f6f6f4
  • activityBar.inactiveForeground#7b7f8b
  • activityBarBadge.background#f97583
  • activityBarBadge.foreground#f6f6f4
  • badge.background#44475A
  • badge.foreground#f6f6f4
  • breadcrumb.activeSelectionForeground#f6f6f4
  • breadcrumb.background#282A36
  • breadcrumb.focusForeground#f6f6f4
  • breadcrumb.foreground#7b7f8b
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#f6f6f4
  • button.secondaryBackground#282A36
  • button.secondaryForeground#f6f6f4
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#262626
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#f6f6f4
  • editor.background#282A36
  • editor.findMatchBackground#ffc07c80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#f6f6f4
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#44475A
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282A36
  • editor.snippetFinalTabstopHighlightBorder#a4e0a5
  • editor.snippetTabstopHighlightBackground#282A36
  • editor.snippetTabstopHighlightBorder#7b7f8b
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorBracketHighlight.foreground1#f6f6f4
  • editorBracketHighlight.foreground2#f97583
  • editorBracketHighlight.foreground3#97e1f1
  • editorBracketHighlight.foreground4#a4e0a5
  • editorBracketHighlight.foreground5#bf9eee
  • editorBracketHighlight.foreground6#ffc07c
  • editorBracketHighlight.unexpectedBracket.foreground#ee6666
  • editorCodeLens.foreground#7b7f8b
  • editorError.foreground#ee6666
  • editorGroup.border#bf9eee
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#50FA7B80
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#8BE9FD80
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#7b7f8b
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#7b7f8b
  • editorLink.activeForeground#97e1f1
  • editorMarkerNavigation.background#262626
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#a4e0a5
  • editorOverviewRuler.deletedForeground#FF555580
  • editorOverviewRuler.errorForeground#FF555580
  • editorOverviewRuler.incomingContentForeground#bf9eee
  • editorOverviewRuler.infoForeground#8BE9FD80
  • editorOverviewRuler.modifiedForeground#8BE9FD80
  • editorOverviewRuler.selectionHighlightForeground#ffc07c
  • editorOverviewRuler.warningForeground#ffc07c80
  • editorOverviewRuler.wordHighlightForeground#97e1f1
  • editorOverviewRuler.wordHighlightStrongForeground#a4e0a5
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#262626
  • editorSuggestWidget.foreground#f6f6f4
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#97e1f1
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#262626
  • errorForeground#ee6666
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#f6f6f4
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#7b7f8b
  • foreground#f6f6f4
  • gitDecoration.conflictingResourceForeground#ffc07c
  • gitDecoration.deletedResourceForeground#ee6666
  • gitDecoration.ignoredResourceForeground#7b7f8b
  • gitDecoration.modifiedResourceForeground#97e1f1
  • gitDecoration.untrackedResourceForeground#a4e0a5
  • inlineChat.regionHighlight#343746
  • input.background#282A36
  • input.border#191A21
  • input.foreground#f6f6f4
  • input.placeholderForeground#7b7f8b
  • inputOption.activeBorder#bf9eee
  • inputValidation.errorBorder#ee6666
  • inputValidation.infoBorder#f97583
  • inputValidation.warningBorder#ffc07c
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#f6f6f4
  • list.dropBackground#44475A
  • list.errorForeground#ee6666
  • list.focusBackground#44475A75
  • list.highlightForeground#97e1f1
  • list.hoverBackground#44475A75
  • list.inactiveSelectionBackground#44475A75
  • list.warningForeground#ffc07c
  • listFilterWidget.background#343746
  • listFilterWidget.noMatchesOutline#ee6666
  • listFilterWidget.outline#424450
  • merge.currentHeaderBackground#50FA7B90
  • merge.incomingHeaderBackground#BD93F990
  • panel.background#282A36
  • panel.border#bf9eee
  • panelTitle.activeBorder#f97583
  • panelTitle.activeForeground#f6f6f4
  • panelTitle.inactiveForeground#7b7f8b
  • peekView.border#44475A
  • peekViewEditor.background#282A36
  • peekViewEditor.matchHighlightBackground#F1FA8C80
  • peekViewResult.background#262626
  • peekViewResult.fileForeground#f6f6f4
  • peekViewResult.lineForeground#f6f6f4
  • peekViewResult.matchHighlightBackground#F1FA8C80
  • peekViewResult.selectionBackground#44475A
  • peekViewResult.selectionForeground#f6f6f4
  • peekViewTitle.background#191A21
  • peekViewTitleDescription.foreground#7b7f8b
  • peekViewTitleLabel.foreground#f6f6f4
  • pickerGroup.border#bf9eee
  • pickerGroup.foreground#97e1f1
  • progressBar.background#f97583
  • selection.background#bf9eee
  • settings.checkboxBackground#262626
  • settings.checkboxBorder#191A21
  • settings.checkboxForeground#f6f6f4
  • settings.dropdownBackground#262626
  • settings.dropdownBorder#191A21
  • settings.dropdownForeground#f6f6f4
  • settings.headerForeground#f6f6f4
  • settings.modifiedItemIndicator#ffc07c
  • settings.numberInputBackground#262626
  • settings.numberInputBorder#191A21
  • settings.numberInputForeground#f6f6f4
  • settings.textInputBackground#262626
  • settings.textInputBorder#191A21
  • settings.textInputForeground#f6f6f4
  • sideBar.background#262626
  • sideBarSectionHeader.background#282A36
  • sideBarSectionHeader.border#191A21
  • sideBarTitle.foreground#f6f6f4
  • statusBar.background#191A21
  • statusBar.debuggingBackground#ee6666
  • statusBar.debuggingForeground#191A21
  • statusBar.foreground#f6f6f4
  • statusBar.noFolderBackground#191A21
  • statusBar.noFolderForeground#f6f6f4
  • statusBarItem.prominentBackground#ee6666
  • statusBarItem.prominentHoverBackground#ffc07c
  • statusBarItem.remoteBackground#bf9eee
  • statusBarItem.remoteForeground#282A36
  • tab.activeBackground#282A36
  • tab.activeBorderTop#FF79C680
  • tab.activeForeground#f6f6f4
  • tab.border#191A21
  • tab.inactiveBackground#262626
  • tab.inactiveForeground#7b7f8b
  • terminal.ansiBlack#262626
  • terminal.ansiBlue#bf9eee
  • terminal.ansiBrightBlack#7b7f8b
  • terminal.ansiBrightBlue#d6b4f7
  • terminal.ansiBrightCyan#adf6f6
  • terminal.ansiBrightGreen#78f09a
  • terminal.ansiBrightMagenta#f49dda
  • terminal.ansiBrightRed#f07c7c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f6f6ae
  • terminal.ansiCyan#97e1f1
  • terminal.ansiGreen#a4e0a5
  • terminal.ansiMagenta#f97583
  • terminal.ansiRed#ee6666
  • terminal.ansiWhite#f6f6f4
  • terminal.ansiYellow#ffc07c
  • terminal.background#282A36
  • terminal.foreground#f6f6f4
  • titleBar.activeBackground#262626
  • titleBar.activeForeground#f6f6f4
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#7b7f8b
  • walkThrough.embeddedEditorBackground#262626

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#f97583—
emphasis—italic
strong—bold
header#bf9eee—
meta.diff, meta.diff.header#7b7f8b—
markup.inserted#a4e0a5—
markup.deleted#ee6666—
markup.changed#ffc07c—
invalid#ee6666italic
invalid.deprecated#f6f6f4italic
entity.name.filename#ffc07c—
markup.error#ee6666—
markup.bold#ffc07cbold
markup.heading#bf9eeebold
markup.italic#ffc07citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#97e1f1—
markup.inline.raw, markup.raw.restructuredtext#a4e0a5—
markup.underline.link, markup.underline.link.image#97e1f1—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#f97583—
entity.name.directive.restructuredtext, markup.quote#ffc07citalic
meta.separator.markdown#7b7f8b—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#a4e0a5—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#bf9eee—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#f6f6f4—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#ffc07c—
entity.name.type.class, entity.name.class#97e1f1normal
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#ffc07citalic
entity.other.inherited-class#97e1f1italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#7b7f8b—
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation#f97583—
comment.block.documentation entity.name.type#97e1f1italic
comment.block.documentation entity.name.type punctuation.definition.bracket#97e1f1—
comment.block.documentation variable#ffc07citalic
constant.language#AE81FF—
constant.character, constant.other#AE81FF—
constant.numeric#bf9eee—
constant.character, constant.other#AE81FF—
constant.character.escape, constant.character.string.escape, constant.regexp#a3f0ff—
entity.name.tag#f97583—
entity.other.attribute-name.parent-selector#f97583—
entity.other.attribute-name#a4e0a5italic
entity.name.function, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, keyword.operator.function.infix#a4e0a5—
variable.parameter#ffc07citalic
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#ffc07citalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#a4e0a5italic
meta.decorator variable.other.object#a4e0a5—
keyword.control.new, keyword.operator.new—bold
meta.selector#a3f0ff—
support#97e1f1italic
variable.other.predefined#bf9eeeregular
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, punctuation.separator.annotation#a3f0ff—
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, string.template meta.brace, string.template punctuation.accessor#f6f6f4—
punctuation.section.embedded#f97583—
entity.name.function#a4e0a5
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#f97583—
constant.other.date, constant.other.timestamp#ffc07c—
variable.other.alias.yaml#a4e0a5italic
storage, meta.implementation , meta.interface-or-protocol, source.groovy#f97583regular
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go, source.groovy, source.java, source.powershell entity.other.attribute-name, storage.class.std.rust#97e1f1italic
support.type, support.class#a3f0ffitalic
storage.type#a3f0ffitalic
storage.modifier#f97583—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#ffc07c—
punctuation.definition.group.capture.regexp#f97583—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#ee6666—
punctuation.definition.character-class.regexp#97e1f1—
punctuation.definition.group.regexp#ffc07c—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#ee6666—
meta.assertion.look-ahead.regexp#a4e0a5—
string#ffc07c—
punctuation.definition.string.begin, punctuation.definition.string.end#dee492—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#97e2f2—
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#7b7f8b—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#f6f6f4—
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#ffc07citalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#f6f6f4normal
meta.selectionset.graphql variable#ffc07c—
meta.selectionset.graphql meta.arguments variable#f6f6f4—
entity.name.fragment.graphql, variable.fragment.graphql#97e1f1—
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#f6f6f4—
source.shell variable.other#bf9eee—
support.constant#a3f0ffnormal
meta.scope.prerequisites.makefile#ffc07c—
meta.attribute-selector.scss#ffc07c—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#f6f6f4—
meta.preprocessor.haskell#7b7f8b—
log.error#ee6666bold
log.warning#ffc07cbold
support.function#a3f0ff
support.constant#a3f0ff
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type, support.constant.enum.variant.rust, constant.other.enum, variable.other.enummember, support.constant.enum#a3f0ff—
entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution#a3f0ff—