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#ffbc92
  • activityBar.background#2C0A25
  • activityBar.foreground#ffbc92
  • activityBarBadge.background#d62e6c
  • badge.background#d62e6c
  • editor.background#3b1c32
  • editor.foreground#ffbc92
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#073129AA
  • editorBracketHighlight.foreground1#a4d4b4
  • editorBracketHighlight.foreground2#95dbed
  • editorBracketHighlight.foreground3#abb818
  • editorBracketHighlight.foreground4#ed561a
  • editorBracketHighlight.foreground5#5b1c62
  • editorBracketHighlight.foreground6#ee8dc1
  • editorGutter.background#3b1c32
  • editorLineNumber.activeForeground#a4d4b4
  • editorLineNumber.foreground#ee8dc1
  • editorSuggestWidget.background#2C0A25
  • editorSuggestWidget.highlightForeground#d62e6c
  • editorSuggestWidget.selectedBackground#d62e6c40
  • sideBar.background#2C0A25
  • sideBar.border#ee8dc1
  • statusBar.background#2C0A25
  • statusBar.foreground#ffbc92
  • tab.activeBackground#2C0A25
  • tab.activeBorder#d62e6c
  • tab.inactiveBackground#2C0A25
  • titleBar.activeBackground#2C0A25
  • titleBar.activeForeground#ffbc92
  • titleBar.inactiveBackground#2C0A25

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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