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#291a18ff
  • activityBar.background#e8e3d9
  • activityBar.foreground#d16ba6
  • activityBarBadge.background#5b1c62
  • badge.background#5b1c62
  • editor.foreground#291a18ff
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#38e28430
  • editorBracketHighlight.foreground1#ee8dc1
  • editorBracketHighlight.foreground2#6edadc
  • editorBracketHighlight.foreground3#38e284
  • editorBracketHighlight.foreground4#ed561a
  • editorBracketHighlight.foreground5#5b1c62
  • editorBracketHighlight.foreground6#ee8dc1
  • editorLineNumber.activeForeground#38e284
  • editorLineNumber.foreground#ee8dc1
  • editorSuggestWidget.background#e8e3d9
  • editorSuggestWidget.highlightForeground#ed561a
  • editorSuggestWidget.selectedBackground#5b1c6220
  • sideBar.background#e8e3d9
  • sideBar.border#ee8dc1
  • statusBar.background#e8e3d9
  • statusBar.foreground#291a18ff
  • tab.activeBackground#e8e3d9
  • tab.activeBorder#5b1c62
  • tab.inactiveBackground#e8e3d9
  • titleBar.activeBackground#e8e3d9
  • titleBar.activeForeground#291a18ff
  • titleBar.inactiveBackground#e8e3d9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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