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#c7e0dd
  • activityBar.background#051634
  • activityBar.foreground#db9292
  • activityBarBadge.background#CC222a
  • badge.background#CC222a
  • editor.background#162b3a
  • editor.foreground#c7e0dd
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#CC222a66
  • editorBracketHighlight.foreground1#db9292
  • editorBracketHighlight.foreground2#a4d4b4
  • editorBracketHighlight.foreground3#0f8142
  • editorBracketHighlight.foreground4#ffbc92
  • editorBracketHighlight.foreground5#ed561a
  • editorBracketHighlight.foreground6#db9292
  • editorGutter.background#162b3a
  • editorLineNumber.activeForeground#CC222a
  • editorLineNumber.foreground#dac7df
  • editorSuggestWidget.background#051634
  • editorSuggestWidget.highlightForeground#a3782f
  • editorSuggestWidget.selectedBackground#CC222a40
  • sideBar.background#051634
  • sideBar.border#db9292
  • statusBar.background#051634
  • statusBar.foreground#c7e0dd
  • tab.activeBackground#051634
  • tab.activeBorder#CC222a
  • tab.inactiveBackground#051634
  • titleBar.activeBackground#051634
  • titleBar.activeForeground#c7e0dd
  • titleBar.inactiveBackground#051634

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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