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#ffffff1a
  • activityBarBadge.background#007acc
  • badge.background#ffffff1a
  • editor.background#242424
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#181818
  • editor.selectionBackground#353535
  • editorGutter.background#292929
  • editorLineNumber.foreground#3d3d3d
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.highlightForeground#cc6e2f
  • editorSuggestWidget.selectedBackground#204182cc
  • sideBar.background#242424
  • sideBar.border#ffffff1a
  • statusBar.background#8c65b3cc
  • statusBar.foreground#cccccc
  • tab.activeBackground#ffffff1a
  • tab.activeBorder#0c7d9d
  • tab.inactiveBackground#ffffff0b
  • titleBar.activeBackground#ffffff1a
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#ffffff10

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#C3E88D—
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#F78C6C—
expression.string,meta.template.expression#CCCCCC—
constant.numeric#82AAFF—
constant.language,variable.language#F78C6C—
constant.character, constant.other#C792EA—
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#F78C6C—
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#82AAFF—
storage,storage.type,storage.modifier,storage.arrow#F78C6C—
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#C792EA—
quote.module#C3E88D—
markup.heading#F78C6C—
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#C792EA—
storage.modifier.ts#F78C6C—
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#82AAFF—
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#82AAFF—
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#FFC66D—
comment.block.documentation#616161—
storage.type.class.jsdoc#F78C6C—
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#82AAFF—
entity.name.type.instance.jsdoc#FFC66D—
yaml.entity.name,yaml.string.entity.name#F78C6C—
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#F78C6C—
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#C3E88D—
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#82AAFF—
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#82AAFF—
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#F78C6C—
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#F78C6C—
triple-slash.tag#CCCCCCitalic
token.info-token#6796E6—
token.warn-token#CD9731—
token.error-token#F44747—
token.debug-token#B267E6—
keyword.operator.logical.python#F78C6C—
support.class.dart#F78C6C—
variable.language.php, variable.other.php#C792EA—
variable.other.readwrite.perl#C792EA—
variable.other.property.php#F78C6C—
support.variable.property.php#FFC66D—
variable.language#C792EA—
variable.other.property#F78C6C—
support.variable.property#FFC66D—
aub-darcula by Aubrey Falconer - VS Code Theme