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#0000001a
  • activityBarBadge.background#007acc
  • badge.background#0000001a
  • editor.activeLineNumber.foreground#cccccc
  • editor.background#242424
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#ffffff0b
  • editor.selectionBackground#204182cc
  • editorBracketHighlight.foreground1#c5b8a4
  • editorBracketHighlight.foreground2#a49989
  • editorBracketHighlight.foreground3#958b7c
  • editorBracketHighlight.foreground4#827a6d
  • editorBracketHighlight.foreground5#6a6358
  • editorGutter.background#ffffff02
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.highlightForeground#cc6e2f
  • editorSuggestWidget.selectedBackground#204182cc
  • sideBar.background#242424
  • sideBar.border#ffffff00
  • statusBar.background#0000001a
  • statusBar.foreground#cccccc
  • tab.activeBackground#0000001a
  • tab.activeBorder#0c7d9d
  • tab.inactiveBackground#00000008
  • titleBar.activeBackground#0000001a
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#00000008

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#707070
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#CCCCCC
string,string.character.escape,string.template.quoted,string.template.quoted.punctuation,string.template.quoted.punctuation.single,string.template.quoted.punctuation.double,string.type.declaration.annotation,string.template.quoted.punctuation.tag#6A8759
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#CC8242
expression.string,meta.template.expression#CCCCCC
constant.numeric#7A9EC2
constant.language,variable.language#CC8242
constant.character, constant.other#9E7BB0
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#CC8242
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#7A9EC2
storage,storage.type,storage.modifier,storage.arrow#CC8242
class.instance.constructor,new.expr entity.name.type#FFC66D
support.function, entity.name.function#FFC66D
annotation.meta.ts, annotation.meta.tsx#CCCCCC
variable.parameter, operator.rest.parameters#CCCCCC
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#9E7BB0
quote.module#6A8759
markup.heading#CC8242
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#FFC66D
entity.other.attribute-name#CCCCCC
meta.object-literal.key#9E7BB0
storage.modifier.ts#CC8242
ts.cast.expr,ts.meta.entity.class.method.new.expr.cast,ts.meta.entity.type.name.new.expr.cast,ts.meta.entity.type.name.var-single-variable.annotation,tsx.cast.expr,tsx.meta.entity.class.method.new.expr.cast,tsx.meta.entity.type.name.new.expr.cast,tsx.meta.entity.type.name.var-single-variable.annotation#7A9EC2
ts.meta.type.support,ts.meta.type.entity.name,ts.meta.class.inherited-class,tsx.meta.type.support,tsx.meta.type.entity.name,tsx.meta.class.inherited-class,type-declaration,enum-declaration#7A9EC2
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#FFC66D
comment.block.documentation#6A8759
storage.type.class.jsdoc#CC8242
constant.language.import-export-all#CCCCCC
objectliteral.key.separator, punctuation.separator.key-value#CCCCCC
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#CCCCCC
regex.character-class#CCCCCC
entity.name.type.class#CCCCCC
entity.other.inherited-class#7A9EC2
entity.name.type.instance.jsdoc#FFC66D
yaml.entity.name,yaml.string.entity.name#CC8242
yaml.string.out#CCCCCC
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end#CCCCCC
string.regexp#CC8242
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#FFC66D
constant.other.character-class.regexp, constant.character.escape.ts#CCCCCC
expr.regex.or.operator#CCCCCC
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#6A8759
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded#CCCCCC
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#CCCCCC
property-list.property-value,property-list.constant#A5C261
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#7A9EC2
entity.other.attribute-name.class.css,entity.other.attribute-name.class.scss,entity.other.attribute-name.parent-selector-suffix.css,entity.other.attribute-name.parent-selector-suffix.scss#FFC66D
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#7A9EC2
property-list.property-value.function#FFC66D
support.constant.property-value.css,support.constant.property-value.scss#A5C261
css.entity.name.tag,scss.entity.name.tag#CC8242
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#FFC66D
keyword.scss,keyword.css#CC8242
triple-slash.tag#CCCCCCitalic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.operator.logical.python#CC8242
support.class.dart#CC8242
variable.language.php, variable.other.php#9E7BB0
variable.other.readwrite.perl#9E7BB0
variable.other.property.php#CC8242
support.variable.property.php#FFC66D
comment.block.documentation#629755italic
meta.function#FFC66D
entity.other.inherited-class#cccccc
source.python variable.parameter.function.language.special, source.python variable.language.special#94558D
source.python meta.function-call.arguments variable.parameter.function-call#AA4926
source.python constant.language, source.python constant.character.escape, source.python keyword.operator.logical, source.python constant.character.format.placeholder.other, source.python meta.function storage.type.function , source.python meta.class storage.type.class, source.python keyword.control.flow, source.python keyword.control.import, source.python storage.type.format, source.python storage.modifier#CC7832
source.python support.function.magic, source.python support.variable.magic#B200B2
source.python string.quoted#6A8759
source.python string.quoted.docstring, source.python string.quoted.docstring punctuation.definition.string.begin, source.python string.quoted.docstring punctuation.definition.string.end#629755italic
source.python meta.function.decorator support.type, source.python meta.function.decorator entity.name.function.decorator #BBB529
source.python entity.name.function, source.python meta.function support.type#FFC66D
source.python support.type, source.python meta.function-call.arguments support.type, source.python meta.function-call support.function.builtin, source.python meta.item-access meta.item-access.arguments support.type#8888C6
source.python string.quoted.binary.single, source.python string.quoted.binary.single punctuation.definition.string.begin, source.python string.quoted.binary.single punctuation.definition.string.end, source.python string.quoted.binary.single storage.type.string#FFC66D
source.python support.type.exception, source.python meta.class.inheritance support.type.exception, source.python meta.class.inheritance support.type.metaclass#8888C6
text.xml punctuation.definition.tag, text.xml keyword.other#FFC66D
text.xml entity.name.tag.localname#FFC66D
text.xml entity.name.tag.namespace, text.xml entity.other.attribute-name.namespace#9876AA
text.xml string#6A8759
text.html.markdown markup.heading, text.html.markdown markup.heading.setext#9876AAitalic
text.html.markdown meta.paragraph meta.link.inet markup.underline.link, text.html.markdown meta.link.inline string#287BDE
text.html.markdown meta.link.reference constant.other.reference#CC7832
text.html.markdown meta.link.reference punctuation.definition.constant#CC7832bold
text.html.markdown meta.link.inet punctuation#287BDE
text.html.markdown meta.link.inline punctuation.definition.metadata#CC7832italic bold
text.html.markdown meta.link.inline punctuation.definition.string#287BDE
text.html.markdown meta.paragraph meta.link.reference punctuation.definition.string#287BDE
text.html.markdown meta.link.reference markup.underline.link#e8bf6aitalic
text.html.markdown meta.link.inline markup.underline.link#e8bf6aitalic
text.html.markdown meta.link.reference string.other.link.description.title#808080italic
text.html.markdown meta.link.reference string.other.link.title, text.html.markdown meta.reference.link.inline, text.html.markdown meta.reference.link constant.other#287BDE
text.html.markdown punctuation.definition.bold, text.html.markdown punctuation.definition.italic#CC7832
text.html.markdown markup.fenced_code.block, text.html.markdown markup.raw.block, text.html.markdown markup.inline.raw#808080
text.html.markdown markup.quote, text.html.markdown markup.quote meta.paragraph, text.html.markdown markup.quote heading#6A8759
text.html.markdown beginning.punctuation.definition.quote#608b4e
text.html.markdown beginning.punctuation.definition.list#6796e6
source.json meta.structure.dictionary support.type.property-name#9876AA
source.json string.quoted.double#6A8759
source.json punctuation.separator.dictionary.key-value, source.json punctuation.separator.array, source.json constant.language#CC7832
source.json comment.block, source.json comment.block.documentation#808080
source.json string.quoted.double#6A8759
source.json punctuation.separator.dictionary.pair, source.json punctuation.separator.element, source.json punctuation.separator.arguments, source.json punctuation.separator.parameters, source.json punctuation.separator.continuation#CC7832
source.json constant.character.escape.js#CC7832
source.js string.regexp#9876AA
source.js keyword.operator.new.js, source.js keyword.operator.expression.js, source.js keyword.operator.cast.js, source.js keyword.operator.sizeof.js#CC7832
source.js punctuation.separator.comma, source.js punctuation.terminator.statement#CC7832
source.js storage.type.class, source.js storage.type.interface#CC7832
source.js meta.decorator entity.name.function, source.js punctuation.decorator#BBB529
source.js meta.function meta.function-call, source.js meta.function meta.definition.function.js entity.name.function, source.js meta.function.expression.js entity.name.function#FFC66D
source.js variable.other.property#9876AA
source.js meta.object.member variable.other.property, source.js variable.other.object.property#9876AA
source.js string.quoted.single, source.js string.quoted.double#6A8759
source.yaml string.unquoted entity.name.tag#CC7832
source.yaml entity.name, source.yaml variable.other#E8BF6A
source.yaml comment.line#629755
invalid#ff0000
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
string.regexp, string.regexp constant.character, string.regexp storage.type.string, string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#d16969
string.regexp entity.name.tag#F23B7A
string.regexp support.other.parenthesis, string.regexp punctuation.character.set#E8BF6A
string.regexp keyword.operator#CC7832
string.regexp keyword.operator.quantifier#6897BB
Darcula Theme by JB by JB - VS Code Theme