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#264b5a
  • activityBar.background#dbe1f8ff
  • activityBar.foreground#a3782f
  • activityBarBadge.background#CC222a
  • badge.background#CC222a
  • editor.background#fffefbff
  • editor.foreground#264b5a
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#a3782f50
  • editorBracketHighlight.foreground1#db9292
  • editorBracketHighlight.foreground2#a3782f
  • editorBracketHighlight.foreground3#0f8142
  • editorBracketHighlight.foreground4#051634
  • editorBracketHighlight.foreground5#ed561a
  • editorBracketHighlight.foreground6#db9292
  • editorGutter.background#fffefbff
  • editorLineNumber.activeForeground#CC222a
  • editorLineNumber.foreground#db9292
  • editorSuggestWidget.background#dbe1f8ff
  • editorSuggestWidget.highlightForeground#CC222a
  • editorSuggestWidget.selectedBackground#CC222a20
  • sideBar.background#dbe1f8ff
  • sideBar.border#db9292
  • statusBar.background#dbe1f8ff
  • statusBar.foreground#264b5a
  • tab.activeBackground#dbe1f8ff
  • tab.activeBorder#CC222a
  • tab.inactiveBackground#dbe1f8ff
  • titleBar.activeBackground#dbe1f8ff
  • titleBar.activeForeground#264b5a
  • titleBar.inactiveBackground#dbe1f8ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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