Skip to main content
CodingTheme

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#2A2A35
  • activityBar.border#343442
  • activityBar.dropBackground#2A2A35
  • activityBar.foreground#BABABA
  • activityBarBadge.background#60617B
  • activityBarBadge.foreground#BABABA
  • badge.background#D3869B
  • badge.foreground#2A2A35
  • button.background#60617B80
  • button.foreground#BABABA
  • button.hoverBackground#60617B60
  • debugToolBar.background#2A2A35
  • diffEditor.insertedTextBackground#AF95BB30
  • diffEditor.insertedTextBorder#EDB1BD00
  • diffEditor.removedTextBackground#A7C4C830
  • diffEditor.removedTextBorder#A7C4C800
  • dropdown.background#2A2A35
  • dropdown.border#343442
  • dropdown.foreground#BABABA
  • editor.background#2A2A35
  • editor.findMatchBackground#83A59870
  • editor.findMatchHighlightBackground#EDB1BD30
  • editor.findRangeHighlightBackground#83A59870
  • editor.foreground#BABABA
  • editor.hoverHighlightBackground#A7C4C850
  • editor.lineHighlightBackground#34344260
  • editor.lineHighlightBorder#34344200
  • editor.selectionBackground#A7C4C840
  • editor.selectionHighlightBackground#A7C4C840
  • editorBracketMatch.background#60617B80
  • editorBracketMatch.border#2A2A3500
  • editorCodeLens.foreground#BABABA90
  • editorCursor.foreground#BABABA
  • editorError.foreground#A7C4C8
  • editorGroup.border#343442
  • editorGroup.dropBackground#34344260
  • editorGroupHeader.noTabsBackground#343442
  • editorGroupHeader.tabsBackground#2A2A35
  • editorGroupHeader.tabsBorder#343442
  • editorGutter.addedBackground#AF95BB
  • editorGutter.background#2A2A3500
  • editorGutter.deletedBackground#A7C4C8
  • editorGutter.modifiedBackground#83A598
  • editorHoverWidget.background#2A2A35
  • editorHoverWidget.border#343442
  • editorIndentGuide.activeBackground#BABABA50
  • editorIndentGuide.background#BABABA20
  • editorInfo.foreground#60617B
  • editorLineNumber.foreground#3F3F50
  • editorLink.activeForeground#BABABA
  • editorOverviewRuler.addedForeground#83A598
  • editorOverviewRuler.border#2A2A3500
  • editorOverviewRuler.commonContentForeground#60617B
  • editorOverviewRuler.currentContentForeground#60617B
  • editorOverviewRuler.deletedForeground#83A598
  • editorOverviewRuler.errorForeground#A7C4C8
  • editorOverviewRuler.findMatchForeground#BABABA
  • editorOverviewRuler.incomingContentForeground#A7C4C8
  • editorOverviewRuler.infoForeground#D3869B
  • editorOverviewRuler.modifiedForeground#83A598
  • editorOverviewRuler.rangeHighlightForeground#BABABA
  • editorOverviewRuler.selectionHighlightForeground#3F3F50
  • editorOverviewRuler.warningForeground#CFCEAB
  • editorOverviewRuler.wordHighlightForeground#3F3F50
  • editorOverviewRuler.wordHighlightStrongForeground#3F3F50
  • editorRuler.foreground#BABABA40
  • editorSuggestWidget.background#2A2A35
  • editorSuggestWidget.border#343442
  • editorSuggestWidget.foreground#BABABA
  • editorSuggestWidget.highlightForeground#A7C4C8
  • editorSuggestWidget.selectedBackground#343442
  • editorWarning.foreground#CFCEAB
  • editorWhitespace.foreground#BABABA20
  • editorWidget.background#2A2A35
  • editorWidget.border#343442
  • errorForeground#A7C4C8
  • extensionButton.prominentBackground#AF95BB80
  • extensionButton.prominentHoverBackground#AF95BB30
  • focusBorder#343442
  • foreground#BABABA
  • gitDecoration.conflictingResourceForeground#BF584A
  • gitDecoration.deletedResourceForeground#D3869B
  • gitDecoration.ignoredResourceForeground#60617B
  • gitDecoration.modifiedResourceForeground#CFCEAB
  • gitDecoration.untrackedResourceForeground#C4A492
  • icon.foreground#A7C4C8
  • input.background#BABABA05
  • input.border#343442
  • input.foreground#BABABA
  • input.placeholderForeground#BABABA60
  • inputValidation.errorBackground#A7C4C880
  • inputValidation.errorBorder#A7C4C8
  • inputValidation.infoBackground#60617B80
  • inputValidation.infoBorder#83A598
  • inputValidation.warningBackground#CFCEAB80
  • inputValidation.warningBorder#A7C4C8
  • list.activeSelectionBackground#34344280
  • list.activeSelectionForeground#A7C4C8
  • list.dropBackground#343442
  • list.focusBackground#343442
  • list.focusForeground#BABABA
  • list.highlightForeground#A7C4C8
  • list.hoverBackground#34344280
  • list.hoverForeground#BABABA
  • list.inactiveSelectionBackground#34344280
  • list.inactiveSelectionForeground#A7C4C8
  • merge.border#2A2A3500
  • merge.currentContentBackground#60617B20
  • merge.currentHeaderBackground#60617B40
  • merge.incomingContentBackground#A7C4C820
  • merge.incomingHeaderBackground#A7C4C840
  • minimap.selectionHighlight#A7C4C840
  • panel.border#343442
  • panelTitle.activeForeground#BABABA
  • peekView.border#343442
  • peekViewEditor.background#34344250
  • peekViewEditor.matchHighlightBackground#EDB1BD30
  • peekViewEditorGutter.background#34344250
  • peekViewResult.background#34344250
  • peekViewResult.fileForeground#BABABA
  • peekViewResult.matchHighlightBackground#A7C4C830
  • peekViewResult.selectionBackground#A7C4C830
  • peekViewResult.selectionForeground#A7C4C830
  • peekViewTitle.background#34344250
  • peekViewTitleDescription.foreground#BABABA
  • peekViewTitleLabel.foreground#BABABA
  • progressBar.background#A7C4C8
  • scrollbar.shadow#2A2A35
  • scrollbarSlider.activeBackground#A7C4C8
  • scrollbarSlider.background#343442
  • scrollbarSlider.hoverBackground#3F3F50
  • selection.background#A7C4C880
  • sideBar.background#2A2A35
  • sideBar.border#343442
  • sideBar.foreground#BABABA
  • sideBarSectionHeader.background#2A2A3500
  • sideBarSectionHeader.foreground#BABABA
  • sideBarTitle.foreground#BABABA
  • statusBar.background#2A2A35
  • statusBar.border#343442
  • statusBar.debuggingBackground#EDB1BD
  • statusBar.debuggingBorder#2A2A3500
  • statusBar.debuggingForeground#2A2A35
  • statusBar.foreground#BABABA
  • statusBar.noFolderBackground#2A2A35
  • statusBar.noFolderBorder#2A2A3500
  • tab.activeBackground#343442
  • tab.activeBorder#A7C4C8
  • tab.activeForeground#BABABA
  • tab.border#2A2A3500
  • tab.inactiveBackground#2A2A35
  • tab.inactiveForeground#BABABA80
  • tab.unfocusedActiveBorder#2A2A3500
  • tab.unfocusedActiveForeground#BABABA
  • tab.unfocusedInactiveForeground#60617B
  • terminal.ansiBlack#343442
  • terminal.ansiBlue#A7C4C8
  • terminal.ansiBrightBlack#60617B
  • terminal.ansiBrightBlue#A7C4C8
  • terminal.ansiBrightCyan#CFCEAB
  • terminal.ansiBrightGreen#83A598
  • terminal.ansiBrightMagenta#AF95BB
  • terminal.ansiBrightRed#D3869B
  • terminal.ansiBrightWhite#BABABA
  • terminal.ansiBrightYellow#CFCEAB
  • terminal.ansiCyan#CFCEAB
  • terminal.ansiGreen#83A598
  • terminal.ansiMagenta#AF95BB
  • terminal.ansiRed#D3869B
  • terminal.ansiWhite#BABABA
  • terminal.ansiYellow#CFCEAB
  • terminal.background#2A2A35
  • terminal.foreground#BABABA
  • textLink.activeForeground#60617B
  • textLink.foreground#83A598
  • titleBar.activeBackground#2A2A35
  • titleBar.activeForeground#BABABA
  • titleBar.inactiveBackground#2A2A35
  • widget.shadow#1D2021

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, punctuation.definition.tag, comment.block.documentation punctuation.definition.bracket, source.ocaml comment constant.regexp meta.separator, markup.other.anchor support.constant, markup.fenced_code, markup.fenced_code punctuation.definition#60617B—
constant.character, constant.escape, text.html.markdown, punctuation.definition.list_item, keyword.begin.tag.ejs, constant.name.attribute.tag.pug, source.clojure meta.symbol, constant.other.description.jsdoc, keyword.other.array.phpdoc.php, keyword.operator.other.powershell, meta.link.inline punctuation.definition.string, source.sql, source meta.brace, source punctuation, text.html punctuation, markup meta punctuation.definition, meta.bracket.julia, meta.array.julia, punctuation.separator.key-value, entity.name.footnote, source.ocaml punctuation.definition.tag, source.ocaml entity.name.filename, source.reason entity.name.filename, entity.other.attribute-name strong, binding.fsharp keyword.symbol.fsharp, entity.name.record.field.elm, entity.name.record.field.accessor.elm, storage.modifier.array.bracket, source.css entity.other, meta.attribute-selector punctuation.definition.entity, markup.other.anchor string, keyword.operator#BABABA—
keyword, keyword.control, keyword.other.template, keyword.other.substitution, storage.modifier, meta.tag.sgml, punctuation.accessor, constant.other.color, entity.name.section, markup.heading, markup.heading punctuation.definition, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, storage.type.function, text.pug meta.tag.other, source.clojure storage.control, meta.expression.clojure, punctuation.separator.slice.python, punctuation.separator.question-mark.cs, punctuation.definition.parameters.varargs, source.go keyword.operator, punctuation.separator.pointer-access, punctuation.separator.other.ruby, keyword.package, keyword.import, punctuation.definition.keyword, punctuation.separator.hash.cs, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, source.kotlin storage.type.import, source.kotlin storage.type.package, constant.string.documentation.powershell, punctuation.section.directive, punctuation.definition.attribute, punctuation.definition.preprocessor, punctuation.separator.namespace, punctuation.separator.method, keyword.control punctuation.definition.function, source.ocaml variable.interpolation string, source.reason variable.interpolation, punctuation.definition.directive, storage.type.modifier, keyword.other.class.fileds, source.toml entity.other.attribute-name, source.css entity.name.tag.custom, sharing.modifier, storage.type.js, keyword.control.class.ruby, keyword.control.def.ruby#A7C4C8—
variable, variable.object, variable.other, variable.parameter, support, entity.name.module, variable.import.parameter, variable.other.class, meta.toc-list.id.html, source.json meta.structure.dictionary.json support.type.property-name.json, meta.var.clojure, entity.name.variable, source.java meta.class.body.java, entity.name.package.go, source.c, source.cpp, source.go, source.python, meta.function-call.arguments.python, source.ruby, source.coffee.embedded.source, source.coffee, storage.modifier.import, storage.modifier.package, storage.type.annotation, punctuation.definition.annotation, source.groovy.embedded.source, punctuation.definition.variable, source.powershell, string.quoted.interpolated.vala constant.character.escape.vala, source.apacheconf, source.objc, source.crystal, string.quoted.double.kotlin entity.string.template.element.kotlin, entity.name.package.kotlin, meta.template.expression.kotlin, parameter.variable.function, variable.other.constant.elixir, source.elixir.embedded.source, source.sql.embedded, punctuation.definition.placeholder, source.swift, source.julia, source.shell, variable.other.normal punctuation.definition.variable.shell, source.reason variable.language, source.reason variable.language string.other.link, source.elm meta.value, source.elm meta.declaration.module, meta.embedded.block variable punctuation.definition.variable.php, string.quoted.double.class.other, source.toml keyword, support.type.nim, source.tf meta.template.expression, source.scala entity.name.import, markup.code#C4A492—
support.variable.property, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, entity.other.attribute-name.id, entity.other.attribute-name.id punctuation.definition.entity, entity.name.type.annotation.kotlin, support.type.primitive, meta.type.parameters entity.name.type, meta.type.annotation entity.name.type, punctuation.definition.typeparameters, source.python support.type.python, comment.block.documentation.phpdoc.php keyword.other.type.php, storage.type, keyword.type, punctuation.definition.storage.type.objc, markup punctuation.definition, comment.block.documentation entity.name.type, punctuation.separator.clause-head-body, storage.class.std.rust, storage.modifier.lifetime.rust, entity.name.lifetime.rust, support.type.vb, entity.name.type.kotlin, support.type.julia, constant.other.reference, source.graphql support.type, source.reason support.type string, entity.name.type.fsharp, storage.type.user-defined, storage.type.built-in, support.type.builtin, source.swift support.type, support.class.crystal, storage.type.integral, source.hlsl support.type.other, source.cpp entity.name.type, support.class.builtin, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, markup.raw.monospace, markup.mark, markup.meta.attribute-list, variable.other.readwrite.instance.ruby, punctuation.definition.variable.ruby, variable.other.readwrite.global.ruby#83A598—
constant, variable.other.constant, support.constant, punctuation.definition.entity, constant.character.entity, support.variable.magic, markup.quote, entity.name.type.type-parameter.cs, punctuation.bracket.angle, entity.name.function.preprocessor.c, storage.type.scala, entity.helper.apacheconf, variable.language.crystal, punctuation.definition.constant, support.constant punctuation.definition.variable, constant.character.math, support.class.math, source.graphql constant.character, source.reason constant.language.list, source.cpp variable.other.enummember, support.variable.class.hideshow, entity.other.attribute-name.class, meta.attribute.id entity.other.attribute-name, text.html entity.other.attribute-name, meta.tag.attributes entity.other.attribute-name, text.xml entity.other.attribute-name, source.cs entity.other.attribute-name, constant.character.format.placeholder, constant.other.placeholder, source.vue entity.other.attribute-name, entity.other.attribute-name.mjml, source.vue meta.directive punctuation.separator.key-value, meta.definition.attribute-entry punctuation.separator#CFCEAB—
variable.language, variable.parameter.function.language.special, markup.bold, markup.italic, punctuation.definition.italic, punctuation.definition.bold, entity.name.tag, variable.language punctuation.definition.variable, support.type.exception.python, storage.modifier.super, source.go keyword, keyword.function.go, meta.separator, storage.modifier.static.rust, source.r meta.function.r keyword.control.r, storage.type.def, meta.class.identifier storage.modifier, keyword.declaration, comment.block.documentation punctuation.definition.block.tag, comment.block.documentation punctuation.definition.inline.tag, entity.tag.apacheconf, source.julia storage.modifier, constant.language.empty-list.haskell, meta.function.powershell storage.type.powershell, punctuation.terminator.function, keyword.other, source.ocaml keyword markup.underline, source.ocaml storage.type markup.underline, binding.fsharp keyword, function.anonymous keyword, function.anonymous keyword.symbol.fsharp, meta.embedded.block variable.language punctuation.definition.variable.php, markup.deleted.diff, source.tf support.class.variable, meta.function.lua keyword.control.lua, markup.italic punctuation.definition, markup.bold punctuation.definition, markup.block entity.name.tag#A7C4C8—
string, punctuation.definition.string, source.css support.constant, entity.name.import.go, markup.raw.texttt, markup.inserted.diff, source.scala punctuation.definition.character, constant.character.literal.scala, source.tf entity.name#AF95BB—
string.template, punctuation.definition.string.template, string.interpolated.python string.quoted.single.python, string.quoted.double.heredoc, string.quoted.interpolated.vala, string.quoted.interpolated.vala punctuation.definition.string, string.regexp.apacheconf, markup.inline.raw.string, markup.inline.raw punctuation.definition.raw, string.quoted.double.interpolated.crystal, string.quoted.double.interpolated.crystal punctuation.definition.string, text.tex markup.raw#AF95BB—
constant.numeric, constant.language, punctuation.separator.decimal.period.php, keyword.operator.null-conditional.cs, punctuation.separator.question-mark.cs, constant.integer.apacheconf, keyword.operator.nullable-type, constant.language punctuation.definition.variable, constant.language punctuation.definition.constant, constant.others.fsharp, keyword.other.unit, string.quoted.double.skinparam.value, source.toml constant#D3869B—
variable.function, support.type.property-name, entity.name.function, string.other.link, markup.link, support.type.vendored, support.other.variable, meta.function-call.generic.python, meta.method-call.groovy meta.method.groovy, meta.class.body.groovy meta.method.body.java storage.type.groovy, punctuation.definition.decorator, support.function.any-method, text.tex support.function, text.tex punctuation.definition.function, entity.name.section.fsharp entity.name.section.fsharp, support.variable.class.function, keyword.control.cucumber.table, punctuation.decorator, source.tf support.class#EDB1BD—
entity.name, entity.other, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, support.type, support.class, punctuation.definition.parameters, support.function, support.function.construct, markup.changed.git_gutter, markup.underline.link, markup.underline.link.image, markup.underline, meta.symbol.namespace.clojure, entity.mime-type.apacheconf, keyword.operator.function.infix, entity.name.function.infix, entity.name.function.call.kotlin, text.tex support.function.verb, text.tex support.function.texttt, source.reason constant.language.unit, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, constant.language.unit.fsharp, source.wsd support.class.preprocessings, keyword.language.gherkin.feature.scenario, source.nim keyword.other.common.function, entity.name.type.namespace, entity.name.scope-resolution.function.call#CFCEAB—
source.js constant.other.object.key.js string.unquoted.label.js, source.js punctuation.section.embedded, punctuation.definition.template-expression, support.class, entity.name.type, storage.type.string.python, string.interpolated.pug, support.constant.handlebars, source.clojure punctuation.section.set, source.clojure punctuation.section.metadata, entity.global.clojure, source.python meta.function-call.python support.type.python, entity.other.inherited-class, punctuation.definition.interpolation, punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby source.ruby, support.constant.math, entity.namespace.r, meta.method-call.groovy storage.type.groovy, source.scala entity.name.class.declaration, constant.character.escape, support.function.macro.julia, string.replacement.apacheconf, storage.modifier.using.vala, constant.other.haskell, source.objc entity.name.tag, string.quoted.other.literal.upper.crystal punctuation.definition.string, meta.embedded.line.crystal punctuation.section.embedded, meta.embedded.line.crystal punctuation.section.embedded source.crystal, punctuation.section.embedded, punctuation.section.tag, punctuation.section.embedded source.swift, variable.other.bracket punctuation.definition.variable, string.interpolated.dollar punctuation.definition.string, constant.character.escape punctuation.definition.keyword, source.ocaml entity.name.class constant.numeric, source.reason entity.name.class, keyword.format.specifier.fsharp, support.module.elm, meta.embedded.block.php punctuation.definition.variable.php, source.vala storage.type, support.variable.class.group, entity.name.type.class, source.tf meta.keyword.list, source.tf meta.keyword.map, entity.name.class.lua, markup.substitution#CFCEAB—
invalid, invalid.illegal#BF584A—

Shiki preview

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

Loading...

Pastel night by GracefulPotato - VS Code Theme