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.background#1C1E26
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#A6A6A6
  • activityBarBadge.background#6272A4
  • activityBarBadge.foreground#F8F8F2
  • badge.background#6272A4
  • badge.foreground#F8F8F2
  • breadcrumb.background#1C1E26
  • breadcrumb.foreground#A6A6A6
  • button.background#6272A4
  • button.border#1A1A1A
  • button.foreground#F8F8F2
  • button.hoverBackground#6272A495
  • checkbox.background#6272A4
  • checkbox.border#1A1A1A
  • checkbox.foreground#F8F8F2
  • descriptionForeground#A6A6A6
  • diffEditor.diagonalFill#6272A4
  • diffEditor.insertedTextBackground#0BD99E40
  • diffEditor.removedTextBackground#F24B7840
  • dropdown.background#1C1E26
  • dropdown.foreground#A6A6A6
  • dropdown.listBackground#1C1E26
  • editor.background#1C1E26
  • editor.findMatchBackground#0BD99E40
  • editor.findMatchHighlightBackground#0BD99E40
  • editor.findRangeHighlightBackground#0BD99E40
  • editor.foreground#A6A6A6
  • editor.rangeHighlightBackground#F24B7840
  • editor.selectionBackground#6272A450
  • editor.wordHighlightBackground#6272A450
  • editorError.foreground#E83C6A
  • editorGroupHeader.tabsBackground#1C1E26
  • editorLineNumber.activeForeground#F8F8F2
  • editorLineNumber.foreground#A6A6A6
  • editorSuggestWidget.background#1F212B
  • editorSuggestWidget.foreground#A6A6A6
  • editorWidget.background#1F212B
  • editorWidget.border#1A1A1A
  • editorWidget.foreground#A6A6A6
  • errorForeground#E83C6A
  • extensionBadge.remoteBackground#6272A4
  • extensionBadge.remoteForeground#F8F8F2
  • extensionIcon.starForeground#6272A4
  • focusBorder#6272A4
  • foreground#A6A6A6
  • gitDecoration.addedResourceForeground#1FFF9C
  • gitDecoration.conflictingResourceForeground#FE2B99
  • gitDecoration.deletedResourceForeground#E83C6A
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#F1FA8C
  • gitDecoration.renamedResourceForeground#FFB86C
  • gitDecoration.stageDeletedResourceForeground#E83C6A
  • gitDecoration.stageModifiedResourceForeground#F1FA8C
  • gitDecoration.submoduleResourceForeground#00BDFF
  • gitDecoration.untrackedResourceForeground#F8F8F2
  • icon.foreground#A6A6A6
  • input.background#24292E
  • input.foreground#A6A6A6
  • input.placeholderForeground#A6A6A6
  • inputOption.activeBackground#24292E
  • inputOption.activeForeground#A6A6A6
  • inputValidation.errorForeground#E83C6A
  • inputValidation.infoForeground#8BE9FD
  • inputValidation.warningForeground#F1FA8C
  • keybindingLabel.background#6272A4
  • keybindingLabel.border#1A1A1A
  • keybindingLabel.foreground#F8F8F2
  • list.activeSelectionBackground#6272A440
  • list.activeSelectionForeground#F8F8F2
  • list.errorForeground#E83C6A
  • list.hoverBackground#6272A440
  • list.hoverForeground#F8F8F2
  • list.inactiveSelectionBackground#6272A440
  • list.inactiveSelectionForeground#F8F8F2
  • list.warningForeground#F1FA8C
  • menu.background#1C1E26
  • menu.foreground#A6A6A6
  • menu.selectionBackground#6272A440
  • menu.selectionForeground#F8F8F2
  • menu.separatorBackground#6272A4
  • menubar.selectionBackground#6272A440
  • menubar.selectionForeground#F8F8F2
  • merge.currentContentBackground#0BD99E40
  • merge.currentHeaderBackground#0BD99E80
  • merge.incomingContentBackground#F24B7840
  • merge.incomingHeaderBackground#F24B7880
  • notificationCenterHeader.background#1C1E26
  • notificationCenterHeader.foreground#A6A6A6
  • notificationLink.foreground#1FFF9C
  • notifications.background#1F212B
  • notifications.border#44475A
  • notifications.foreground#A6A6A6
  • notificationsErrorIcon.foreground#E83C6A
  • notificationsInfoIcon.foreground#8BE9FD
  • notificationsWarningIcon.foreground#F1FA8C
  • panel.background#1F212B
  • panel.border#1F212B
  • panelTitle.activeBorder#6272A4
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#A6A6A6
  • peekView.border#6272A4
  • peekViewEditor.background#1F212B
  • peekViewEditor.matchHighlightBackground#0BD99E40
  • peekViewEditorGutter.background#1F212B
  • peekViewResult.background#1F212B
  • peekViewResult.matchHighlightBackground#0BD99E40
  • peekViewResult.selectionBackground#6272A420
  • peekViewResult.selectionForeground#A6A6A6
  • peekViewTitle.background#1C1E26
  • peekViewTitleDescription.foreground#A6A6A6
  • peekViewTitleLabel.foreground#F8F8F2
  • quickInput.background#1C1E26
  • quickInput.foreground#A6A6A6
  • scrollbar.shadow#1A1A1A
  • scrollbarSlider.background#A6A6A660
  • scrollbarSlider.hoverBackground#A6A6A680
  • searchEditor.findMatchBackground#0BD99E40
  • selection.background#6272A450
  • sideBar.background#1F212B
  • sideBar.foreground#A6A6A6
  • sideBarSectionHeader.background#1C1E26
  • sideBarSectionHeader.foreground#A6A6A6
  • sideBarTitle.foreground#A6A6A6
  • statusBar.background#1C1E26
  • statusBar.debuggingBackground#E83C6A
  • statusBar.debuggingForeground#F8F8F2
  • statusBar.foreground#A6A6A6
  • statusBar.noFolderBackground#1C1E26
  • statusBar.noFolderForeground#A6A6A6
  • statusBarItem.activeBackground#6272A440
  • statusBarItem.errorBackground#E83C6A
  • statusBarItem.errorForeground#F8F8F2
  • statusBarItem.hoverBackground#6272A440
  • statusBarItem.remoteBackground#6272A4
  • statusBarItem.remoteForeground#F8F8F2
  • statusBarItem.warningBackground#F1FA8C
  • statusBarItem.warningForeground#F8F8F2
  • tab.activeBackground#1C1E26
  • tab.activeBorderTop#6272A4
  • tab.activeForeground#F8F8F2
  • tab.border#1A1A1A
  • tab.inactiveBackground#1F212B
  • tab.inactiveForeground#A6A6A6
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#00BDFF
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#1FFF9C
  • terminal.ansiMagenta#FE2B99
  • terminal.ansiRed#E83C6A
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#1F212B
  • terminal.foreground#A6A6A6
  • terminal.selectionBackground#6272A450
  • testing.iconErrored#E83C6A
  • testing.iconFailed#FE2B99
  • testing.iconPassed#1FFF9C
  • testing.iconQueued#F1FA8C
  • testing.iconSkipped#FFB86C
  • testing.iconUnset#8BE9FD
  • testing.peekBorder#6272A4
  • testing.runAction#F8F8F2
  • textLink.activeForeground#F8F8F290
  • textLink.foreground#F8F8F2
  • textPreformat.foreground#FFD176
  • titleBar.activeBackground#1C1E26
  • titleBar.activeForeground#A6A6A6
  • titleBar.inactiveBackground#1C1E26
  • titleBar.inactiveForeground#A6A6A6
  • toolbar.hoverBackground#6272A440
  • widget.shadow#1A1A1A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
source#F8F8F2
punctuation.definition.block, meta.brace.square, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.definition.binding-pattern.array, punctuation.definition.binding-pattern.object, punctuation.definition.imports.begin.bracket.round, punctuation.definition.imports.end.bracket.round, punctuation.definition.begin.bracket.curly, punctuation.definition.end.bracket.curly, punctuation.definition.begin.bracket.round, punctuation.definition.end.bracket.round, punctuation.definition.bracket.square, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.parenthesis.begin, punctuation.parenthesis.end, punctuation.definition.dict.begin, punctuation.definition.dict.end, punctuation.definition.parameters, punctuation.section.scope.begin, punctuation.section.scope.end, punctuation.section.function, punctuation.section.array.begin, punctuation.section.array.end, punctuation.brackets.curly, punctuation.brackets.round, punctuation.brackets.square, punctuation.section.array, punctuation.section.scope, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.collection-type.begin, punctuation.section.collection-type.end, punctuation.curlybrace.open, punctuation.curlybrace.close, punctuation.parenthesis.open, punctuation.parenthesis.close, punctuation.squarebracket.open, punctuation.squarebracket.close, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.section.keyframes.begin.bracket.curly, punctuation.section.keyframes.end.bracket.curly, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#F8F8F2
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#A978FF
punctuation.separator.comma, punctuation.terminator.statement, punctuation.separator.parameter, punctuation.separator.arguments, punctuation.separator.parameters, punctuation.separator.element, invalid.deprecated.semicolon, punctuation.separator.object, punctuation.separator.statement, punctuation.comma, punctuation.semi, punctuation.terminator.rule, punctuation.definition.pseudo-class.begin.bracket.round, punctuation.definition.pseudo-class.end.bracket.round, punctuation.separator.list.comma, punctuation.other.comma, punctuation.terminator#F8F8F2
punctuation.definition.attribute, punctuation.definition.block.tag, punctuation.definition.interpolation.begin.bracket.curly, punctuation.definition.interpolation.end.bracket.curly, punctuation.section.embedded, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, 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, punctuation.definition.variable, variable.other.readwrite.module#A978FF
punctuation.other.period, punctuation.other.colon, punctuation.accessor, punctuation.separator.period, punctuation.separator.colon, punctuation.section.function.begin, punctuation.separator.dict, punctuation.separator.method#A978FF
keyword, punctuation.definition.keyword#A978FF
keyword.control.new, keyword.operator.new, keyword.other.newbold
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#A978FF
storage.modifier#A978FF
entity.name.type, entity.name.variable.field, entity.name.variable.local, entity.name.namespace, entity.name.module#F1FA8C
entity.name.type.class, entity.name.class#F1FA8C
entity.other.inherited-class#F1FA8C
string#F1FA8C
punctuation.definition.string.begin, punctuation.definition.string.end#F1FA8C
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#A6A2C0
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#A6A2C0
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#A6A2C0
constant, variable.other.constant#FF2B99
constant.numeric.decimal, constant.numeric.integer.hexadecimal, constant.numeric.integer, constant.numeric.dec, constant.numeric.float, constant.numeric#A978FF
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#1FFF9C
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#FFB86C
support#8BE9FD
support.function.magic, support.variable, variable.other.predefined, support.function, support.function.transform#1FFF9C
support.function, support.type.property-nameregular
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#1FFF9C
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, entity.name.type.rust#8BE9FD
entity.name.package#F1FA8C
variable.other.object, variable.other.property#F8F8F2
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx, variable.other.readwrite#A6A2C0
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#A978FF
comment.block.documentation entity.name.type#F1FA8C
comment.block.documentation entity.name.type punctuation.definition.bracket#F8F8F2
comment.block.documentation variable#6272A4
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FF2B99
meta.use.rust#FF2B99
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#F8F8F2
constant.other.date, constant.other.timestamp#FFB86C
variable.other.alias.yaml#1FFF9C
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE
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#A978FF
support.constant#A978FFnormal
meta.scope.prerequisites.makefile#F1FA8C
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C
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#E83C6A
meta.assertion.look-ahead.regexp#1FFF9C
constant.character.escape, constant.character.string.escape, constant.regexp#8BE9FD
punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.other.attribute-name, punctuation.definition.tag, keyword.operator.list.shell#F8F8F2
meta.tag, source.vue, entity.name.tag#A978FF
text.html.derivative, meta.jsx.children, text.svelte, text.html.vue-html#AFABCA
support.class.component#8BE9FD
punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html#8BE9FD
entity.other.keyframe-offset#A978FF
support.type.vendored.property-name, support.type.property-name#F8F8F2
variable.parameter.keyframe-list#F1FA8C
meta.property-value, support.constant.property-value#FF2B99
entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, support.constant.vendored.property-value, support.constant.font-name#8BE9FD
entity.other.attribute-name.class, entity.other.attribute-name.id#A6A2C0
emphasisitalic
strongbold
header#A978FF
meta.diff, meta.diff.header#6272A4
markup.inserted#1FFF9C
markup.deleted#E83C6A
markup.changed#FFB86C
invalid#E83C6Aunderline italic
invalid.deprecated#E83C6Aitalic
entity.name.filename#F1FA8C
markup.error#E83C6A
markup.underlineunderline
markup.bold#FE2B99bold
markup.heading#A978FFbold
markup.italic#00BDFFitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext, punctuation.definition.metadata.markdown#F8F8F2
markup.inline.raw, markup.raw.restructuredtext#1FFF9C
markup.underline.link, markup.underline.link.image#F1FA8C
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#A978FF
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#1FFF9C
punctuation.definition.constant.restructuredtext#F8F8F2
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#F8F8F2
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#F8F8F2
meta.paragraph.markdown#AFABCA