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.background#282c31
  • activityBarBadge.background#ffd3ed
  • activityBarBadge.foreground#821469
  • breadcrumb.foreground#96a3b6
  • diffEditor.insertedLineBackground#45cf962d
  • diffEditor.insertedTextBackground#45cf962d
  • diffEditor.removedLineBackground#e323902d
  • diffEditor.removedTextBackground#e323902d
  • editor.background#2c313b
  • editor.findMatchBackground#f200ffa7
  • editor.findMatchForeground#eae1f1
  • editor.findMatchHighlightBackground#5100ffdc
  • editor.findMatchHighlightForeground#ffffffe8
  • editor.foreground#babcc4
  • editor.inactiveSelectionBackground#5b606e5e
  • editor.selectionBackground#3b54a583
  • editorBracketHighlight.foreground1#CEA0E4
  • editorBracketHighlight.foreground2#c690df
  • editorBracketHighlight.foreground3#c086db
  • editorBracketHighlight.foreground4#b77cd2
  • editorBracketHighlight.foreground5#a16aba
  • editorBracketHighlight.foreground6#9e63ba
  • editorBracketHighlight.unexpectedBracket.foreground#d094ec
  • editorError.foreground#f177e3eb
  • editorGutter.background#1e242c
  • editorLineNumber.activeForeground#948ef9
  • editorLineNumber.foreground#51647d
  • editorLink.activeForeground#688eff
  • editorWarning.foreground#e3e3b369
  • gitDecoration.deletedResourceForeground#e79ab6
  • gitDecoration.modifiedResourceForeground#dcba99df
  • gitDecoration.untrackedResourceForeground#5cb89e
  • list.activeSelectionBackground#9044db
  • list.errorForeground#B48EAD
  • list.hoverBackground#4b2372
  • list.inactiveSelectionBackground#3f314d
  • menu.background#1b1f25
  • sideBar.background#1b1f25
  • sideBar.foreground#96a3b6
  • sideBarSectionHeader.background#2d3a4b
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#443ca7
  • statusBar.debuggingBackground#8e3fbc
  • statusBarItem.remoteBackground#d70599
  • statusBarItem.remoteHoverBackground#b60c83
  • tab.activeForeground#b2badb
  • tab.hoverForeground#bfc4d8
  • tab.inactiveBackground#22242c
  • tab.inactiveForeground#72778b
  • titleBar.activeBackground#22242c
  • titleBar.activeForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.raw.block.fenced.markdown, punctuation.definition.fenced.markdown#00000050—
punctuation.separator.key-value.mapping, punctuation.definition.block.sequence.item.yaml#0099ff—
punctuation.definition.tag.begin.js.jsx, punctuation.definition.tag.end.js.jsx, punctuation.definition.tag.begin.tsx, punctuation.definition.tag.end.tsx, punctuation.definition.tag.begin.svelte, punctuation.definition.tag.end.svelte, punctuation.definition.tag.begin.html.vue, punctuation.definition.tag.end.html.vue, source.vue punctuation.definition.tag.begin.html, source.vue punctuation.definition.tag.end.html, punctuation.definition.tag.begin.astro, punctuation.definition.tag.end.astro, punctuation.definition.tag.end.jsx, punctuation.definition.tag.begin.jsx#1b9294—
source.css punctuation.separator.key-value#328bf1—
text.html.markdown punctuation.definition.metadata.markdown#355399—
keyword.operator.decrement, keyword.operator.increment#38a2ffbold
keyword.operator.class.php, punctuation.separator.scope-resolution.cpp#38a2ffc5—
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#4974e0—
punctuation.definition.link.description.begin.markdown, punctuation.definition.link.description.end.markdown#5447cd—
comment, punctuation.definition.comment#596170—
markup.quote punctuation.definition.blockquote.markdown, variable.language.fenced.markdown#65737E—
meta.separator#65737Ebold
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter, meta.var.expr, meta.parameter-expansion#6aa8db—
punctuation.definition.link.title.begin.markdown, punctuation.definition.link.title.end.markdown#6c61cf—
markup.underline#6f8dd4underline
entity.name.tag.html#6f97fcbold
constant.numeric, constant.character, constant.escape, keyword.other.unit#80cc8fbold
source.css keyword.other.unit#80CC8Fc8—
meta.block variable.other, variable.parameter, variable.language.dart#82c7ff—
meta.function-call#82c7ffa1—
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#87acf0—
meta.tag.start.svelte, source.svelte punctuation.separator.label.js#877aff—
punctuation.separator.comma, punctuation.terminator, punctuation.separator.dictionary.pair.json, punctuation.separator.array.json#7e8faf—
punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end, punctuation.definition.string.rust, punctuation.definition.char.rust#8ca8cd8f—
support.class, support.class.builtin, entity.name.type.rust, entity.name.type.class, meta.class.kotlin, source.scala entity.name.class.declaration, source.scala entity.name.class, entity.name.type.module.elixir, source.cpp support.type, meta.block.class.cpp, meta.class.java, meta.class.java variable#14b9b1—
variable, variable.other.property, punctuation.definition.variable.php, source.sql, string.quoted.other.backtick.sql, entity.other.attribute-name.tsx, entity.other.attribute-name.js.jsx, meta.tag.attributes.tsx, meta.tag.attributes.js.jsx, entity.other.attribute-name.svelte, source.rust, source.dart, meta.embedded.expression.dart, source.php meta.embedded.block, source.css variable, source.java, source.java meta.function-call, source.kotlin, entity.string.template.element.kotlin, source.python, source.scala, meta.template.expression.scala, source.elixir, constant.language.symbol.elixir, entity.other.attribute-name.astro, variable.other.object.property.java, meta.definition.variable.java, variable.other.definition.java, meta.method.body.java, meta.method-call.java variable#8dc0ff—
entity.other.attribute-name.pseudo-class, keyword.control.at-rule.media#8f90ffitalic bold
punctuation.accessor.optional#92c5ff—
entity.other.attribute-name.html#92c7ff—
keyword.operator.logical, keyword.operator.comparison, meta.create.sql, keyword.other.create.sql, storage.modifier.sql, keyword.other.DML.sql, keyword.operator.herestring.shell, keyword.operator.logical.shell, keyword.operator.arithmetic, punctuation.definition.map.elixir#9294ff—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, string.template, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js, source.js.jsx meta.tag.without-attributes, meta.tag.without-attributes.tsx, source.css meta.property-value, source.css support.constant.property-value, source.css support.constant.color.w3c-standard-color-name, source.css meta.property-list, source.css support.constant.font-name, source.css constant.other.color, markup.inserted#98aec9—
punctuation.definition.string.begin.json, punctuation.definition.string.end.json#98AEC96C—
string.other.link.title.markdown, string.other.link.description.markdown, variable.ordered.list.mdx, string.other.begin.link.mdx, string.other.end.link.mdx#9dabed—
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#3f69d1—
keyword, storage.type, storage.modifier, keyword.control, constant.other.color, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, punctuation.definition.variable, storage.modifier.async, entity.other.attribute-name, string.other.link.description.title.markdown, text.html.markdown, constant.other.reference.link.markdown, markup.changed, markup.raw.block, keyword.other.fn.rust, keyword.other.rust, storage.modifier.dart, keyword.other.kotlin#a29bfe—
keyword.control.default#a29bfeitalic
meta.template.expression, punctuation.definition.interpolation.rust, meta.interpolation.rust, punctuation.section.block.begin.kotlin, punctuation.section.block.end.kotlin, punctuation.definition.keyword.kotlin, punctuation.section.embedded.elixir, variable.language.omitted.erlang#a29bfea3—
storage.modifier, keyword.control.as, keyword.control.satisfies, keyword.operator.expression.is, meta.qualified_type, entity.name.scope-resolution, keyword.other.phpdoc, punctuation.separator.annotation.result.python#a29bfed6italic
source.css entity.other.attribute-name.class, source.css keyword.control, source.css entity.name.tag#ad9ef0bold
punctuation.attribute-shorthand.bind.html.vue, punctuation.attribute-shorthand.event.html.vue#b6b0ffbold
markup.inline.raw.string.markdown#c392ff—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.class-method.js entity.name.function.js, variable.function.constructor, source.cpp operatorOverload, source.cpp memberOperatorOverload, entity.name.function.operator.member.cpp, source.cpp keyword.operator.bitwise.shift, source.cpp keyword.other.special-method, punctuation.section.function.begin.python, punctuation.section.function.end.python#c5bfff—
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#c5bfffitalic
constant.other.color, constant.other.php, variable.other.constant#51c1ff—
text.html.derivative, source.tsx meta.jsx.children.tsx, meta.jsx.children.js.jsx#d5e1f6—
string.regexp, meta.group.regexp, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#e08391—
keyword.operator.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp, keyword.operator.quantifier.regexp, constant.other.character-class.regexp#eaa3adbold
constant.character.escape#f0c472—
source.svelte meta.special, source.svelte entity.name.label.js, text.html constant.character, entity.name.tag.reference.scss, string constant.other.placeholder, constant.character.format.placeholder.other.erlang, variable.language.super#fd9fffbold
invalid, invalid.illegal#ff6e97—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js, markup.deleted#FF5370—
variable.language, source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
entity.name.tag.tsx, entity.name.tag.js.jsx, entity.name.tag.svelte, entity.name.tag.template.html.vue, entity.name.tag.script.html.vue, entity.name.tag.style.html.vue, source.vue entity.name.tag.html, entity.name.tag.astro, meta.scope.tag.html.astro, source.mdx entity.name.tag.jsx#0fb9b1bold
entity.name.type.alias, support.other.namespace.use.php, entity.name.type.namespace, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, meta.type.annotation, meta.field.declaration, meta.type.parameters, meta.interface, entity.name.type.interface, storage.type.php, meta.other.type.phpdoc, keyword.other.type.php, storage.type.string.go, storage.type.numeric.go, storage.type.boolean.go, punctuation.definition.typeparameters, punctuation.definition.typeparameters.begin, punctuation.definition.typeparameters.end, source.rust entity.name.type, storage.type.primitive.cpp, meta.function.definition.cpp, storage.type.built-in.primitive.cpp, storage.type.built-in.primitive.c, entity.name.type.go, storage.type.primitive.dart, storage.type.primitive.java, meta.method.return-type.java, storage.type.object.array.java, storage.type.java, support.class.kotlin, meta.function.parameter.typehinted.php support.class, source.js support.type, source.ts support.type, source.jsx support.type, source.tsx support.type, source.python support.type, source.php support.type, source.rust support.type, source.ruby support.type, source.ts entity.other.inherited-class, source.ts meta.type.declaration, source.ts meta.return.type, source.tsx entity.other.inherited-class, source.tsx meta.type.declaration, source.tsx meta.return.type#0fb9b0dditalic
entity.name.tag.yaml, support.type.property-name.json#89afffbold
punctuation.separator.dictionary.key-value, punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#89C2FF6c—
punctuation.definition.list_item.markdown, meta.paragraph.markdown, meta.paragraph.mdx, entity.name.section.markdown, markup.table.markdown#cbd5e1—
markdown.heading, markup.heading, markup.heading.markdown punctuation.definition.heading.markdown#308dffbold
markup.heading entity.name, markup.heading entity.name.section.markdown, heading.1.markdown, heading.2.markdown, heading.3.markdown, heading.4.markdown, heading.5.markdown, heading.6.markdown#73abeebold
support.other.variable, string.other.link, markup.raw.block.fenced.markdown, variable.language.fenced.markdown, markup.table#89c4f4—
constant.language, keyword.other, support.constant, support.variable.property, variable.language.this, variable.language.self.rust, source.css support.constant.property-value, variable.parameter.function.language.special.self.python, meta.class.body.php storage.type.php#38a2ffitalic
keyword.other.create.sql, keyword.other.sql, storage.modifier.sql, keyword.other.DDL.create.II.sql, keyword.other.DML.sql, string.quoted.single, string.quoted.double, string.template, punctuation.section.embedded, entity.other.attribute-name.tsx, entity.other.attribute-name.js.jsx, keyword.other.fn.rust, keyword.other.rust, storage.modifier.dart, source.css support.type.property-name, source.c storage.modifier, storage.modifier.java, constant.language.symbol.elixir, source.cpp support.type, meta.block.class.cpp, entity.name.function.call.cpp, meta.body.function.definition.cpp, meta.field.declaration, keyword.control.export, comment, source.ts variable.parameter—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, markup.bold, markup.bold string, markup heading, 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—bold
markup.italic—italic
*url*, *link*, *uri*—underline
Poku Theme by Weslley Araújo - VS Code Theme