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#303030
  • activityBarBadge.background#007acc
  • badge.background#ffffff1a
  • editor.background#303030
  • editor.findMatchBackground#7a7a7a
  • editor.findMatchHighlightBackground#5b5b5b
  • editor.foreground#dddddd
  • editor.lineHighlightBackground#ffffff0b
  • editor.selectionBackground#165f6f
  • editor.selectionHighlightBackground#104956
  • editorBracketHighlight.foreground1#da6b76
  • editorBracketHighlight.foreground2#88c0d0
  • editorBracketHighlight.foreground3#fac77d
  • editorBracketHighlight.foreground4#9ec67d
  • editorBracketHighlight.foreground5#a985bd
  • editorBracketHighlight.foreground6#ed8f72
  • editorBracketHighlight.unexpectedBracket.foreground#5e81ac
  • editorGutter.background#ffffff0b
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.highlightForeground#ed8f72
  • editorSuggestWidget.selectedBackground#204182cc
  • gitDecoration.addedResourceForeground#9ec67d
  • gitDecoration.untrackedResourceForeground#9ec67d
  • list.errorForeground#da6b76
  • list.inactiveSelectionBackground#555555
  • sideBar.background#3c3c3c
  • sideBar.border#ffffff1a
  • statusBar.background#ffffff1a
  • statusBar.foreground#cccccc
  • tab.activeBackground#555555
  • tab.activeBorder#88c0d0
  • 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#9ec67d
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#ed8f72
expression.string,meta.template.expression#CCCCCC
constant.numeric#88c0d0
constant.language,variable.language#ed8f72
constant.character, constant.other#a985bd
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#ed8f72
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#88c0d0
storage,storage.type,storage.modifier,storage.arrow#ed8f72
class.instance.constructor,new.expr entity.name.type#fac77d
support.function, entity.name.function#fac77d
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#a985bd
quote.module#9ec67d
markup.heading#ed8f72
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#fac77d
entity.other.attribute-name#CCCCCC
meta.object-literal.key#a985bd
storage.modifier.ts#ed8f72
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#88c0d0
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#88c0d0
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#fac77d
comment.block.documentation#9ec67d
storage.type.class.jsdoc#ed8f72
constant.language.import-export-all#CCCCCC
objectliteral.key.separator, punctuation.separator.key-value#CCCCCC
regexitalic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#CCCCCC
regex.character-class#CCCCCC
entity.name.type.class#CCCCCC
entity.other.inherited-class#88c0d0
entity.name.type.instance.jsdoc#fac77d
yaml.entity.name,yaml.string.entity.name#ed8f72
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#ed8f72
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#fac77d
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#9ec67d
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#9ec67d
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#88c0d0
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#fac77d
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#88c0d0
property-list.property-value.function#fac77d
support.constant.property-value.css,support.constant.property-value.scss#9ec67d
css.entity.name.tag,scss.entity.name.tag#ed8f72
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#fac77d
keyword.scss,keyword.css#ed8f72
triple-slash.tag#CCCCCCitalic
token.info-token#6796E6
token.warn-token#CD9731
token.error-token#F44747
token.debug-token#B267E6
keyword.operator.logical.python#ed8f72
support.class.dart#ed8f72
variable.language.php, variable.other.php#a985bd
variable.other.readwrite.perl#a985bd
variable.other.property.php#ed8f72
support.variable.property.php#fac77d
comment#929292
punctuation.definition.comment#929292
string#9ec67d
meta.embedded.assembly#9ec67d
keyword - keyword.operator#ed8f72
keyword.control#ed8f72
storage#ed8f72
storage.type#ed8f72
constant.numeric#88c0d0
entity.name.type#fac77d
entity.name.class#fac77d
support.type#fac77d
support.class#fac77d
entity.name.function#fac77d
support.function#fac77d
constant.language, keyword.other.unit#ed8f72
meta.object-literal.key, variable.object.property, variable.other.property#a985bd
entity.other.attribute-name#88c0d0italic
support.constant.property-value.css#9ec67d
storage.type.function.arrow#DDDDDD
keyword.control.import, keyword.control.export#ed8f72
keyword.operator.arithmetic, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#ed8f72
support.type.primitive#88c0d0
keyword.control.conditional#88c0d0
keyword.operator.relational#ddd
keyword.operator.expression#ed8f72
storage.modifier.ts, storage.modifier.tsx, storage.modifier.js, storage.modifier.jsx#ed8f72
storage.modifier, keyword.operator.new#ed8f72
keyword.operator.expression.typeof#ed8f72
meta.type.annotation#88c0d0
storage.type.class.jsdoc#ed8f72
comment.block.documentation#9ec67d
markup.heading#ed8f72
keyword#ed8f72

Shiki preview

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

Loading...

Darcula Aurora - Coding Theme