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#12151a
  • activityBar.foreground#6272a4
  • activityBarBadge.background#f286c4
  • activityBarBadge.foreground#f6f6f4
  • badge.background#44475a
  • badge.foreground#f6f6f4
  • button.background#44475a
  • button.foreground#F8F8F2
  • button.hoverBackground#6272a4
  • debugExceptionWidget.background#1D2128
  • debugExceptionWidget.border#181A1F
  • debugToolBar.background#1D2128
  • diffEditor.insertedTextBackground#00809B33
  • diffEditor.removedTextBackground#ff474720
  • dropdown.background#1d1f23
  • dropdown.border#181A1F
  • editor.background#282a36
  • editor.findMatchBackground#42557B
  • editor.findMatchHighlightBackground#314365
  • editor.findRangeHighlightBackground#314365
  • editor.foreground#F8F8F2
  • editor.inactiveSelectionBackground#67769640
  • editor.lineHighlightBackground#383E4A
  • editor.lineHighlightBorder#383E4A00
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightStrongBackground#abb2bf26
  • editorBracketMatch.background#282a36
  • editorBracketMatch.border#6272a4
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#3f5de6da
  • editorError.border#282a3600
  • editorError.foreground#c24038
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#12151a
  • editorGroupHeader.tabsBorder#32373f
  • editorGutter.addedBackground#50FA7B
  • editorGutter.deletedBackground#FF5555
  • editorGutter.modifiedBackground#6272a4
  • editorHoverWidget.background#1D2128
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.background#3B4048
  • editorInlayHint.background#44475a
  • editorInlayHint.foreground#F8F8F2
  • editorLineNumber.foreground#6272a4
  • editorLink.activeForeground#8BE9FD
  • editorMarkerNavigation.background#1D2128
  • editorOverviewRuler.border#181A1F
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#1D2128
  • editorSuggestWidget.border#181A1F
  • editorSuggestWidget.foreground#F8F8F2
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.border#282a3600
  • editorWarning.foreground#FFB86C
  • editorWhitespace.foreground#3B4048
  • editorWidget.background#1D2128
  • editorWidget.border#181A1F
  • errorForeground#FF5555
  • focusBorder#6272a433
  • foreground#F8F8F2
  • gitDecoration.conflictingResourceForeground#FFB86C
  • gitDecoration.deletedResourceForeground#FF5555
  • gitDecoration.ignoredResourceForeground#4D4D4D
  • gitDecoration.modifiedResourceForeground#6272a4
  • gitDecoration.untrackedResourceForeground#50FA7B
  • input.background#12151a
  • input.border#181A1F
  • input.foreground#F8F8F2
  • input.placeholderForeground#6272a4
  • inputOption.activeBorder#BD93F9
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#383E4A
  • list.focusForeground#d7dae0
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#292d35
  • list.hoverForeground#d7dae0
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notification.background#1D2128
  • panel.background#282a36
  • panel.border#32373f
  • panelTitle.activeBorder#f286c4
  • panelTitle.activeForeground#f6f6f4
  • panelTitle.inactiveForeground#6272a4
  • peekView.border#BD93F9
  • peekViewEditor.background#1D2128
  • peekViewEditor.matchHighlightBackground#42557B
  • peekViewEditorGutter.background#1D2128
  • peekViewResult.background#1D2128
  • peekViewResult.fileForeground#F8F8F2
  • peekViewResult.lineForeground#6272a4
  • peekViewResult.matchHighlightBackground#42557B
  • peekViewResult.selectionBackground#44475a
  • peekViewResult.selectionForeground#F8F8F2
  • peekViewTitle.background#44475a
  • peekViewTitleDescription.foreground#6272a4
  • peekViewTitleLabel.foreground#F8F8F2
  • pickerGroup.border#6272a4
  • pickerGroup.foreground#F8F8F2
  • progressBar.background#BD93F9
  • scrollbar.shadow#0f0f0f
  • scrollbarSlider.activeBackground#747D9180
  • scrollbarSlider.background#4E566680
  • scrollbarSlider.hoverBackground#5A637580
  • selection.background#67769660
  • settings.focusedRowBackground#2c313a40
  • settings.headerForeground#F8F8F2
  • sideBar.background#1D2128
  • sideBar.border#32373f
  • sideBar.foreground#7B88B2
  • sideBarSectionHeader.background#282a36
  • sideBarSectionHeader.foreground#F8F8F2
  • sideBarTitle.foreground#BD93F9
  • statusBar.background#12151a
  • statusBar.border#32373f
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#6272a4
  • statusBar.noFolderBackground#12151a
  • statusBarItem.activeBackground#44475a
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#282A36
  • tab.activeForeground#F8F8F2
  • tab.border#32373f
  • tab.hoverBackground#383E4A
  • tab.inactiveBackground#1D2128
  • tab.inactiveForeground#7B88B2
  • terminal.ansiBlack#575757
  • terminal.ansiBlue#CAA9FA
  • terminal.ansiBrightBlack#4D4D4D
  • terminal.ansiBrightBlue#BD93F9
  • terminal.ansiBrightCyan#8BE9FD
  • terminal.ansiBrightGreen#50FA7B
  • terminal.ansiBrightMagenta#FF79C6
  • terminal.ansiBrightRed#FF5555
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#F1FA8C
  • terminal.ansiCyan#9AEDFE
  • terminal.ansiGreen#5AF78E
  • terminal.ansiMagenta#FF92D0
  • terminal.ansiRed#FF6E67
  • terminal.ansiWhite#F8F8F2
  • terminal.ansiYellow#F4F99D
  • terminal.background#282A36
  • terminal.foreground#9da5b4
  • terminal.selectionBackground#67769660
  • terminalCursor.foreground#6272a4
  • titleBar.activeBackground#12151a
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282a36
  • titleBar.inactiveForeground#6272A4
  • tree.indentGuidesStroke#44475a
  • walkThrough.embeddedEditorBackground#1D2128
  • welcomePage.buttonBackground#1D2128
  • welcomePage.buttonHoverBackground#2c313a
  • widget.shadow#0f0f0f

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.module.elm, entity.other.inherited-class.python, variable.other.object, support.other.namespace.php, entity.other.attribute-name.namespace.xml, record.accessor, entity.name.record.field.accessor, storage.modifier.import.java, storage.modifier.import.groovy, meta.import.swift entity.name.type.swift, meta.member.access.python, variable.other.property.ts, variable.other.property.js, constant.language.symbol.elixir, punctuation.tag.liquid support.class.liquid, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell punctuation.definition.variable.powershell, meta.scriptblock.powershell meta.group.simple.subexpression.powershell meta.group.simple.subexpression.powershell meta.scriptblock.powershell meta.scriptblock.powershell support.variable.automatic.powershell#e78957—
entity.name.type#a3dc6a—
comment, punctuation.definition.comment, string.quoted.docstring.multi, comment.block.documentation source#1fdfd2c3italic
constant, support.constant.core.php#e3836d—
meta.section.struct.go variable.other.field.go, meta.section.struct.go variable.other.declaration.go, source, support, constant.character.entity.named, meta.jsx.children, source.lua, text.html.derivative, source.graphql meta.selections variable.other.alias.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql variable.graphql, source.graphql variable.arguments.graphql#a0abc8—
entity.name.function.decorator, meta.decorator entity.name.function, meta.decorator punctuation.decorator, punctuation.definition.decorator, meta.decorator variable.other.readwrite.ts, variable.parameter.gdscript, entity.name.variable.parameter, variable.parameter#d5ab81—
keyword.control.export, support.type.object.module#dfbb1f—
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir, punctuation.output.liquid support.variable.liquid, meta.function.echo.edge source.js keyword.operator.error-control.js, entity.name.type.variant.gdscript, entity.name.function.powershell#56ade6—
keyword.control.import, meta.module.name.elm support, meta.import.elm support, keyword.control.at-rule, punctuation.definition.keyword, variable.control.import.include, keyword.other.import.java#dfbb1f—
keyword.package.go, keyword.operator.pointer.go, keyword.control, keyword.control.conditional, storage.modifier, keyword.operator.new, keyword.operator.expression, keyword.begin.blade, keyword.end.blade, keyword.blade, keyword.type-alias, keyword.type, support.class.console, keyword.other.await, storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc, keyword.other.new, keyword.other.phpdoc, keyword.other.use.php, keyword.operator.logical.python, keyword.other.import.static.groovy, keyword.other.import.groovy, punctuation.definition.attribute.swift, source.svelte meta.scope.tag.main.svelte meta.tag.start.svelte variable.function.svelte, meta.directive.on.svelte entity.name.type.svelte, keyword.other.special-method.elixir, keyword.edge, entity.name.function.edge, support.constant.edge, keyword.other.gdscript, keyword.other.onready.gdscript, source.graphql meta.fragment.graphql keyword.on.graphql, source.graphql meta.type.interface.graphql keyword.implements.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql keyword.operator.nulltype.graphql, source.graphql meta.variables.graphql keyword.operator.nulltype.graphql, source.graphql meta.type.interface.graphql meta.type.object.graphql keyword.operator.nulltype.graphql, keyword.operator.class.php, keyword.operator.spread.php, keyword.operator.type.php, keyword.operator.increment-decrement.php, keyword.operator.increment-increment.php, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json, keyword.operator.string.php, keyword.operator.ternary.php, keyword.operator.variadic.php, keyword.operator.nullable-type.php, keyword.other.use-as.php, keyword.import.go, keyword.operator.address.go, keyword.operator.null-coalescing, keyword.operator.arrow, keyword.struct.go, keyword.operator.liquid, keyword.operator.optional.ts, keyword.cmake#dfbb1f—
meta.object-literal.key, variable.object.property#c1c8da—
keyword.other.definition.ini, support.type.property-name, entity.name.tag.yaml#dfbb1f—
keyword.operator.comparison, storage.type.function.arrow, keyword.operator.lua, keyword.operator.assignment, keyword.operator.relational, keyword.operator.increment, keyword.operator.decrement, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.math#dfbb1f—
punctuation, attribute_value, meta.brace, punctuation.definition.parameters, punctuation.definition.template-expression, keyword.operator, keyword.other, punctuation.terminator, punctuation.separator, punctuation.definition.generic.begin, punctuation.definition.generic.end, meta.function.type-declaration, keyword.other.colon.elm, meta.record.field.elm keyword.other.elm, keyword.other.period.elm, meta.tag.xml, meta.tag.preprocessor.xml, punctuation.definition.block, punctuation.accessor, constant.name.attribute.tag.pug, string.interpolated.pug, keyword.other.whitespace.liquid, meta.tag.template.block.twig, meta.tag.template.value.twig, begin.bracket, end.bracket, text.html.twig meta.tag.inline.any, text.html.twig meta.tag.block.any, support.function.construct.begin.blade, support.function.construct.end.blade source.php, support.function.construct.end.blade, meta.function.echo.blade source.php, punctuation.definition.list.begin.python, punctuation.definition.list.end.python, text.html.vue-html meta.tag.block.any, keyword.operator.assignment.tsx, meta.definition.method.signature.java, meta.class.body.groovy, meta.definition.method.groovy meta.method.body.java meta.declaration.assertion.groovy, punctuation.definition.list.begin.erlang, meta.expression.parenthesized, meta.definition.function.swift meta.parameter-clause.swift, source.swift meta.function-call.swift, punctuation.section.embedded.end.swift source.swift, source.lua, meta.function.lua, punctuation.definition.keyword.svelte, source.svelte meta.scope.tag.SpeakerPicture.svelte meta.tag.start.svelte entity.other.attribute-name.svelte, expression.embbeded.vue punctuation.definition.tag.begin.html.vue, expression.embbeded.vue punctuation.definition.tag.end.html.vue, source.graphql meta.type.interface.graphql meta.type.object.graphql meta.type.list.graphql meta.brace.square.graphql, punctuation.output.liquid, text.html.liquid meta.tag.liquid punctuation.definition.tag.end.liquid#d0d8eccc—
entity.name.package.go, variable.language.this, variable.language.special.self, variable.parameter.function.language.special.self, variable.language.this.php punctuation.definition.variable.php, meta.class.body.php storage.type.php, variable.parameter.function.swift entity.name.function.swift, variable.other.jsdoc, support.variable.drive.powershell#e78957—
storage, meta.var.expr storage.type, storage.type.function, keyword.function, storage.type.class, storage.type.property, keyword.other, keyword.local.lua, entity.name.class, meta.function.lua keyword.control.lua, storage.type.enum, storage.type.interface, storage.type.type, entity.name.type.class.java, support.class.php, entity.other.inherited-class.php, entity.name.type.class.groovy, storage.type.rust, entity.name.type.class.swift, source.svelte meta.script.svelte source.ts entity.name.label.ts, meta.directive.on.svelte keyword.control.svelte, storage.type.const.gdscript, storage.type.var.gdscript, source.graphql declaration.meta.type keyword, source.graphql meta.type.interface.graphql keyword.type.graphql, source.graphql keyword.schema.graphql, source.graphql keyword.operation.graphql, source.graphql meta.enum.graphql keyword.enum.graphql, source.graphql meta.fragment.graphql keyword.fragment.graphql, storage.type.trait.php, keyword.type.go, keyword.var.go, storage.type.powershell, keyword.const.go#5ae1d6—
string, string.template, string.quoted.single, punctuation.definition.string, punctuation.definition.string.template, punctuation.definition.string.begin, punctuation.definition.string.end.html source.js-ignored-vscode, punctuation.definition.string.end.html source.js, punctuation.definition.string.end.html.vue, punctuation.definition.string.end.html source.ts, punctuation.definition.string.end.html source.tsx, punctuation.definition.string.end.html source.js.jsx, punctuation.definition.string.end, string.other.link, constant.character.escape.regexp, variable.parameter.url, constant.other.symbol.quoted.single.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.begin.erlang, constant.other.symbol.quoted.single.erlang punctuation.definition.symbol.end.erlang, meta.import.ts punctuation.definition.variable.svelte, punctuation.definition.string.end.html source.css-ignored-vscode, text.html.edge punctuation.definition.variable.js, string.unquoted.plain.out.yaml, string.quoted.single.python punctuation.definition.string.begin.python, string.quoted.single.python punctuation.definition.string.end.python#3ce381—
string.quoted.docstring.multi.python, string.quoted.double.block.python punctuation.definition.string.end.python, string.quoted.double.block.python punctuation.definition.string.begin.python, string.quoted.double.block.python, punctuation.definition.string.begin.python, punctuation.definition.string.end.python#3ce38160—
entity.name.type, support.type, support.class, storage.type, entity.other.inherited-class, keyword.type, storage.type.java, storage.type.primitive.java, storage.type.generic.java, keyword.other.type, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php source.php, punctuation.section.embedded.end.php, storage.type.object.array.java, storage.type.primitive.groovy, storage.type.groovy, meta.definition.type.body.swift meta.function-call.swift, meta.definition.type.class.swift meta.inheritance-clause.swift, variable.other.constant.elixir, source.graphql declaration.meta.type support, source.graphql meta.selections, source.graphql meta.enum.graphql meta.type.object.graphql constant.character.enum.graphql, source.graphql meta.fragment.graphql entity.name.fragment.graphql, entity.name.type.class.php, support.class.php, entity.other.inherited-class.php, entity.other.alias.php, meta.group.simple.subexpression.powershell meta.scriptblock.powershell storage.type.powershell#a579ec—
variable, variable.language, entity.name.type.class.js, entity.name.variable, support.variable.magic, meta.method.body, entity.name.variable, punctuation.definition.variable, meta.class variable.object.property, variable.other.constant entity.name.function, entity.name.variable.tuple-element.cs punctuation.separator.colon.cs, meta.definition.variable.name.groovy, meta.body.struct.cpp, parameter.variable.function.elixir, meta.directive.edge source.js, meta.function.echo.edge source.js, text.html.edge meta.function.echo.edge meta.function-call.js, source.css variable.parameter.keyframe-list.css, source.css meta.property-value.css, source.css.scss meta.at-rule.keyframes.scss entity.name.function.scss, source.css.scss meta.property-value.scss, entity.name.variable.tuple-element, meta.group.simple.subexpression.powershell support.variable.automatic.powershell, support.variable.automatic.powershell, storage.source.cmake, entity.source.cmake#e65555—
source.elm constant.type-constructor#e65555—
source.elm storage.type#a579ec—
entity.name.tag.other.html, entity.name.tag support.class.component, support.class.component.html#a579ec—
source.diff meta.diff.header.to-file, source.diff markup.inserted.diff, source.diff punctuation.definition.to-file.diff, source.diff punctuation.definition.inserted.diff#3ce381—
source.diff punctuation.definition.from-file.diff, source.diff meta.diff.header.from-file, source.diff markup.deleted.diff, source.diff punctuation.definition.deleted.diff#e3836d—
source.diff meta.diff.header.command#56ade6—
source.diff punctuation.definition.range.diff, source.diff meta.diff.range.unified#e78957—
support.variable.liquid, support.class.liquid#e65555—
text.html.basic entity.name, source.js-ignored-vscode, entity.name.tag, meta.embedded.block.blade constant.other.php, meta.embedded.block.blade keyword.operator.comparison.php, meta.embedded.block.blade keyword.operator.arithmetic.php, meta.tag.start.svelte keyword.control.svelte, meta.tag.end.svelte keyword.control.svelte#56ade6—
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html, text.html.vue invalid.illegal.character-not-allowed-here.html, meta.tag.inline.i.start.html, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html.vue, invalid.illegal.character-not-allowed-here.html#56ade6aa—
entity.other.attribute-name, entity.name.tag.liquid, invalid.deprecated.entity.other.attribute-name, meta.embedded.block.blade storage.type.php#dfbb1f—
markup.inline.raw.string.markdown, punctuation.definition.raw.markdown, markup.fenced_code.block.markdown, markup.fenced_code.block.markdown punctuation, markup.raw.block.markdown#a579ec—
fenced_code.block.language#a579ec—
punctuation.definition.list.begin#56ade6—
punctuation.definition.list.begin#56ade6—
entity.name.section, markup.heading.setext#dfbb1f—
punctuation.definition.heading#dfbb1f—
markup.underline.link, markup.underline.link.image#56ade6—
markup.bold, punctuation.definition.bold#e65555bold
markup.strikethrough, punctuation.definition.strikethrough#e3836d—
markup.italic, punctuation.definition.italic#e78957italic
markup.quote, markup.quote.markdown punctuation.definition.quote.begin#d5ab81—
punctuation.definition.quote.begin#56ade6—
meta.embedded.block.frontmatter punctuation.definition.tag.begin, meta.embedded.block.frontmatter punctuation.definition.tag.end, meta.embedded.block.frontmatter string.unquoted.plain.out#435073italic
entity.other.attribute-name.pseudo-class#d5ab81—
entity.other.attribute-name.pseudo-element#d5ab81—
entity.other.attribute-name.class, entity.other.attribute-name.class punctuation.definition.entity#5ae1d6—
entity.other.attribute-name.parent-selector-suffix punctuation.definition.entity#5ae1d6—
support.type.property-name.css, support.type.vendored.property-name, meta.property-list entity.name.tag.css, meta.property-list.scss meta.property-list.scss entity.name.tag.css, meta.property-list meta.property-name, source.css.scss meta.property-list.scss entity.name.tag.css#c1c8da—
source.css.scss entity.other.attribute-name.id , source.css entity.other.attribute-name.id , entity.other.attribute-name.id punctuation.definition.entity#a579ec—
entity.name.tag.reference, meta.property-list#e78957—
keyword.other.unit#e78957—
support.constant.property-value, support.constant.font-name, meta.property-value.css, meta.attribute.style.html#e78957—
constant.numeric#e78957—
entity.name.tag.css, meta.property-list.scss entity.name.tag.css#56ade6—

Shiki preview

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

Loading...

MoonGun Themes by CoderMungan - VS Code Theme