Skip to main content
CodingTheme

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.foreground#F8F8F2
  • button.hoverBackground#6272A480
  • checkbox.background#6272A4
  • checkbox.foreground#F8F8F2
  • debugIcon.disconnectForeground#6272A4
  • debugIcon.pauseForeground#F1FA8C
  • debugIcon.restartForeground#0BD99E
  • debugIcon.startForeground#30BCED
  • debugIcon.stepIntoForeground#FF79C6
  • debugIcon.stepOutForeground#FF79C6
  • debugIcon.stepOverForeground#FF79C6
  • debugIcon.stopForeground#E83C6A
  • debugToolBar.background#23272F
  • debugToolBar.border#1C1E26
  • diffEditor.border:#A6A6A6
  • diffEditor.diagonalFill#23272F
  • diffEditor.insertedTextBackground#0BD99E30
  • diffEditor.insertedTextBorder#0BD99E80
  • diffEditor.removedTextBackground#F24B7830
  • diffEditor.removedTextBorder#F24B7880
  • dropdown.background#1C1E26
  • dropdown.foreground#A6A6A6
  • dropdown.listBackground#1C1E26
  • editor.background#1C1E26
  • editor.findMatchBackground#6272A480
  • editor.findMatchHighlightBackground#0BD99E80
  • editor.findRangeHighlightBackground#30BCED80
  • editor.foreground#F8F8F2
  • editor.rangeHighlightBackground#30BCED80
  • editor.selectionBackground#6272A480
  • editor.selectionHighlightBackground#6272A480
  • editor.snippetTabstopHighlightBackground#23272F
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#6272A480
  • editor.wordHighlightStrongBackground#6272A480
  • editorError.foreground#E83C6A
  • editorGroup.border#23272F
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGroupHeader.tabsBorder#23272F
  • editorLineNumber.activeForeground#8BE9FD
  • editorLineNumber.foreground#A6A6A6
  • editorWarning.foreground#F1FA8C
  • editorWidget.background#1C1E26
  • editorWidget.foreground#A6A6A6
  • errorForeground#E83C6A
  • extensionBadge.remoteBackground#6272A4
  • extensionBadge.remoteForeground#F8F8F2
  • extensionButton.prominentBackground#6272A4
  • extensionButton.prominentForeground#F8F8F2
  • extensionButton.prominentHoverBackground#6272A440
  • extensionIcon.starForeground#F1FA8C
  • focusBorder#6272A4
  • foreground#A6A6A6
  • gitDecoration.addedResourceForeground#30BCED
  • gitDecoration.conflictingResourceForeground#FF79C6
  • gitDecoration.deletedResourceForeground#E83C6A
  • gitDecoration.ignoredResourceForeground#6272A4
  • gitDecoration.modifiedResourceForeground#F1FA8C
  • gitDecoration.stageModifiedResourceForeground#FFB86C
  • gitDecoration.untrackedResourceForeground#F8F8F2
  • icon.foreground#A6A6A6
  • input.background#1C1E26
  • input.foreground#A6A6A6
  • inputValidation.errorForeground#E83C6A
  • inputValidation.infoBackground#8BE9FD
  • inputValidation.warningForeground#F1FA8C
  • keybindingLabel.background#6272A4
  • keybindingLabel.foreground#F8F8F2
  • list.activeSelectionBackground#6272A480
  • list.activeSelectionForeground#F8F8F2
  • list.errorForeground#E83C6A
  • list.focusBackground#6272A430
  • list.focusForeground#A6A6A6
  • list.hoverBackground#6272A480
  • list.hoverForeground#F8F8F2
  • list.inactiveFocusBackground#6272A430
  • list.inactiveSelectionBackground#6272A430
  • list.inactiveSelectionForeground#A6A6A6
  • list.warningForeground#F1FA8C
  • menu.background#23272F
  • menu.foreground#A6A6A6
  • menu.selectionBackground#6272A440
  • menu.selectionForeground#F8F8F2
  • menu.separatorBackground#6272A4
  • menubar.selectionBackground#6272A440
  • menubar.selectionForeground#F8F8F2
  • merge.commonContentBackground#30BCED30
  • merge.commonHeaderBackground#30BCED
  • merge.currentContentBackground#0BD99E30
  • merge.currentHeaderBackground#0BD99E
  • merge.incomingContentBackground#F24B7830
  • merge.incomingHeaderBackground#F24B78
  • notificationCenterHeader.background#1C1E26
  • notificationCenterHeader.foreground#F8F8F2
  • notificationLink.foreground#6272A4
  • notifications.background#23272F
  • notifications.border#6272A480
  • notifications.foreground#A6A6A6
  • notificationsErrorIcon.foreground#E83C6A
  • notificationsInfoIcon.foreground#8BE9FD
  • notificationsWarningIcon.foreground#F1FA8C
  • panel.background#23272F
  • panel.border#23272F
  • panelInput.border#A6A6A6
  • panelSection.dropBackground#1C1E26
  • panelTitle.activeBorder#8BE9FD
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#808080
  • peekView.border#6272A4
  • peekViewEditor.background#23272F
  • peekViewEditorGutter.background#23272F
  • peekViewResult.background#23272F
  • peekViewResult.matchHighlightBackground#0BD99E80
  • peekViewResult.selectionBackground#6272A480
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#1C1E26
  • peekViewTitleDescription.foreground#A6A6A6
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#6272A4
  • pickerGroup.foreground#F8F8F2
  • quickInput.background#1C1E26
  • quickInput.foreground#A6A6A6
  • scrollbar.shadow#1C1E26
  • scrollbarSlider.activeBackground#A6A6A6
  • scrollbarSlider.background#808080
  • scrollbarSlider.hoverBackground#A6A6A6
  • searchEditor.findMatchBackground#30BCED80
  • settings.checkboxBackground#6272A4
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#23272F
  • settings.dropdownForeground#A6A6A6
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#6272A4
  • settings.numberInputBackground#23272F
  • settings.numberInputForeground#A6A6A6
  • settings.textInputBackground#23272F
  • settings.textInputForeground#A6A6A6
  • sideBar.background#23272F
  • sideBar.foreground#A6A6A6
  • sideBarSectionHeader.background#1C1E26
  • sideBarSectionHeader.foreground#A6A6A6
  • sideBarTitle.foreground#A6A6A6
  • statusBar.background#1C1E26
  • statusBar.border#23272F
  • statusBar.debuggingBackground#F8F8F2
  • statusBar.debuggingForeground#1C1E26
  • statusBar.foreground#A6A6A6
  • statusBar.noFolderBackground#1C1E26
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.activeBackground#6272A440
  • statusBarItem.errorBackground#F8F8F2
  • statusBarItem.errorForeground#1C1E26
  • statusBarItem.hoverBackground#6272A440
  • statusBarItem.remoteBackground#6272A4
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#1C1E26
  • tab.activeForeground#F8F8F2
  • tab.border#1C1E26
  • tab.inactiveBackground#23272F
  • tab.inactiveBackgroundtab.inactiveBackground#23272F
  • tab.inactiveForeground#A6A6A6
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#30BCED
  • terminal.ansiCyan#8BE9FD
  • terminal.ansiGreen#50FA7B
  • terminal.ansiMagenta#A978FF
  • terminal.ansiRed#F24B78
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F1FA8C
  • terminal.background#23272F
  • terminal.foreground#A6A6A6
  • testing.iconErrored#F24B78
  • testing.iconFailed#FF79C6
  • testing.iconPassed#0BD99E
  • testing.iconQueued#A978FF
  • testing.iconSkipped#F1FA8C
  • testing.iconUnset#F8F8F2
  • testing.runAction#30BCED
  • textBlockQuote.background#23272F
  • textBlockQuote.border#6272A4
  • textCodeBlock.background#1C1E26
  • textLink.activeForeground#6272A480
  • textLink.foreground#6272A4
  • textPreformat.foreground#F1FA8C
  • titleBar.activeBackground#1C1E26
  • titleBar.activeForeground#A6A6A6
  • titleBar.inactiveBackground#1C1E26
  • titleBar.inactiveForeground#A6A6A6
  • toolbar.hoverBackground#6272A480
  • welcomePage.background#23272F
  • welcomePage.buttonBackground#1C1E26
  • welcomePage.buttonHoverBackground#6272A430
  • welcomePage.progress.background#1C1E26
  • welcomePage.progress.foreground#6272A4
  • widget.shadow#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, unused.comment, wildcard.comment#6272A4
emphasisitalic
strongbold
header#00BDFF
meta.diff, meta.diff.header#6272A4
markup.inserted#50FA7B
markup.deleted#E83C6A
markup.changed#FFB86C
invalid#E83C6Aunderline italic
invalid.deprecated#E83C6Aunderline italic
entity.name.filename#F8F8F2
markup.error#E83C6A
markup.underlineunderline
markup.bold#FF79C6bold
markup.heading#00BDFFbold
markup.italic#0BD99Eitalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#F1FA8C
markup.underline.link, markup.underline.link.image#FFB86C
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#00BDFF
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#F1FA8C
punctuation.definition.constant.restructuredtext#A978FF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#00BDFF
meta.paragraph.markdown, meta.paragraph.markdown#A6A6A6
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F8F8F2
punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.list.begin.markdown#F8F8F2
source#F8F8F2
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation #6272A4
comment.block.documentation entity.name.type#FFB86C
comment.block.documentation entity.name.type punctuation.definition.bracket#F8F8F2
comment.block.documentation variable#F8F8F2
entity.name.type.class, entity.name.class#FFB86C
entity.other.inherited-class#FFB86C
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#F1FA8C
constant, variable.other.constant#FF79C6
entity.name.function, meta.function-call.generic, 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, support.function.go, support.function.builtin.go, support.function.lua, entity.name.function-call.elixir#50FA7B
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, parameter.variable.function.elixir#A978FF
variable.other.object, variable.other.property#F8F8F2
keyword, punctuation.definition.keyword#00BDFF
keyword.control.new, keyword.operator.newbold
support#F1FA8C
support.function.magic, support.variable, variable.other.predefined#FFB86C
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, punctuation.other.colon.go, punctuation.other.period.go, punctuation.accessor#00BDFF
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, 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, punctuation.section.embedded.elixir, punctuation.separator.colon.python, punctuation.separator.period.python, punctuation.separator.dict.python, punctuation.section.function.begin.python, punctuation.section.function.end.python, punctuation.separator.method.ruby, punctuation.separator.variable.ruby, variable.other.readwrite.module.elixir#00BDFF
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#F1FA8C
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, storage.type.class#00BDFF
entity.name.type#FFB86C
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.primitive.rust#F1FA8C
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#F24B78
storage.modifier#00BDFF
string.unquoted.heredoc.ruby, string#FFB86C
punctuation.definition.string.begin, punctuation.definition.string.end#FFB86C
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#FF79C6
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#FFB86C
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.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB86C
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#FFB86C
meta.selectionset.graphql meta.arguments variable#F8F8F2
entity.name.fragment.graphql, variable.fragment.graphql#F1FA8C
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#00BDFF
support.constant#00BDFF
meta.scope.prerequisites.makefile, meta.property-value.css#F1FA8C
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#FFB86C
punctuation.definition.group.capture.regexp#00BDFF
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#FF79C6
punctuation.definition.character-class.regexp#00BDFF
punctuation.definition.group.regexp#00BDFF
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#F24B78
meta.assertion.look-ahead.regexp#0BD99E
punctuation.definition.tag.xml, entity.other.attribute-name.localname.xml#F8F8F2
meta.tag.xml, entity.name.tag.localname.xml#00BDFF
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, entity.other.attribute-name.html, text.html.derivative#F8F8F2
punctuation.separator.key-value.html, entity.name.tag.html, entity.name.tag.js, entity.name.tag.tsx, entity.name.tag.template.html, entity.name.tag.script.html, entity.name.tag.style.html, entity.name.tag.block.any.html, meta.tag.block.any.html#00BDFF
punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html#FF79C6
punctuation.terminator.rule.css, support.type.vendored.property-name.css, meta.at-rule.keyframes.body.css, support.type.property-name.css, punctuation.definition.parameters.begin.bracket.round.css, punctuation.definition.parameters.end.bracket.round.css, entity.other.attribute-name.html#F8F8F2
entity.other.keyframe-offset.css, keyword.operator.gradient.css, punctuation.definition.entity.css, entity.name.tag.css, punctuation.separator.key-value.html#00BDFF
constant.numeric.css, keyword.other.unit.px.css, keyword.other.unit.deg.css, keyword.other.unit.percentage.css, keyword.other.unit.s.css, keyword.other.unit.rem.css, keyword.other.unit.em.css, keyword.other.unit.vw.css, keyword.other.unit.vh.css, keyword.other.unit.pt.css, keyword.other.unit.in.css, keyword.other.unit.cm.css, keyword.other.unit.percentage.css, keyword.other.unit., constant.other.color.rgb-value.hex.css, entity.other.keyframe-offset.percentage.css#FF79C6
support.function.css, support.function.calc.css, support.function.misc.css, support.function.timing-function.css, support.function.transform.css, support.function.url.css, support.function.gradient.css, support.function.misc.scss#50FA7B
variable.parameter.keyframe-list.css, meta.at-rule.media.header.css, support.constant.vendored.property-value.css#F1FA8C
string.quoted.single.css, meta.property-value.css, variable.argument.css, support.constant.color.w3c-standard-color-name.css#FFB86C
support.constant.property-value.css, entity.name.tag.reference.scss, support.constant.font-name.css#F24B78
keyword.other.important.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#A978FF
support.type.property-name.json, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#F8F8F2

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Nix by Alvaro Santana - VS Code Theme