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#0a4d28
  • activityBar.background#FFAA33
  • activityBar.foreground#0a4d28
  • activityBarBadge.background#11a056
  • badge.background#11a056
  • editor.background#f5f4ef
  • editor.foreground#0a4d28
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#ee8dc166
  • editorBracketHighlight.foreground1#C97424
  • editorBracketHighlight.foreground2#11a056
  • editorBracketHighlight.foreground3#5aa8c4
  • editorBracketHighlight.foreground4#fe6358
  • editorBracketHighlight.foreground5#C61d73
  • editorBracketHighlight.foreground6#5b1c62
  • editorGutter.background#f5f4ef
  • editorLineNumber.activeForeground#ee8dc1
  • editorLineNumber.foreground#FFAA33
  • editorSuggestWidget.background#eaf4d6
  • editorSuggestWidget.highlightForeground#fe6358
  • editorSuggestWidget.selectedBackground#11a05640
  • sideBar.background#eaf4d6
  • sideBar.border#ee8dc1
  • statusBar.background#FFAA33
  • statusBar.foreground#0a4d28
  • tab.activeBackground#FFAA33
  • tab.activeBorder#11a056
  • tab.inactiveBackground#eaf4d6
  • titleBar.activeBackground#FFAA33
  • titleBar.activeForeground#0a4d28
  • titleBar.inactiveBackground#FFAA33

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#11a05699italic
comment.block, comment.block.documentation#11a05699italic
punctuation.definition.block,punctuation.definition.parameters,punctuation.definition.array,punctuation.definition.typeparameters,punctuation.definition.binding-pattern,meta.brace,punctuation.section.embedded#f8c9e3
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#C97424
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#ee8dc1
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#C97424
expression.string,meta.template.expression#0a4d28
constant.numeric#C61d73
constant.language,variable.language#fe6358
constant.character, constant.other#C61d73
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#6ab8d1
storage,storage.type,storage.modifier,storage.arrow#fe6358
class.instance.constructor,new.expr entity.name.type#0a4d28
support.function, entity.name.function#0a4d28
annotation.meta.ts, annotation.meta.tsx#C97424
variable.parameter, operator.rest.parameters#0a4d28
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#0a4d28
quote.module#ee8dc1
markup.heading#fe6358bold
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#6ab8d1
entity.other.attribute-name#0a4d28
meta.object-literal.key#0a4d28
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#6ab8d1
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#6ab8d1
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#0a4d28
comment.block.documentation, comment.line.documentation, comment.block.documentation.ts, comment.block.documentation.tsx, comment.line.documentation.ts, comment.line.documentation.tsx#11a05699italic
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#11a05699italic
constant.language.import-export-all#0a4d28
objectliteral.key.separator, punctuation.separator.key-value#0a4d28
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#0a4d28
regex.character-class#0a4d28
entity.name.type.class#0a4d28
entity.other.inherited-class#6ab8d1
entity.name.type.instance.jsdoc#11a05699italic
yaml.entity.name,yaml.string.entity.name#fe6358
yaml.string.out#0a4d28
block.support.module,block.support.type.module,block.support.function.variable#0a4d28
string.regexp#fe6358
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#0a4d28
constant.other.character-class.regexp, constant.character.escape.ts#0a4d28
expr.regex.or.operator#0a4d28
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#ee8dc1
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded#0a4d28
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#0a4d28
property-list.property-value,property-list.constant#ee8dc1
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#6ab8d1
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#0a4d28
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#6ab8d1
property-list.property-value.function#0a4d28
support.constant.property-value.css,support.constant.property-value.scss#ee8dc1
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#0a4d28
keyword.scss,keyword.css#fe6358
triple-slash.tag#0a4d28italic
token.info-token#6ab8d1
token.warn-token#fe6358
token.error-token#fe6358
token.debug-token#C61d73
keyword.operator.logical.python#fe6358
support.class.dart#fe6358
variable.language.php, variable.other.php#C61d73
variable.other.readwrite.perl#C61d73
variable.other.property.php#fe6358
support.variable.property.php#0a4d28