Skip to main content
Coding Theme

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.activeBorder#795DA3
  • activityBar.background#DDD6C1
  • activityBar.foreground#586e75
  • activityBarBadge.background#795DA3
  • badge.background#795DA3
  • badge.foreground#fdf6e3
  • button.background#795DA3
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#795DA3
  • editor.background#F9F4E7
  • editor.findMatchBackground#CB4B1626
  • editor.findMatchHighlightBackground#85990026
  • editor.foreground#333333
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#795DA326
  • editor.selectionHighlightBackground#93a1a126
  • editorCursor.background#eee8d5
  • editorCursor.foreground#DC322FCC
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#d3cbb7
  • editorHoverWidget.background#d3cbb7
  • editorIndentGuide.activeBackground#081E2540
  • editorIndentGuide.background#586E7533
  • editorLineNumber.activeForeground#586e75
  • editorLineNumber.foreground#93a1a1
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#795DA3
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#795DA3
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#795DA3
  • list.activeSelectionBackground#795DA320
  • list.activeSelectionForeground#6C6C6C
  • list.highlightForeground#795DA3
  • list.hoverBackground#795DA344
  • list.hoverForeground#333333
  • list.inactiveSelectionBackground#795DA320
  • minimap.selectionHighlight#EEE8D5
  • notebook.cellEditorBackground#F7F0E0
  • panel.border#DDD6C1
  • peekView.border#795DA3
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#795DA3
  • pickerGroup.foreground#795DA3
  • ports.iconRunningProcessForeground#2AA19899
  • progressBar.background#795DA3
  • quickInput.foreground#657b83
  • quickInputList.focusBackground#795DA340
  • selection.background#795DA350
  • sideBar.background#EEE8D5
  • sideBar.foreground#657b83
  • sideBarTitle.foreground#586E75
  • statusBar.background#795DA3
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#eee
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • statusBarItem.remoteBackground#795DA3
  • tab.activeBackground#F9F4E7
  • tab.activeModifiedBorder#cb4b16
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • tab.lastPinnedBorder#FDF6E3
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#eee8d5
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#eee8d5
  • terminal.ansiYellow#b58900
  • terminal.foreground#657b83
  • titleBar.activeBackground#eee8d5
  • walkThrough.embeddedEditorBackground#00000014

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#4f5463—
entity.name.function#795da3bold
keyword, storage.type, variable.language.this, keyword.control, keyword.control.import, support.type.object.module, keyword.control.default, source.ts variable.language.super#800080bold
string#008A00—
comment#878787—
constant.numeric, constant.language.boolean#0086B3—
constant.language.boolean#b58900—
variable.parameter#71788e—
variable.other.property#646a7d—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#4f5463—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, constant.character.entity, punctuation.definition.entity#4f5463—
entity.name.tag#800080—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#cf7317—
string.quoted.double.html#008A00—
text.html#435156—
keyword.control.at-rule.import.css, punctuation.definition.keyword.css, keyword.control.at-rule.media.css, source.css keyword.control.at-rule#800080bold
meta.selector.css, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, punctuation.definition.entity.css#444—
meta.property-name, support.type.property-name#0086B3—
meta.property-value, meta.property-value constant.other, support.constant.property-value, source.css constant.numeric, source.css constant.language, source.css keyword.other.unit#435156—
source.css keyword.control, source.css punctuation.definition.keyword#A71D5Dbold
punctuation.section.tag.twig#0086B3—
keyword.control.twig#A71D5Dbold
variable.other.django.block, variable.other.django#435156—
support.constant.laravel-blade#0086B3—
entity.name.function.laravel-blade#A71D5Dbold
source.php.embedded.line.html variable.other.php, source.php.embedded.line.html punctuation.definition.variable.php#435156—
support.type.property-name.json#4f5463—
string.quoted.double.json#008A00—
constant.numeric.json.comments, constant.language.json.comments#268bd2—
keyword.other.class.php#435156
keyword.blade, support.function.construct.begin.blade, support.function.construct.end.blade#A71D5D—
support.function.construct.begin.blade, support.function.construct.end.blade#090910—
comment, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, variable.other.table.property.lua, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, constant.other.table-name, constant.other.placeholder, variable.other.field, keyword.function.go, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, source.python support.type.python, source.swift support.type, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.apex keyword.type, sharing.modifier, meta.preprocessor.pragma.nim, entity.name.scope-resolution.function.call, support.class.builtin, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, meta.tag.attributes entity.other.attribute-name, text.html entity.other.attribute-name, meta.attribute-selector entity.other.attribute-name—italic
keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, punctuation.bracket.angle, keyword.other.new, punctuation.separator.question-mark.cs, source.go keyword.operator, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, variable.parameter, support.function.builtin.rust, entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, meta.function.parameters variable.other, entity.name.type.annotation.kotlin, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, source.ruby punctuation.definition.variable, punctuation.separator.method, support.function.textbf, source.graphql support.type.builtin, source.ocaml variable.interpolation string, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, keyword.control.class.ruby, keyword.control.def.ruby, storage—bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string, text.html punctuation.section.embedded, variable.other.c, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, keyword.other.fn.rust, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, source.hlsl storage.type.basic, storage.modifier.lifetime.rust, storage.type.core.rust, source.vala storage.type.generic, storage.type.scala, storage.modifier, storage.type.modifier, storage.type.built-in, storage.type.primitive, source.go storage.type, storage.type.php, storage.type.function.kotlin, source.nim storage.type.concrete, storage.type.integral—italic
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, variable.parameter.r, variable.parameter.handlebars, keyword.operator.other.powershell, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.function-end.lua, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, storage.modifier.static.rust, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, source.lua storage.type.function, storage.modifier.using.vala, storage.modifier.array.bracket, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css—
meta.import keyword.control—bold
keyword.package.go, keyword.import.go, keyword.var.go, keyword.function.go, source.go keyword#800080bold
source.go storage.type#268BD2italic
source.ts support.type.primitive#268BD2italic
support.class.component.vue#795DA3bold
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue#4f5463—
#4f5463—
entity.name.function#795da3bold
keyword, storage.type, variable.language.this, keyword.control, keyword.control.import, support.type.object.module, keyword.control.default, source.ts variable.language.super#800080bold
string#008A00—
comment#878787—
constant.numeric, constant.language.boolean#0086B3—
constant.language.boolean#b58900—
variable.parameter#71788e—
variable.other.property#646a7d—
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#4f5463—
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, constant.character.entity, punctuation.definition.entity#4f5463—
entity.name.tag#800080—
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#cf7317—
string.quoted.double.html#008A00—
text.html#435156—
keyword.control.at-rule.import.css, punctuation.definition.keyword.css, keyword.control.at-rule.media.css, source.css keyword.control.at-rule#800080bold
meta.selector.css, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css, punctuation.definition.entity.css#444—
meta.property-name, support.type.property-name#0086B3—
meta.property-value, meta.property-value constant.other, support.constant.property-value, source.css constant.numeric, source.css constant.language, source.css keyword.other.unit#435156—
source.css keyword.control, source.css punctuation.definition.keyword#A71D5Dbold
punctuation.section.tag.twig#0086B3—
keyword.control.twig#A71D5Dbold
variable.other.django.block, variable.other.django#435156—
support.constant.laravel-blade#0086B3—
entity.name.function.laravel-blade#A71D5Dbold
source.php.embedded.line.html variable.other.php, source.php.embedded.line.html punctuation.definition.variable.php#435156—
support.type.property-name.json#4f5463—
string.quoted.double.json#008A00—
constant.numeric.json.comments, constant.language.json.comments#268bd2—
keyword.other.class.php#435156
keyword.blade, support.function.construct.begin.blade, support.function.construct.end.blade#A71D5D—
support.function.construct.begin.blade, support.function.construct.end.blade#090910—
comment, punctuation.definition.comment, entity.other, variable.language, support.type.vendored, support.constant.vendored, markup.quote, markup.italic, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, keyword.control.clojure, source.clojure meta.symbol.dynamic, keyword.other.this.cs, keyword.other.base.cs, variable.other.member.c, support.type.core.rust, variable.other.object.property, variable.other.property, source.r meta.function.r keyword.control.r, comment.line.roxygen.r keyword, comment.line.roxygen.r variable.parameter.r, keyword.control.inheritance.coffee, comment.block.documentation.phpdoc.php keyword, keyword.other.array.phpdoc.php, comment.block.javadoc.java keyword, comment.block.javadoc.java variable.parameter.java, keyword.operator.documentation.powershell, variable.other.table.property.lua, variable.parameter.function.language.special, comment.block.documentation.scala keyword, comment.block.documentation.scala variable.parameter, support.function.builtin.go, constant.other.symbol.hashkey.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, constant.other.symbol.ruby, constant.other.table-name, constant.other.placeholder, variable.other.field, keyword.function.go, entity.alias.import.go, source.swift keyword.other.declaration-specifier, support.variable.swift, keyword.other.capture-specifier, text.tex support.function.emph, constant.other.math, support.function.textit, entity.name.footnote, entity.name.function.directive.graphql, source.graphql support.type.enum, source.ocaml entity.name.filename, source.reason entity.name.filename, abstract.definition.fsharp keyword, abstract.definition.fsharp entity, function.anonymous keyword, entity.name.record.field.accessor.elm, support.type.primitive, support.type.builtin, keyword.type.cs, source.python support.type.python, source.swift support.type, entity.name.type.kotlin, support.type.julia, variable.other.member, keyword.other.import, keyword.package, keyword.import, source.wsd keyword.control.diagram, keyword.language.gherkin.feature.step, source.apex keyword.type, sharing.modifier, meta.preprocessor.pragma.nim, entity.name.scope-resolution.function.call, support.class.builtin, source.tf meta.keyword.string, source.tf meta.keyword.number, source.scala entity.name.class, meta.import keyword.control, meta.tag.attributes entity.other.attribute-name, text.html entity.other.attribute-name, meta.attribute-selector entity.other.attribute-name—italic
keyword, keyword.control, keyword.operator, keyword.other.template, keyword.other.substitution, constant.other.color, punctuation.accessor, entity.name.section, markup.bold, markup.bold string, markdown.heading, markup.inline.raw punctuation.definition.raw, markup.heading, punctuation.bracket.angle, keyword.other.new, punctuation.separator.question-mark.cs, source.go keyword.operator, punctuation.separator.namespace, constant.other.symbol.ruby punctuation.definition.constant.ruby, variable.parameter, support.function.builtin.rust, entity.name.variable.parameter, punctuation.separator.hash.cs, constant.other.symbol.ruby punctuation.definition.constant.ruby, constant.other.symbol.hashkey.ruby punctuation.definition.constant.ruby, meta.function.parameters variable.other, entity.name.type.annotation.kotlin, parameter.variable.function, markup punctuation.definition, punctuation.section.directive, punctuation.definition.preprocessor, source.ruby punctuation.definition.variable, punctuation.separator.method, support.function.textbf, source.graphql support.type.builtin, source.ocaml variable.interpolation string, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor., meta.function.parameters variable punctuation.definition.variable.php, source.wsd keyword.other.activity, keyword.control.class.ruby, keyword.control.def.ruby, storage—bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string, text.html punctuation.section.embedded, variable.other.c, entity.name.lifetime.rust, source.rust meta.attribute.rust, meta.attribute.id entity.other.attribute-name, keyword.other.fn.rust, source.ocaml punctuation.definition.tag emphasis, source.tf entity.name, source.hlsl storage.type.basic, storage.modifier.lifetime.rust, storage.type.core.rust, source.vala storage.type.generic, storage.type.scala, storage.modifier, storage.type.modifier, storage.type.built-in, storage.type.primitive, source.go storage.type, storage.type.php, storage.type.function.kotlin, source.nim storage.type.concrete, storage.type.integral—italic
keyword.begin.tag.ejs, source.python meta.function.decorator.python support.type.python, source.cs keyword.other, keyword.other.var.cs, source.go keyword, variable.parameter.r, variable.parameter.handlebars, keyword.operator.other.powershell, source.css variable.parameter, string.interpolated variable.parameter, source.apacheconf keyword, keyword.other.julia, source.objc keyword.other.property.attribute, source.sql keyword.other, keyword.other.using.vala, keyword.operator.function.infix, keyword.control.directive, keyword.other.rust, keyword.other.declaration-specifier.swift, entity.name.function.swift, keyword.control.function-end.lua, keyword.control.class, keyword.control.def, punctuation.definition.variable, entity.name.section.latex, source.ocaml keyword markup.underline, source.ocaml constant.language constant.numeric entity.other.attribute-name.id.css, source.reason entity.other.attribute-name constant.language constant.numeric, keyword.format.specifier.fsharp, entity.name.section.fsharp, binding.fsharp keyword, binding.fsharp keyword.symbol, record.fsharp keyword, keyword.symbol.fsharp, entity.name.section.fsharp keyword, namespace.open.fsharp keyword, namespace.open.fsharp entity, source.cpp keyword.other, source.c keyword.other, keyword.other.unit, meta.import.haskell keyword, keyword.declaration.dart, source.wsd keyword.other, keyword.other.skinparam, source.css keyword.control, source.css keyword.operator, keyword.language.gherkin.feature.scenario, keyword.control.cucumber.table, source.toml entity.other.attribute-name, source.toml keyword, keyword.other.nim, source.nim keyword.other.common.function, source.nim keyword.other, source.scala keyword.declaration, source.scala entity.name.class.declaration, storage.modifier.static.rust, storage.modifier.import, storage.modifier.package, meta.class.identifier storage.modifier, source.lua storage.type.function, storage.modifier.using.vala, storage.modifier.array.bracket, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css—
meta.import keyword.control—bold
keyword.package.go, keyword.import.go, keyword.var.go, keyword.function.go, source.go keyword#800080bold
source.go storage.type#268BD2italic
source.ts support.type.primitive#268BD2italic
support.class.component.vue#795DA3bold
entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue#4f5463—
Clasic Harmonized by drkcode - VS Code Theme