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 stringbold
markup.italicitalic
*url*, *link*, *uri*underline
Poku Theme by Weslley Araújo - VS Code Theme