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.background#ffffff1a
  • activityBarBadge.background#007acc
  • badge.background#ffffff1a
  • editor.background#242424
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#ffffff0b
  • editor.selectionBackground#204182cc
  • editorGutter.background#ffffff0b
  • editorInlayHint.foreground#880000
  • editorLineNumber.activeForeground#ff6600
  • editorLineNumber.foreground#ffa500
  • editorSuggestWidget.background#303030
  • editorSuggestWidget.highlightForeground#cc6e2f
  • editorSuggestWidget.selectedBackground#204182cc
  • sideBar.background#242424
  • sideBar.border#ffffff1a
  • statusBar.background#ffffff1a
  • statusBar.foreground#cccccc
  • tab.activeBackground#ffffff1a
  • tab.activeBorder#0c7d9d
  • tab.inactiveBackground#ffffff0b
  • titleBar.activeBackground#ffffff1a
  • titleBar.activeForeground#cccccc
  • titleBar.inactiveBackground#ffffff10

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#e6b450
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#ff2400
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#6a8759
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#cc8242
expression.string,meta.template.expression#b7410e
constant.numeric#ff2400
punctuation.brackets.curly.rust, source.json#ff2400
punctuation.semi.rust,punctuation.comma.rust#880000
constant.language,variable.language#cc8242
constant.character, constant.other, meta.interpolation.rust#ffa500
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#cc8242
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#b7410e
storage,storage.type,storage.modifier,storage.arrow#cc8242
class.instance.constructor,new.expr entity.name.type#ffc66d
support.function, entity.name.function#ffc66d
annotation.meta.ts, annotation.meta.tsx#b7410e
variable.parameter, operator.rest.parameters#b7410e
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#ffa500
quote.module#6a8759
markup.heading#cc8242
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#ffc66d
entity.other.attribute-name#b7410e
meta.object-literal.key#ffa500
storage.modifier.ts#cc8242
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#ff2400
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#ff2400
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#ffc66d
comment.block.documentation#6a8759
storage.type.class.jsdoc#cc8242
constant.language.import-export-all#b7410e
objectliteral.key.separator, punctuation.separator.key-value#b7410e
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#b7410e
regex.character-class#b7410e
entity.name.type.class#b7410e
entity.other.inherited-class#ff2400
entity.name.type.instance.jsdoc#ffc66d
yaml.entity.name,yaml.string.entity.name#cc8242
yaml.string.out#b7410e
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end#b7410e
string.regexp#cc8242
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#ffc66d
constant.other.character-class.regexp, constant.character.escape.ts#b7410e
expr.regex.or.operator#b7410e
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#6a8759
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded#b7410e
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#b7410e
property-list.property-value,property-list.constant#a5c261
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#ff2400
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#ffc66d
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#ff2400
property-list.property-value.function#ffc66d
support.constant.property-value.css,support.constant.property-value.scss#a5c261
css.entity.name.tag,scss.entity.name.tag#cc8242
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#ffc66d
keyword.scss,keyword.css#cc8242
triple-slash.tag#b7410eitalic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.operator.logical.python#cc8242
support.class.dart#cc8242
variable.other.property.php#cc8242
support.variable.property.php#ffc66d
source.rust,source.json,source.toml#ff6600