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#1A1A1A
  • activityBar.foreground#F8F8F2
  • activityBar.inactiveForeground#A6A6A6
  • activityBarBadge.background#6272A4
  • activityBarBadge.foreground#F8F8F2
  • badge.background#6272A4
  • badge.foreground#F8F8F2
  • breadcrumb.background#1A1A1A
  • 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#1F1F1F
  • debugToolBar.border#1A1A1A
  • diffEditor.border:#A6A6A6
  • diffEditor.diagonalFill#23272F
  • diffEditor.insertedTextBackground#0BD99E30
  • diffEditor.insertedTextBorder#0BD99E80
  • diffEditor.removedTextBackground#F24B7830
  • diffEditor.removedTextBorder#F24B7880
  • dropdown.background#1A1A1A
  • dropdown.foreground#A6A6A6
  • dropdown.listBackground#1A1A1A
  • editor.background#1A1A1A
  • editor.findMatchBackground#6272A480
  • editor.findMatchHighlightBackground#0BD99E80
  • editor.findRangeHighlightBackground#30BCED80
  • editor.foreground#F8F8F2
  • editor.rangeHighlightBackground#30BCED80
  • editor.selectionBackground#6272A480
  • editor.selectionHighlightBackground#6272A480
  • editor.snippetTabstopHighlightBackground#1F1F1F
  • editor.snippetTabstopHighlightBorder#6272A4
  • editor.wordHighlightBackground#6272A480
  • editor.wordHighlightStrongBackground#6272A480
  • editorError.foreground#E83C6A
  • editorGroup.border#1F1F1F
  • editorGroupHeader.tabsBackground#1A1A1A
  • editorGroupHeader.tabsBorder#1F1F1F
  • editorLineNumber.activeForeground#8BE9FD
  • editorLineNumber.foreground#A6A6A6
  • editorWarning.foreground#F1FA8C
  • editorWidget.background#1A1A1A
  • 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#1A1A1A
  • 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#1F1F1F
  • 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#1A1A1A
  • notificationCenterHeader.foreground#F8F8F2
  • notificationLink.foreground#6272A4
  • notifications.background#1F1F1F
  • notifications.border#6272A480
  • notifications.foreground#A6A6A6
  • notificationsErrorIcon.foreground#E83C6A
  • notificationsInfoIcon.foreground#8BE9FD
  • notificationsWarningIcon.foreground#F1FA8C
  • panel.background#1F1F1F
  • panel.border#1F1F1F
  • panelInput.border#A6A6A6
  • panelSection.dropBackground#1A1A1A
  • panelTitle.activeBorder#8BE9FD
  • panelTitle.activeForeground#F8F8F2
  • panelTitle.inactiveForeground#808080
  • peekView.border#6272A4
  • peekViewEditor.background#1F1F1F
  • peekViewEditorGutter.background#1F1F1F
  • peekViewResult.background#1F1F1F
  • peekViewResult.matchHighlightBackground#0BD99E80
  • peekViewResult.selectionBackground#6272A480
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#1A1A1A
  • peekViewTitleDescription.foreground#A6A6A6
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#6272A4
  • pickerGroup.foreground#F8F8F2
  • quickInput.background#1A1A1A
  • quickInput.foreground#A6A6A6
  • scrollbar.shadow#1A1A1A
  • scrollbarSlider.activeBackground#A6A6A6
  • scrollbarSlider.background#808080
  • scrollbarSlider.hoverBackground#A6A6A6
  • searchEditor.findMatchBackground#30BCED80
  • settings.checkboxBackground#6272A4
  • settings.checkboxForeground#F8F8F2
  • settings.dropdownBackground#1F1F1F
  • settings.dropdownForeground#A6A6A6
  • settings.headerForeground#F8F8F2
  • settings.modifiedItemIndicator#6272A4
  • settings.numberInputBackground#1F1F1F
  • settings.numberInputForeground#A6A6A6
  • settings.textInputBackground#1F1F1F
  • settings.textInputForeground#A6A6A6
  • sideBar.background#1F1F1F
  • sideBar.foreground#A6A6A6
  • sideBarSectionHeader.background#1A1A1A
  • sideBarSectionHeader.foreground#A6A6A6
  • sideBarTitle.foreground#A6A6A6
  • statusBar.background#1A1A1A
  • statusBar.border#1F1F1F
  • statusBar.debuggingBackground#F8F8F2
  • statusBar.debuggingForeground#1A1A1A
  • statusBar.foreground#A6A6A6
  • statusBar.noFolderBackground#1A1A1A
  • statusBar.noFolderForeground#F8F8F2
  • statusBarItem.activeBackground#6272A440
  • statusBarItem.errorBackground#F8F8F2
  • statusBarItem.errorForeground#1A1A1A
  • statusBarItem.hoverBackground#6272A440
  • statusBarItem.remoteBackground#6272A4
  • statusBarItem.remoteForeground#F8F8F2
  • tab.activeBackground#1A1A1A
  • tab.activeForeground#F8F8F2
  • tab.border#1A1A1A
  • tab.inactiveBackground#1F1F1F
  • tab.inactiveBackgroundtab.inactiveBackground#1F1F1F
  • 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#1F1F1F
  • 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#1A1A1A
  • titleBar.activeForeground#A6A6A6
  • titleBar.inactiveBackground#1A1A1A
  • titleBar.inactiveForeground#A6A6A6
  • toolbar.hoverBackground#6272A480
  • welcomePage.background#1F1F1F
  • welcomePage.buttonBackground#1A1A1A
  • welcomePage.buttonHoverBackground#6272A430
  • welcomePage.progress.background#1A1A1A
  • 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#A978FF
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#FFB86Cbold
markup.heading#A978FFbold
markup.italic#FF79C6italic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD
markup.inline.raw, markup.raw.restructuredtext#50FA7B
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#50FA7B
punctuation.definition.constant.restructuredtext#A978FF
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#A978FF
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#F1FA8C
comment.block.documentation entity.name.type punctuation.definition.bracket#F8F8F2
comment.block.documentation variable#F8F8F2
entity.name.type.class, entity.name.class#F1FA8C
entity.other.inherited-class#F1FA8C
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#50FA7B
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#FFB86C
variable.other.object, variable.other.property#F8F8F2
keyword, punctuation.definition.keyword#A978FF
keyword.control.new, keyword.operator.newbold
support#8BE9FD
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#A978FF
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#A978FF
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, storage.type.class#A978FF
entity.name.type#F1FA8C
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#8BE9FD
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C
storage.modifier#A978FF
string.unquoted.heredoc.ruby, string#F1FA8C
punctuation.definition.string.begin, punctuation.definition.string.end#E9F284
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#F1FA8C
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#F1FA8C
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#A978FF
support.constant#A978FF
meta.scope.prerequisites.makefile, meta.property-value.css#F1FA8C
constant.character.escape, constant.character.string.escape, constant.regexp#8BE9FD
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C
punctuation.definition.group.capture.regexp#A978FF
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#50FA7B
punctuation.definition.tag.xml, entity.other.attribute-name.localname.xml#F8F8F2
meta.tag.xml, entity.name.tag.localname.xml#A978FF
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#A978FF
punctuation.definition.generic.begin.html, punctuation.definition.generic.end.html#8BE9FD
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#A978FF
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#FFB86C
string.quoted.single.css, meta.property-value.css, variable.argument.css, support.constant.color.w3c-standard-color-name.css#F1FA8C
support.constant.property-value.css, entity.name.tag.reference.scss, support.constant.font-name.css#8BE9FD
keyword.other.important.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#E83C6A
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