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#4a4c4e
  • activityBarBadge.background#007acc
  • button.background#007acc
  • button.foreground#ffffff
  • button.hoverBackground#006BB3
  • editor.background#2b2b2b
  • editor.foreground#d4d4d4
  • editorCodeLens.foreground#546e7a9f
  • editorGroupHeader.tabsBackground#313335
  • editorGutter.background#2b2b2b
  • editorIndentGuide.activeBackground#bbbbbba4
  • list.activeSelectionBackground#007acc55
  • list.activeSelectionForeground#ffffff
  • list.inactiveSelectionBackground#3b3f41
  • sideBar.background#313335
  • sideBarSectionHeader.background#4a4c4e
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#333333
  • tab.activeBackground#4a4c4ecc
  • tab.border#313335
  • tab.inactiveBackground#313335
  • titleBar.activeBackground#4a4c4e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#808080
comment.block.documentation.js, comment.block.documentation.js punctuation.definition.comment#629755italic
comment.block.documentation.js storage.type.class.doc#629755underline bold italic
entity.name.tag.localname.cs, comment.block.documentation.cs punctuation.definition.tag.cs, source.cs comment.block.documentation.cs meta.tag.cs punctuation.separator.equals.cs, punctuation.definition.block.tag.jsdoc#629755
punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, variable.other.description.jsdoc, punctuation.definition.inline.tag.jsdoc, punctuation.definition.bracket.curly.begin.jsdoc, punctuation.definition.bracket.curly.end.jsdoc#629755italic bold
comment.block.documentation.cs, entity.other.attribute-name.localname.cs#629755
source.cs comment.block.documentation.cs meta.tag.cs string.quoted.double.cs, source.cs comment.block.documentation.cs meta.tag.cs string.quoted.double.cs punctuation.definition.string.begin.cs, source.cs comment.block.documentation.cs meta.tag.cs string.quoted.double.cs punctuation.definition.string.end.cs#629755
invalid, invalid.illegal#FF5370
markup.deleted.git_gutter#FFC66D
markup.heading, markup.inserted.git_gutter#6A9759
entity.other.inherited-class#A9B7C6
entity.other.attribute-name#A9B7C6
entity.other.attribute-name.class, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-class.css#FFCB6B
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#9876AA
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
text.html.markdown#A9B7C6
markup.inline.raw.string.markdown#808080
text.html.markdown markup.inline.raw.markdown#9876AA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#9876AA
markup.italicitalic
markup.bold, markup.bold stringbold
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.underlineunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
markup.raw.block#9876AA
markup.raw.block.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown#EEFFFF
variable.language.fenced.markdown#65737E
markup.table#EEFFFF
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#A9B7C6
text.html.basic#BABABA
storage.type.function.arrow#A9B7C6
storage.modifier, storage.type#CC7832bold
storage.type.cs#A9B7C6
constant.language.null, constant.language.undefined, constant.language.boolean, constant.language.json#CC7832bold
constant.character, constant.escape#A9B7C6
constant.numeric#6987BB
constant.other.symbol, constant.other.key, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#6A9759
constant.character.escape#CC7832
constant.other.reference.link.markdown#FFCB6B
constant.other.character-class.set.regexp, constant.other.character-class.regexp#FFC66D
constant.other.color#CC7832bold
variable.function#FFC66D
variable, variable.other.property, variable.other.constant.property, variable.other.object.property, variable.other.readwrite.cs, constant.other.object.key.js string.unquoted.js#9876AA
variable.parameter, variable.other.constant, variable.other.object, variable.other.readwrite, support.variable.dom#A9B7C6
variable.import.parameter.js#A9B7C6
variable.other.class.js#A9B7C6bold
variable.language#CC7832bold
variable.function.constructor#82AAFF
punctuation, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.section.embedded, punctuation.definition.list_item.markdown#A9B7C6
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.open punctuation.definition.tag.begin, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.open punctuation.definition.tag.end, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.close punctuation.definition.tag.begin, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member meta.template tag.close punctuation.definition.tag.end#E8BF6A
punctuation.definition.string.begin.json, punctuation.definition.string.end.json, punctuation.definition.string.begin, punctuation.definition.string.end#6A9759
punctuation.separator.dictionary.key-value.json, punctuation.separator.array.json, punctuation.terminator.statement, punctuation.separator.comma, punctuation.definition.keyword#CC7832
punctuation.support.type.property-name.begin.json, punctuation.support.type.property-name.end.json#9876AA
punctuation.definition.fenced.markdown#00000050
punctuation.section.class.end#EEFFFF
punctuation.definition.group.no-capture.regexp, punctuation.definition.group.regexp, punctuation.decorator, punctuation.definition.character-class.regexp#FFC66D
string constant.other.placeholder#9876AA
string.other.link#F07178
string#6A9759
string.other.link.title.markdown, string.other.link.description.markdown#82AAFF
string.other.link.description.title.markdown#9876AA
string.quoted.double.html#A5C261
string.regexp#6A9759
string.regexp keyword.other#FFC66D
entity.name.tag, entity.name.function, meta.decorator meta.function-call support.class#FFC66D
entity.name#A9B7C6
entity.name.module.js#FF5370
entity.name.method.js#82AAFFitalic
meta.class-method.js entity.name.function.js#82AAFF
entity.name.section.markdown, entity.name.variable.field.cs, entity.name.variable.property.cs#9876AA
entity.name.tag.other.html, entity.name.tag.block.any.html, entity.name.tag.inline.any.html#E8BF6A
entity.other.attribute-name.localname.cs#6A828Dunderline
entity.name.tag.localname.xml
support.class, support.orther.namespace.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types, support.constant#A9B7C6
support.type.primitive, support.type.builtin, support.type.object.module.tsx#CC7832bold
support.type, 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#B2CCD6
support.function#FFC66D
support.other.variable#F07178
support.variable.property.dom, support.variable.property#9876AA
keyword.other.unit, keyword.other, keyword.operator#A9B7C6
keyword.operator.quantifier.regexp#6A9790
keyword.other.using.cs, keyword.other.class.cs, keyword.other.new, keyword.other.await, keyword.other.namespace, keyword.type.cs, keyword.other.this, keyword.other.typeof, keyword.control, keyword.other.template, keyword.other.substitution, keyword.operator.new, keyword.operator.await, keyword.operator.expression.instanceof, keyword.operator.expression.typeof#CC7832bold
keyword.other.get.cs, keyword.other.set.cs, keyword.other.special-method#FFC66D
markup.deleted.git_gutter, meta.function-call#FFC66D
source.json meta.structure.dictionary.json support.type.property-name.json#9876AA
text.html.markdown meta.dummy.line-break
meta.separator#65737Ebold
meta.object-literal.key, meta.object.member.object-literal.key, source.ts meta.decorator.ts meta.objectliteral.ts meta.object.member#9876AA
meta.tag.any.html, meta.brace, meta.use.php#A9B7C6
meta.tag.block.any.html, meta.tag.inline.any.html, meta.tag.other.html#BABABA
meta.tag#CC7832
meta.block variable.other#A9B7C6
support.constant.property-value.css, keyword.other.unit.px.css#A5C261
variable.scss, constant.other.color.rgb-value.hex.css#6897BB
entity.name.tag.css, entity.name.tag.custom.scss, keyword.control.at-rule.include.scss, keyword.control.at-rule.media.scss, keyword.control.operator.css.scss, keyword.control.each.scss, keyword.control.at-rule.import.scss, keyword.control.if.scss, keyword.control.content.scss, keyword.control.else.scss, keyword.control.at-rule.mixin.scss, keyword.control.at-rule.extend.scss#CC7832
entity.other.attribute-name.id.css, meta.property-value.scss, support.constant.font-name.css, support.type.map.key.scss#FFC66D

Shiki preview

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

Loading...

Darkwell - Coding Theme