Skip to main content
Coding Theme

Color themes

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.activeForeground#5b1c62
  • activityBar.background#f1d7ba
  • activityBar.foreground#5b1c62
  • activityBarBadge.background#d62e6c
  • badge.background#d62e6c
  • editor.background#f3e9ee
  • editor.foreground#5b1c62
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#ffbc92AA
  • editorBracketHighlight.foreground1#328954
  • editorBracketHighlight.foreground2#6ab8d1
  • editorBracketHighlight.foreground3#073129
  • editorBracketHighlight.foreground4#ed561a
  • editorBracketHighlight.foreground5#5b1c62
  • editorBracketHighlight.foreground6#ee8dc1
  • editorGutter.background#f3e9ee
  • editorLineNumber.activeForeground#abb818
  • editorLineNumber.foreground#ee8dc1
  • editorSuggestWidget.background#f1d7ba
  • editorSuggestWidget.highlightForeground#d62e6c
  • editorSuggestWidget.selectedBackground#d62e6c66
  • sideBar.background#f1d7ba
  • sideBar.border#ee8dc1
  • statusBar.background#f1d7ba
  • statusBar.foreground#5b1c62
  • tab.activeBackground#f1d7ba
  • tab.activeBorder#d62e6c
  • tab.inactiveBackground#f1d7ba
  • titleBar.activeBackground#f1d7ba
  • titleBar.activeForeground#5b1c62
  • titleBar.inactiveBackground#f1d7ba

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#d62e6cAAitalic
comment.block, comment.block.documentation#d62e6cAAitalic
punctuation.definition.block,punctuation.definition.parameters,punctuation.definition.array,punctuation.definition.typeparameters,punctuation.definition.binding-pattern,meta.brace,punctuation.section.embedded#ee8dc1
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#d62e6c
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#2C0A25
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#d62e6c
expression.string,meta.template.expression#5b1c62
constant.numeric#d99444
constant.language,variable.language#d62e6c
constant.character, constant.other#d99444
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#d62e6c
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#328954
storage,storage.type,storage.modifier,storage.arrow#d62e6c
class.instance.constructor,new.expr entity.name.type#5b1c62
support.function, entity.name.function#5b1c62
annotation.meta.ts, annotation.meta.tsx#d62e6c
variable.parameter, operator.rest.parameters#5b1c62
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#5b1c62
quote.module#2C0A25
markup.heading#d62e6cbold
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#328954
entity.other.attribute-name#5b1c62
meta.object-literal.key#5b1c62
storage.modifier.ts#d62e6c
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#328954
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#328954
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#5b1c62
comment.block.documentation, comment.line.documentation, comment.block.documentation.ts, comment.block.documentation.tsx, comment.line.documentation.ts, comment.line.documentation.tsx#d62e6cAAitalic
storage.type.jsdoc, storage.type.function.jsdoc, storage.type.class.jsdoc, entity.name.type.jsdoc, entity.name.type.instance.jsdoc, variable.parameter.jsdoc, variable.parameter.function.jsdoc, keyword.other.documentation, keyword.operator.documentation, punctuation.definition.comment, punctuation.definition.comment.jsdoc, punctuation.definition.comment.ts, punctuation.definition.comment.tsx#d62e6cAAitalic
constant.language.import-export-all#5b1c62
objectliteral.key.separator, punctuation.separator.key-value#5b1c62
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#5b1c62
regex.character-class#5b1c62
entity.name.type.class#5b1c62
entity.other.inherited-class#328954
entity.name.type.instance.jsdoc#d62e6cAAitalic
yaml.entity.name,yaml.string.entity.name#d62e6c
yaml.string.out#5b1c62
block.support.module,block.support.type.module,block.support.function.variable#5b1c62
string.regexp#d62e6c
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#5b1c62
constant.other.character-class.regexp, constant.character.escape.ts#5b1c62
expr.regex.or.operator#5b1c62
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#2C0A25
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded#5b1c62
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#5b1c62
property-list.property-value,property-list.constant#2C0A25
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#328954
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#5b1c62
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#328954
property-list.property-value.function#5b1c62
support.constant.property-value.css,support.constant.property-value.scss#2C0A25
css.entity.name.tag,scss.entity.name.tag#d62e6c
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#5b1c62
keyword.scss,keyword.css#d62e6c
triple-slash.tag#5b1c62italic
token.info-token#328954
token.warn-token#d62e6c
token.error-token#ed561a
token.debug-token#d99444
keyword.operator.logical.python#d62e6c
support.class.dart#d62e6c
variable.language.php, variable.other.php#d99444
variable.other.readwrite.perl#d99444
variable.other.property.php#d62e6c
support.variable.property.php#5b1c62