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#38e284
  • activityBar.background#291a18ff
  • activityBar.foreground#ee8dc1
  • activityBarBadge.background#5b1c62
  • badge.background#5b1c62
  • editor.background#221e1a
  • editor.foreground#38e284
  • editor.lineHighlightBackground#ffffff12
  • editor.selectionBackground#d9944430
  • editorBracketHighlight.foreground1#ee8dc1
  • editorBracketHighlight.foreground2#6edadc
  • editorBracketHighlight.foreground3#38e284
  • editorBracketHighlight.foreground4#ed561a
  • editorBracketHighlight.foreground5#d16ba6
  • editorBracketHighlight.foreground6#ee8dc1
  • editorGutter.background#221e1a
  • editorLineNumber.activeForeground#38e284
  • editorLineNumber.foreground#ee8dc1
  • editorSuggestWidget.background#291a18ff
  • editorSuggestWidget.highlightForeground#ed561a
  • editorSuggestWidget.selectedBackground#5b1c6240
  • sideBar.background#291a18ff
  • sideBar.border#ee8dc1
  • statusBar.background#291a18ff
  • statusBar.foreground#38e284
  • tab.activeBackground#291a18ff
  • tab.activeBorder#5b1c62
  • tab.inactiveBackground#291a18ff
  • titleBar.activeBackground#291a18ff
  • titleBar.activeForeground#38e284
  • titleBar.inactiveBackground#291a18ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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