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#3C3F41
  • activityBarBadge.background#007acc
  • badge.background#3C3F41
  • editor.activeLineNumber.foreground#a9b7c6
  • editor.background#1E1F22
  • editor.foreground#a9b7c6
  • editor.lineHighlightBackground#ffffff0b
  • editor.selectionBackground#204182cc
  • editorGutter.background#ffffff0b
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.highlightForeground#cc6e2f
  • editorSuggestWidget.selectedBackground#204182cc
  • sideBar.background#1E1F22
  • sideBar.border#3C3F41
  • statusBar.background#3C3F41
  • statusBar.foreground#a9b7c6
  • tab.activeBackground#4E5254
  • tab.activeBorder#0c7d9d
  • tab.inactiveBackground#3C3F41
  • terminal.background#1E1F22
  • titleBar.activeBackground#3C3F41
  • titleBar.activeForeground#a9b7c6
  • titleBar.inactiveBackground#ffffff10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#a9b7c6
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#cc7832
expression.string,meta.template.expression#a9b7c6
constant.numeric#6897bb
constant.language,variable.language#cc7832
constant.character, constant.other#9E7BB0
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#cc7832
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#7A9EC2
storage,storage.type,storage.modifier,storage.arrow#cc7832
class.instance.constructor#ffc262
support.function, entity.name.function#ffc262
entity.other.attribute-name.tsx#BABABAitalic
meta.function.tsx meta.block.tsx variable.other.readwrite.tsx, meta.arrow.tsx meta.block.tsx variable.other.readwrite.tsx
meta.tag.tsx meta.embedded.expression.tsx variable.other.readwrite.tsx, meta.jsx.children.tsx meta.embedded.expression.tsx variable.other.readwrite.tsx
annotation.meta.ts, annotation.meta.tsx#a9b7c6
variable.parameter, operator.rest.parameters#a9b7c6
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#9E7BB0
quote.module#6A8759
markup.heading#cc7832
support.class.component.tsx#26BDA4
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#ffc262
entity.other.attribute-name#a9b7c6
meta.object-literal.key#9E7BB0
storage.modifier.ts#cc7832
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#ffc262
comment.block.documentation#6A8759
storage.type.class.jsdoc#cc7832
constant.language.import-export-all#a9b7c6
objectliteral.key.separator, punctuation.separator.key-value#a9b7c6
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#a9b7c6
regex.character-class#a9b7c6
entity.name.type.class#a9b7c6
entity.other.inherited-class#7A9EC2
entity.name.type.instance.jsdoc#ffc262
yaml.entity.name,yaml.string.entity.name#cc7832
yaml.string.out#a9b7c6
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end#a9b7c6
string.regexp#cc7832
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#ffc262
constant.other.character-class.regexp, constant.character.escape.ts#a9b7c6
expr.regex.or.operator#a9b7c6
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#a9b7c6
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#a9b7c6
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#ffc262
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#7A9EC2
property-list.property-value.function#ffc262
support.constant.property-value.css,support.constant.property-value.scss#A5C261
css.entity.name.tag,scss.entity.name.tag#cc7832
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#ffc262
keyword.scss,keyword.css#cc7832
triple-slash.tag#a9b7c6italic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.operator.logical.python#cc7832
support.class.dart#cc7832
variable.language.php, variable.other.php#9E7BB0
variable.other.readwrite.perl#9E7BB0
variable.other.property.php#cc7832
support.variable.property.php#ffc262
Darcula Theme VBNetEnjoyer by VBNetEnjoyer - VS Code Theme