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.activeLineNumber.foreground#cccccc
  • editor.background#242424
  • editor.foreground#cccccc
  • editor.lineHighlightBackground#ffffff0b
  • editor.selectionBackground#204182cc
  • editorGutter.background#ffffff0b
  • 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#707070
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#CCCCCC
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#9FBD88
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#C78DB1
expression.string,meta.template.expression#CCCCCC
constant.numeric#6897bb
constant.language,variable.language#C78DB1
constant.character, constant.other#9E7BB0
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#C78DB1
entity.name.type,meta.return.type,meta.type.annotation,meta.type.parameters,support.type.primitive#7A9EC2
storage,storage.type,storage.modifier,storage.arrow#C78DB1
class.instance.constructor,new.expr entity.name.type#FFC66D
support.function, entity.name.function#5A95BC
annotation.meta.ts, annotation.meta.tsx#CCCCCC
variable.parameter, operator.rest.parameters#A9B7C6
variable.property,variable.other.property,variable.other.object.property,variable.object.property,support.variable.property#9876AA
quote.module#A9B7C6
markup.heading#777777
punctuation.definition.tag.html, punctuation.definition.tag.begin, punctuation.definition.tag.end, entity.name.tag#C78DB1
entity.other.attribute-name#606060
meta.object-literal.key#9E7BB0
storage.modifier.ts#C78DB1
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#7A9EC2
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#7A9EC2
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#FFC66D
comment.block.documentation#606060
storage.type.class.jsdoc#777777
constant.language.import-export-all#CCCCCC
objectliteral.key.separator, punctuation.separator.key-value#A9B7C6
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#CCCCCC
regex.character-class#6897BB
entity.name.type.class#a9b7c6
entity.other.inherited-class#7A9EC2
entity.name.type.instance.jsdoc#FFC66D
yaml.entity.name,yaml.string.entity.name#C78DB1
yaml.string.out#A9B7C6
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end#CCCCCC
string.regexp#6897BB
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#FFC66D
constant.other.character-class.regexp, constant.character.escape.ts#CCCCCC
expr.regex.or.operator#CCCCCC
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#9FBD88
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded#CCCCCC
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#CCCCCC
property-list.property-value,property-list.constant#A5C261
support.type.property-name.variable.css,support.type.property-name.variable.scss,variable.scss#7A9EC2
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#7A9EC2
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#CCCCCCitalic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.operator.logical.python#C78DB1