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#97cde1
  • activityBar.background#002928
  • activityBar.foreground#ffc3c3
  • activityBarBadge.background#d64d43
  • badge.background#d64d43
  • editor.background#003534
  • editor.foreground#97cde1
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#5b1c62AA
  • editorBracketHighlight.foreground1#ffc3c3
  • editorBracketHighlight.foreground2#97cde1
  • editorBracketHighlight.foreground3#89D264
  • editorBracketHighlight.foreground4#fe6358
  • editorBracketHighlight.foreground5#d64d43
  • editorBracketHighlight.foreground6#ffc3c3
  • editorGutter.background#003534
  • editorLineNumber.activeForeground#89D264
  • editorLineNumber.foreground#ffc3c3
  • editorSuggestWidget.background#002928
  • editorSuggestWidget.highlightForeground#fe6358
  • editorSuggestWidget.selectedBackground#d64d4340
  • sideBar.background#002928
  • sideBar.border#ffc3c3
  • statusBar.background#002928
  • statusBar.foreground#97cde1
  • tab.activeBackground#002928
  • tab.activeBorder#d64d43
  • tab.inactiveBackground#002928
  • titleBar.activeBackground#002928
  • titleBar.activeForeground#97cde1
  • titleBar.inactiveBackground#002928

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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