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#005a59
  • activityBar.background#eef5f1
  • activityBar.foreground#005a59
  • activityBarBadge.background#d16ba6
  • badge.background#d16ba6
  • editor.background#fdfefe
  • editor.foreground#005a59
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#97cde130
  • editorBracketHighlight.foreground1#d99444
  • editorBracketHighlight.foreground2#97cde1
  • editorBracketHighlight.foreground3#89D264
  • editorBracketHighlight.foreground4#fe6358
  • editorBracketHighlight.foreground5#d16ba6
  • editorBracketHighlight.foreground6#ffc3c3
  • editorGutter.background#fdfefe
  • editorLineNumber.activeForeground#89D264
  • editorLineNumber.foreground#ee8dc1
  • editorSuggestWidget.background#f5fbf7
  • editorSuggestWidget.highlightForeground#d64d43
  • editorSuggestWidget.selectedBackground#d16ba620
  • sideBar.background#f5fbf7
  • sideBar.border#ffc3c3
  • statusBar.background#eef5f1
  • statusBar.foreground#005a59
  • tab.activeBackground#eef5f1
  • tab.activeBorder#d16ba6
  • tab.inactiveBackground#f5fbf7
  • titleBar.activeBackground#eef5f1
  • titleBar.activeForeground#005a59
  • titleBar.inactiveBackground#eef5f1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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