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#2E8364
  • activityBarBadge.foreground#F8F8F2
  • badge.background#44475A
  • badge.foreground#F8F8F2
  • breadcrumb.activeSelectionForeground#F8F8F2
  • breadcrumb.background#282A36
  • breadcrumb.focusForeground#F8F8F2
  • breadcrumb.foreground#6272a4
  • breadcrumbPicker.background#191A21
  • button.background#44475A
  • button.foreground#F8F8F2
  • button.secondaryBackground#282A36
  • button.secondaryForeground#F8F8F2
  • button.secondaryHoverBackground#343746
  • debugToolBar.background#21222C
  • diffEditor.insertedTextBackground#50FA7B20
  • diffEditor.removedTextBackground#FF555550
  • dropdown.background#343746
  • dropdown.border#191A21
  • dropdown.foreground#F8F8F2
  • dropdown.listBackground#000000
  • editor.background#282A36
  • editor.findMatchBackground#FFB86C80
  • editor.findMatchHighlightBackground#FFFFFF40
  • editor.findRangeHighlightBackground#44475A75
  • editor.foldBackground#21222C80
  • editor.foreground#F8F8F2
  • editor.hoverHighlightBackground#8BE9FD50
  • editor.lineHighlightBorder#44475A
  • editor.rangeHighlightBackground#BD93F915
  • editor.selectionBackground#2c398f
  • editor.selectionHighlightBackground#424450
  • editor.snippetFinalTabstopHighlightBackground#282A36
  • editor.snippetFinalTabstopHighlightBorder#1E90FF
  • editor.snippetTabstopHighlightBackground#282A36
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#8BE9FD50
  • editor.wordHighlightStrongBackground#50FA7B50
  • editorBracketHighlight.foreground1#F8F8F2
  • editorBracketHighlight.foreground2#FF79C6
  • editorBracketHighlight.foreground3#8BE9FD
  • editorBracketHighlight.foreground4#50FA7B
  • editorBracketHighlight.foreground5#BD93F9
  • editorBracketHighlight.foreground6#FFB86C
  • editorBracketHighlight.unexpectedBracket.foreground#ADFF2F
  • editorCodeLens.foreground#6272A4
  • editorError.foreground#FF5555
  • editorGroup.border#bd93f9
  • editorGroup.dropBackground#44475A70
  • editorGroupHeader.tabsBackground#191A21
  • editorGutter.addedBackground#cfec26
  • editorGutter.deletedBackground#FF555580
  • editorGutter.modifiedBackground#15c252
  • editorHoverWidget.background#282A36
  • editorHoverWidget.border#6272A4
  • editorIndentGuide.activeBackground#FFFFFF45
  • editorIndentGuide.background#FFFFFF1A
  • editorLineNumber.foreground#a8b3a986
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#21222C
  • editorOverviewRuler.addedForeground#50FA7B80
  • editorOverviewRuler.border#191A21
  • editorOverviewRuler.currentContentForeground#1E90FF
  • 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#1E90FF
  • editorRuler.foreground#FFFFFF1A
  • editorSuggestWidget.background#21222C
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.highlightForeground#8be9fd
  • editorSuggestWidget.selectedBackground#44475A
  • editorWarning.foreground#8BE9FD
  • editorWhitespace.foreground#FFFFFF1A
  • editorWidget.background#21222C
  • errorForeground#6A9955
  • extensionButton.prominentBackground#50FA7B90
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#50FA7B60
  • focusBorder#6272A4
  • foreground#646764
  • gitDecoration.addedResourceForeground#cfec26
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#15c252
  • gitDecoration.untrackedResourceForeground#bf34e4
  • icon.foreground#2E8364
  • inlineChat.regionHighlight#343746
  • input.background#282A36
  • input.border#191A21
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272A4
  • inputOption.activeBorder#BD93F9
  • inputOption.hoverBackground#5a5d5e80
  • inputValidation.errorBorder#6A9955
  • inputValidation.infoBorder#1E90FF
  • inputValidation.warningBorder#FFB86C
  • keybindingLabel.background#808080
  • list.activeSelectionBackground#44475A
  • list.activeSelectionForeground#F8F8F2
  • list.dropBackground#44475A
  • list.errorForeground#2E8364
  • list.filterMatchBackground#ffffff
  • list.filterMatchBorder#000000
  • 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#50FA7B90
  • merge.incomingHeaderBackground#BD93F990
  • notificationLink.foreground#6A9955
  • notificationsInfoIcon.foreground#7FFFD4
  • notificationsWarningIcon.foreground#fc8baa
  • panel.background#282A36
  • panel.border#6A9955
  • panelTitle.activeBorder#6A9955
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#6272a4
  • 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#6272A4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#fa93a6
  • pickerGroup.foreground#6A9955
  • problemsInfoIcon.foreground#2E8364
  • problemsWarningIcon.foreground#fc8baa
  • progressBar.background#78e3ff
  • quickInputList.focusIconForeground#000000f7
  • sash.hoverBorder#6272a4
  • selection.background#BD93F9
  • 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#21222C
  • sideBar.dropBackground#44475afa
  • sideBarSectionHeader.background#282A36
  • 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.hoverBackground#fffffffa
  • statusBarItem.prominentBackground#FF5555
  • statusBarItem.prominentHoverBackground#fffffffa
  • statusBarItem.remoteBackground#BD93F9
  • statusBarItem.remoteForeground#282A36
  • symbolIcon.constructorForeground#b180d7
  • symbolIcon.enumeratorMemberForeground#75beff
  • symbolIcon.eventForeground#b180d7
  • symbolIcon.functionForeground#b180d7
  • symbolIcon.interfaceForeground#75beff
  • symbolIcon.methodForeground#b180d7
  • symbolIcon.propertyForeground#75beff
  • symbolIcon.typeParameterForeground#75beff
  • symbolIcon.variableForeground#75beff
  • tab.activeBackground#282A36
  • tab.activeBorderTop#FF79C680
  • tab.activeForeground#F8F8F2
  • tab.border#191A21
  • tab.inactiveBackground#21222C
  • tab.inactiveForeground#6272a4
  • tab.unfocusedInactiveForeground#6272a4
  • terminal.ansiBlack#21222C
  • terminal.ansiBlue#1E90FF
  • terminal.ansiBrightBlack#6272A4
  • terminal.ansiBrightBlue#d6acff
  • terminal.ansiBrightCyan#6A9955
  • terminal.ansiBrightGreen#1E90FF
  • terminal.ansiBrightMagenta#ff92df
  • terminal.ansiBrightRed#FF6E6E
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#DCDCAA
  • terminal.ansiCyan#edcf18
  • terminal.ansiGreen#9aa09aa6
  • terminal.ansiMagenta#6A9955
  • terminal.ansiRed#FF5555
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#0236fa
  • terminal.background#282A36
  • terminal.foreground#F8F8F2
  • textBlockQuote.border#007acc
  • titleBar.activeBackground#21222C
  • titleBar.activeForeground#F8F8F2
  • titleBar.inactiveBackground#191A21
  • titleBar.inactiveForeground#6272A4
  • toolbar.hoverBackground#5a5d5e
  • walkThrough.embeddedEditorBackground#21222C
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#BD93F9
meta.diff, meta.diff.header#6272A4
markup.inserted#1E90FF
markup.deleted#6A9955
markup.changed#FFB86C
invalid#6A9955underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#DCDCAA
markup.error#FF5555
markup.underlineunderline
markup.bold#FFB86Cbold
markup.heading#BD93F9bold
markup.italic#DCDCAAitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#1E90FF
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#1E90FF
entity.name.directive.restructuredtext, markup.quote#DCDCAAitalic
meta.separator.markdown#6272A4
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#1E90FF
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#DCDCAA
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#6272A4
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#6A9955
entity.name.tag#6A9955
entity.other.attribute-name.parent-selector#FF79C6
entity.other.attribute-name#CE9178italic
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#1E90FF
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#1E90FFitalic
meta.decorator variable.other.object#1E90FF
keyword, punctuation.definition.keyword#6A9955
keyword.control.new, keyword.operator.newbold
meta.selector#FF79C6
support#3ce9beitalic
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#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#7FFFD4regular
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#DCDCAA
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#1E90FF
string#DCDCAA
punctuation.definition.string.begin, punctuation.definition.string.end#DCDCAA
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#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#DCDCAA
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#DCDCAA
meta.attribute-selector.scss#DCDCAA
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#DCDCAAbold