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#855fbf10
  • activityBar.activeBorder#c13f8e80
  • activityBar.background#F8F8F2
  • activityBar.foreground#282A36
  • activityBar.inactiveForeground#6171a3
  • activityBarBadge.background#c13f8e
  • activityBarBadge.foreground#282A36
  • badge.background#c5c8de
  • badge.foreground#282A36
  • breadcrumb.activeSelectionForeground#282A36
  • breadcrumb.background#F8F8F2
  • breadcrumb.focusForeground#282A36
  • breadcrumb.foreground#6171a3
  • breadcrumbPicker.background#F8F8F2
  • button.background#c5c8de
  • button.foreground#282A36
  • button.secondaryBackground#F8F8F2
  • button.secondaryForeground#282A36
  • button.secondaryHoverBackground#F8F8F2
  • debugToolBar.background#F8F8F2
  • diffEditor.insertedTextBackground#00850420
  • diffEditor.removedTextBackground#d82f3950
  • dropdown.background#F8F8F2
  • dropdown.border#F8F8F2
  • dropdown.foreground#282A36
  • editor.background#F8F8F2
  • editor.findMatchBackground#a0651b80
  • editor.findMatchHighlightBackground#72727240
  • editor.findRangeHighlightBackground#c5c8de75
  • editor.foldBackground#F8F8F280
  • editor.foreground#282A36
  • editor.hoverHighlightBackground#007e9050
  • editor.rangeHighlightBackground#855fbf15
  • editor.selectionBackground#c5c8de
  • editor.selectionHighlightBackground#F8F8F2
  • editor.snippetFinalTabstopHighlightBackground#F8F8F2
  • editor.snippetFinalTabstopHighlightBorder#008504
  • editor.snippetTabstopHighlightBackground#F8F8F2
  • editor.snippetTabstopHighlightBorder#6171a3
  • editor.wordHighlightBackground#007e9050
  • editor.wordHighlightStrongBackground#00850450
  • editorBracketHighlight.foreground1#282A36
  • editorBracketHighlight.foreground2#c13f8e
  • editorBracketHighlight.foreground3#007e90
  • editorBracketHighlight.foreground4#008504
  • editorBracketHighlight.foreground5#855fbf
  • editorBracketHighlight.foreground6#a0651b
  • editorBracketHighlight.unexpectedBracket.foreground#d82f39
  • editorCodeLens.foreground#6171a3
  • editorError.foreground#d82f39
  • editorGroup.border#855fbf
  • editorGroup.dropBackground#F8F8F2
  • editorGroupHeader.tabsBackground#F8F8F2
  • editorGutter.addedBackground#00850480
  • editorGutter.deletedBackground#d82f3980
  • editorGutter.modifiedBackground#007e9080
  • editorHoverWidget.background#F8F8F2
  • editorHoverWidget.border#6171a3
  • editorIndentGuide.activeBackground#72727245
  • editorIndentGuide.background#7272721a
  • editorLineNumber.foreground#6171a3
  • editorLink.activeForeground#007e90
  • editorMarkerNavigation.background#F8F8F2
  • editorOverviewRuler.addedForeground#00850480
  • editorOverviewRuler.border#F8F8F2
  • editorOverviewRuler.currentContentForeground#008504
  • editorOverviewRuler.deletedForeground#d82f3980
  • editorOverviewRuler.errorForeground#d82f3980
  • editorOverviewRuler.incomingContentForeground#855fbf
  • editorOverviewRuler.infoForeground#007e9080
  • editorOverviewRuler.modifiedForeground#007e9080
  • editorOverviewRuler.selectionHighlightForeground#a0651b
  • editorOverviewRuler.warningForeground#a0651b80
  • editorOverviewRuler.wordHighlightForeground#007e90
  • editorOverviewRuler.wordHighlightStrongForeground#008504
  • editorRuler.foreground#7272721a
  • editorSuggestWidget.background#F8F8F2
  • editorSuggestWidget.foreground#282A36
  • editorSuggestWidget.selectedBackground#c5c8de
  • editorWarning.foreground#007e90
  • editorWhitespace.foreground#7272721a
  • editorWidget.background#F8F8F2
  • errorForeground#d82f39
  • extensionButton.prominentBackground#00850490
  • extensionButton.prominentForeground#282A36
  • extensionButton.prominentHoverBackground#00850460
  • focusBorder#6171a3
  • foreground#282A36
  • gitDecoration.conflictingResourceForeground#a0651b
  • gitDecoration.deletedResourceForeground#d82f39
  • gitDecoration.ignoredResourceForeground#6171a3
  • gitDecoration.modifiedResourceForeground#007e90
  • gitDecoration.untrackedResourceForeground#008504
  • input.background#F8F8F2
  • input.border#F8F8F2
  • input.foreground#282A36
  • input.placeholderForeground#6171a3
  • inputOption.activeBorder#855fbf
  • inputValidation.errorBorder#d82f39
  • inputValidation.infoBorder#c13f8e
  • inputValidation.warningBorder#a0651b
  • list.activeSelectionBackground#c5c8de
  • list.activeSelectionForeground#282A36
  • list.dropBackground#c5c8de
  • list.errorForeground#d82f39
  • list.focusBackground#c5c8de75
  • list.highlightForeground#007e90
  • list.hoverBackground#c5c8de75
  • list.inactiveSelectionBackground#c5c8de75
  • list.warningForeground#a0651b
  • listFilterWidget.background#F8F8F2
  • listFilterWidget.noMatchesOutline#d82f39
  • listFilterWidget.outline#F8F8F2
  • merge.currentHeaderBackground#00850490
  • merge.incomingHeaderBackground#855fbf90
  • panel.background#F8F8F2
  • panelTitle.activeBorder#c13f8e
  • panelTitle.activeForeground#282A36
  • panelTitle.inactiveForeground#6171a3
  • peekView.border#c5c8de
  • peekViewEditor.background#F8F8F2
  • peekViewEditor.matchHighlightBackground#6c790880
  • peekViewResult.background#F8F8F2
  • peekViewResult.fileForeground#282A36
  • peekViewResult.lineForeground#282A36
  • peekViewResult.matchHighlightBackground#6c790880
  • peekViewResult.selectionBackground#c5c8de
  • peekViewResult.selectionForeground#282A36
  • peekViewTitle.background#F8F8F2
  • peekViewTitleDescription.foreground#6171a3
  • peekViewTitleLabel.foreground#282A36
  • pickerGroup.border#855fbf
  • pickerGroup.foreground#007e90
  • progressBar.background#c13f8e
  • selection.background#855fbf
  • settings.checkboxBackground#F8F8F2
  • settings.checkboxBorder#F8F8F2
  • settings.checkboxForeground#282A36
  • settings.dropdownBackground#F8F8F2
  • settings.dropdownBorder#F8F8F2
  • settings.dropdownForeground#282A36
  • settings.headerForeground#282A36
  • settings.modifiedItemIndicator#a0651b
  • settings.numberInputBackground#F8F8F2
  • settings.numberInputBorder#F8F8F2
  • settings.numberInputForeground#282A36
  • settings.textInputBackground#F8F8F2
  • settings.textInputBorder#F8F8F2
  • settings.textInputForeground#282A36
  • sideBar.background#F8F8F2
  • sideBarSectionHeader.background#F8F8F2
  • sideBarSectionHeader.border#F8F8F2
  • sideBarTitle.foreground#282A36
  • statusBar.background#F8F8F2
  • statusBar.debuggingBackground#d82f39
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#282A36
  • statusBar.noFolderBackground#F8F8F2
  • statusBar.noFolderForeground#282A36
  • statusBarItem.prominentBackground#d82f39
  • statusBarItem.prominentHoverBackground#a0651b
  • statusBarItem.remoteBackground#855fbf
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#F8F8F2
  • tab.activeBorderTop#c13f8e80
  • tab.activeForeground#282A36
  • tab.border#F8F8F2
  • tab.inactiveBackground#F8F8F2
  • tab.inactiveForeground#6171a3
  • terminal.ansiBlack#F8F8F2
  • terminal.ansiBlue#855fbf
  • terminal.ansiBrightBlack#6171a3
  • terminal.ansiBrightBlue#8762ae
  • terminal.ansiBrightCyan#157f80
  • terminal.ansiBrightGreen#008525
  • terminal.ansiBrightMagenta#b34b97
  • terminal.ansiBrightRed#cb4046
  • terminal.ansiBrightWhite#727272
  • terminal.ansiBrightYellow#727724
  • terminal.ansiCyan#007e90
  • terminal.ansiGreen#008504
  • terminal.ansiMagenta#c13f8e
  • terminal.ansiRed#d82f39
  • terminal.ansiWhite#282A36
  • terminal.ansiYellow#6c7908
  • terminal.background#F8F8F2
  • terminal.foreground#282A36
  • titleBar.activeBackground#F8F8F2
  • titleBar.activeForeground#282A36
  • titleBar.inactiveBackground#F8F8F2
  • titleBar.inactiveForeground#6171a3
  • walkThrough.embeddedEditorBackground#F8F8F2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#855fbf
meta.diff, meta.diff.header#6171a3
markup.inserted#008504
markup.deleted#d82f39
markup.changed#a0651b
invalid#d82f39underline italic
invalid.deprecated#282A36underline italic
entity.name.filename#6c7908
markup.error#d82f39
markup.underlineunderline
markup.bold#a0651bbold
markup.heading#855fbfbold
markup.italic#6c7908italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#007e90
markup.inline.raw, markup.raw.restructuredtext#008504
markup.underline.link, markup.underline.link.image#007e90
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#c13f8e
entity.name.directive.restructuredtext, markup.quote#6c7908italic
meta.separator.markdown#6171a3
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#008504
punctuation.definition.constant.restructuredtext#855fbf
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#855fbf
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#282A36
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#6c7908
entity.name.type.class, entity.name.class#007e90normal
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#855fbfitalic
entity.other.inherited-class#007e90italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6171a3
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#c13f8e
comment.block.documentation entity.name.type#007e90italic
comment.block.documentation entity.name.type punctuation.definition.bracket#007e90
comment.block.documentation variable#a0651bitalic
constant, variable.other.constant#855fbf
constant.character.escape, constant.character.string.escape, constant.regexp#c13f8e
entity.name.tag#c13f8e
entity.other.attribute-name.parent-selector#c13f8e
entity.other.attribute-name#008504italic
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#008504
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#a0651bitalic
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#008504italic
meta.decorator variable.other.object#008504
keyword, punctuation.definition.keyword#c13f8e
keyword.control.new, keyword.operator.newbold
meta.selector#c13f8e
support#007e90italic
support.function.magic, support.variable, variable.other.predefined#855fbfregular
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#c13f8e
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#282A36
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#c13f8e
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#007e90
constant.other.date, constant.other.timestamp#a0651b
variable.other.alias.yaml#008504italic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#c13f8eregular
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#007e90italic
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#a0651b
storage.modifier#c13f8e
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#6c7908
punctuation.definition.group.capture.regexp#c13f8e
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d82f39
punctuation.definition.character-class.regexp#007e90
punctuation.definition.group.regexp#a0651b
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#d82f39
meta.assertion.look-ahead.regexp#008504
string#6c7908
punctuation.definition.string.begin, punctuation.definition.string.end#6c7907
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#007e91
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#6171a3
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#282A36
meta.import variable.other.readwrite, meta.variable.assignment.destructured.object.coffee variable#a0651bitalic
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#282A36normal
meta.selectionset.graphql variable#6c7908
meta.selectionset.graphql meta.arguments variable#282A36
entity.name.fragment.graphql, variable.fragment.graphql#007e90
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#282A36
source.shell variable.other#855fbf
support.constant#855fbfnormal
meta.scope.prerequisites.makefile#6c7908
meta.attribute-selector.scss#6c7908
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#282A36
meta.preprocessor.haskell#6171a3
log.error#d82f39bold
log.warning#6c7908bold
Afterglow by Yuuzuki - VS Code Theme