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#101010
  • diffEditor.insertedLineBackground#162b16
  • diffEditor.insertedTextBackground#1f3d1f
  • diffEditor.removedLineBackground#2b1616
  • diffEditor.removedTextBackground#3d1f1f
  • editor.background#141414
  • editor.findMatchBackground#264f7844
  • editor.findMatchBorder#7ef2f4
  • editor.findMatchHighlightBackground#264f7822
  • editor.findRangeHighlightBackground#264f7818
  • editor.foreground#ffffff
  • editor.lineHighlightBackground#000000
  • editor.selectionBackground#DDF0FF33
  • editor.selectionHighlightBackground#264f7844
  • editor.wordHighlightBackground#264f7833
  • editor.wordHighlightStrongBackground#264f7866
  • editorBracketMatch.background#FFFFFF14
  • editorBracketMatch.border#7ef2f4
  • editorCursor.foreground#999999
  • editorError.foreground#ff4d4d
  • editorGhostText.foreground#6fc2ff
  • editorGroupHeader.tabsBackground#101010
  • editorGutter.addedBackground#98d87e
  • editorGutter.deletedBackground#b41916
  • editorGutter.modifiedBackground#e58d03
  • editorIndentGuide.activeBackground#FFFFFF33
  • editorIndentGuide.background#FFFFFF1A
  • editorInfo.foreground#6fc2ff
  • editorInlayHint.background#1a1a1a
  • editorInlayHint.foreground#808080
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#FFFFFF55
  • editorStickyScroll.background#141414
  • editorStickyScrollHover.background#1a1a1a
  • editorWarning.foreground#ffb020
  • editorWhitespace.foreground#FFFFFF40
  • minimap.background#141414
  • panel.background#0f0f0f
  • sideBar.background#111111
  • statusBar.background#101010
  • statusBar.foreground#ffffffcc
  • titleBar.activeBackground#101010
  • titleBar.activeForeground#ffffffcc

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#ffffff
deco.folding#667f76
comment#808080italic
constant#b41916
entity#7ef2f4 bold
keyword#e58d03
storage#fb90f0
string#98d87e
support#b47cef
variable#8d9ff4
invalid.deprecated#D2A8A1italic underline
invalid.illegal#F8F8F8
-----------------------------------
meta.embedded.block, punctuation.whitespace.embedded
meta.embedded.line
entity.other.inherited-class#8528bditalic
string meta.embedded#DAEFA3
string constant#DDF2A4
string.regexp#98d87e
string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#CF7D34
string variable#8d9ff4
support.function#eee35b
support.constant#e2655a
meta.preprocessor.c#8996A8
meta.preprocessor.c keyword#AFC4DB
meta.tag.sgml.doctype, meta.tag.sgml.doctype entity, meta.tag.sgml.doctype keyword, meta.tag.sgml.doctype variable, meta.tag.sgml.doctype string, meta.tag.preprocessor.xml, meta.tag.preprocessor.xml entity, meta.tag.preprocessor.xml string#7c7c7c
declaration.tag, declaration.tag entity, meta.tag, meta.tag entity#8d4aab
declaration.tag.inline, declaration.tag.inline entity, source entity.name.tag, source entity.other.attribute-name, meta.tag.inline, meta.tag.inline entity#8d4aabitalic
meta.selector.css entity.name.tag#e99914
meta.selector.css entity.other.attribute-name.tag.pseudo-class#c66d1f
meta.selector.css entity.other.attribute-name.id#52cc62
meta.selector.css entity.other.attribute-name.class#d082d0
support.type.property-name.css#7b8ec5
meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css#a9f2f9
meta.preprocessor.at-rule keyword.control.at-rule#8693A5
meta.property-value support.constant.named-color.css, meta.property-value constant#e54033
meta.constructor.argument.css#98d87e
meta.diff, meta.diff.header, meta.separator, meta.diff.range, meta.diff.index#F8F8F8italic
markup.deleted#F8F8F8
markup.changed#F8F8F8
markup.inserted#F8F8F8
markup.list#F9EE98
markup.heading#CF6A4C
markup.raw.block
sublimelinter.mark.warning#DDB700
sublimelinter.gutter-mark#FFFFFF
sublimelinter.mark.error#D02000
constant.numeric#ff0000
text#ffffff
constant.language#860383
keyword.operator.logical#8AF3FF
keyword.operator#ffca8c
keyword.control#ff8500
source#f2efe9
constant.other#3558ff
entity.other.attribute-name.class.html#FF6FDE
entity.name.tag.script.html, entity.name.tag.html#8E45AD
meta.structure.dictionary.value.json#fafcb8
meta.namespace.php, entity.name.namespace.php#b47cef
variable.function.php#B8C4FB
entity.other.inherited-class.php#7ef2f4
meta.use.php#b47cef
keyword.other.phpdoc.php#bee5c3
constant.other.php, constant.other.class.php#00cbff
source.php.embedded.line.html#98d87e
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#00f860
punctuation.definition.string.end.php, punctuation.definition.string.begin.php#378638
meta.function-call.object.php#f2efe9
entity.other.attribute-name.id.html#C581E5
entity.other.attribute-name.html#FF6FDE
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#8E45AD
string.quoted.double.html, string.quoted.single.html#B9EEF5
source.ts, source.tsx, source.js, source.jsx#ffffff
storage.type.ts, storage.type.tsx, storage.type.js, storage.type.jsx, storage.type#fb90f0
entity.name.type.ts, entity.name.type.tsx, entity.name.type, support.type.primitive.ts, support.type.builtin.ts#7ef2f4
support.class.ts, support.class.tsx, entity.name.class.ts, entity.name.class.tsx, entity.name.class#7ef2f4bold
entity.name.function.ts, entity.name.function.tsx, entity.name.function.js, entity.name.function.jsx, meta.function entity.name.function#8d9ff4
support.function.console.js, support.function.console.ts#b47cef
variable.other.constant.ts, variable.other.constant.js, variable.other.constant.tsx, variable.other.constant.jsx#b41916
keyword.operator.new.ts, keyword.operator.new.js, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.delete#e58d03
keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment#e58d03
punctuation.separator.key-value#ffffff
support.type.property-name.json, meta.object-literal.key.json, meta.structure.dictionary.key.json#8d9ff4
constant.language.json#fb90f0
constant.numeric.json#b41916
source.yaml, source.ansible#ffffff
entity.name.tag.yaml, keyword.control.anchor.yaml, keyword.control.merge.yaml#e58d03
string.unquoted.plain.out.yaml, string.unquoted.plain.in.yaml, string.unquoted.block.yaml#98d87e
support.type.property-name.yaml, meta.mapping.key.yaml, entity.name.section.yaml#8d9ff4
punctuation.definition.entry.yaml, punctuation.separator.key-value.yaml#ffffff
keyword.operator.assignment.yaml#e58d03
variable.other.jinja, entity.name.function.jinja#b47cef
keyword.control.jinja, punctuation.section.embedded.jinja#fb90f0
source.ini, source.cfg, source.dosini, source.env#ffffff
entity.name.section.ini, entity.name.section.cfg#7ef2f4bold
keyword.other.definition.ini, support.type.property-name.ini, entity.other.key.ini#8d9ff4
punctuation.separator.key-value.ini, punctuation.definition.entity.ini#ffffff
string.unquoted.value.ini, string.unquoted.value.env, string.quoted.double.env, string.quoted.single.env#98d87e
variable.other.env, entity.other.key.env#8d9ff4
source.sql, source.sql.mysql#ffffff
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.control.sql#e58d03
support.function.sql, meta.function-call.sql#b47cef
constant.numeric.sql#b41916
string.quoted.single.sql, string.quoted.double.sql#98d87e
entity.name.function.sql, entity.name.table.sql, entity.name.column.sql, entity.name.database.sql#7ef2f4
text.html.markdown, source.gfm#ffffff
markup.heading, markup.heading entity.name#7ef2f4bold
markup.bold#ffffffbold
markup.italic#ffffffitalic
markup.strikethrough#808080strikethrough
markup.inline.raw, markup.raw.inline, markup.fenced_code.block, markup.raw.block#98d87e
markup.quote#808080italic
markup.list punctuation.definition.list_item#e58d03
markup.link, markup.underline.link#8d9ff4underline
markup.link.url#b47cefunderline
text.xml, source.xml#ffffff
entity.name.tag.xml, punctuation.definition.tag.xml, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml#e58d03
entity.other.attribute-name.xml#7ef2f4
string.quoted.double.xml, string.quoted.single.xml#98d87e
meta.tag.preprocessor.xml, entity.name.tag.localname.xml#e58d03
storage.type.class.js, storage.type.class.ts, storage.type.class.tsx, storage.type.function.arrow.js, storage.type.function.arrow.ts, storage.modifier.async.js, storage.modifier.async.ts, keyword.control.as.js, keyword.control.as.ts, keyword.control.from.js, keyword.control.from.ts#e58d03
entity.name.tag.tsx, entity.name.tag.jsx, support.class.component.tsx, support.class.component.jsx#7ef2f4
entity.other.attribute-name.tsx, entity.other.attribute-name.jsx#8d9ff4
string.template.js, string.template.ts, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#98d87e
meta.template.expression.js, meta.template.expression.ts#8d9ff4
meta.decorator.js, meta.decorator.ts, punctuation.decorator.js, punctuation.decorator.ts, entity.name.function.decorator.js, entity.name.function.decorator.ts#fb90f0
meta.attribute.php, entity.name.attribute.php, punctuation.definition.attribute.php#fb90f0
entity.name.variable.parameter.php, meta.function-call.php variable.parameter.php#8d9ff4
keyword.operator.type.php, punctuation.separator.type.php#7ef2f4
storage.type.enum.php, entity.name.type.enum.php#7ef2f4bold
storage.modifier.readonly.php#fb90f0
keyword.control.match.php#e58d03
variable.scss, variable.less, variable.other.less, variable.other.scss, punctuation.definition.variable.scss, punctuation.definition.variable.less#8d9ff4
entity.name.function.scss, entity.name.function.less, support.function.misc.scss, support.function.misc.less#b47cef
entity.other.attribute-name.placeholder.scss, entity.other.attribute-name.placeholder.css#fb90f0
variable.interpolation.scss, variable.interpolation.less#8d9ff4
variable.css, variable.argument.css, support.type.custom-property.css, entity.other.custom-property.css#8d9ff4
support.function.calc.css, support.function.var.css, support.function.misc.css#b47cef
support.type.property-name.css#7b8ec5
meta.type.parameters.ts, meta.type.parameters.tsx, entity.name.type.ts, entity.name.type.tsx#7ef2f4
meta.type.annotation.ts, meta.type.annotation.tsx, meta.return.type.ts, meta.return.type.tsx#7ef2f4
support.type.builtin.ts, support.type.builtin.tsx#7ef2f4
entity.name.tag.ansible, keyword.control.ansible#e58d03
entity.name.function.ansible, support.function.ansible#b47cef
keyword.other.mysql, keyword.other.LUW.sql, storage.type.sql, storage.modifier.sql#e58d03
support.function.aggregate.sql, support.function.scalar.sql, support.function.string.sql#b47cef
support.class.cakephp, entity.name.function.cakephp#b47cef
variable.other.env.name, entity.name.constant.env#8d9ff4
fenced_code.block.language, markup.raw.code-fence.markdown#808080
string.other.link.title.markdown, string.other.link.description.markdown#8d9ff4
support.type.property-name.json, meta.structure.dictionary.key.json#8d9ff4
variable.other.alias.yaml, punctuation.definition.alias.yaml#fb90f0
keyword.operator.quantifier.regexp, punctuation.definition.group.regexp#e58d03
punctuation.terminator, punctuation.separator.comma, punctuation.accessor#ffffff
variable.language.this, variable.language.self, variable.language.super#8d9ff4italic
storage.modifier.async, keyword.control.flow.await#e58d03
keyword.control.import, keyword.control.export, keyword.control.default#e58d03
keyword.operator.spread, keyword.operator.rest#e58d03
punctuation.accessor.optional, meta.function-call.optional#e58d03
keyword.operator.nullish-coalescing#e58d03
entity.name.section.group-title.ini, entity.name.section.group-title.cnf#7ef2f4bold
Willetts Tech by Willetts Tech - VS Code Theme