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.activeBackground#1e1f22
  • activityBar.activeFocusBorder#8d939e
  • activityBar.background#181818
  • activityBar.border#262422
  • activityBar.foreground#7b79fa
  • activityBar.inactiveForeground#8d939e
  • activityBarBadge.background#ffcc00
  • activityBarBadge.foreground#000000
  • badge.background#ffcc00
  • badge.foreground#000000
  • breadcrumb.background#1e1f22
  • breadcrumb.foreground#A6C5F4
  • button.background#7b79fa
  • button.foreground#000000
  • checkbox.background#ffcc00
  • checkbox.foreground#000000
  • dropdown.background#000000
  • dropdown.foreground#A6C5F4
  • dropdown.listBackground#262422
  • editor.background#1e1f22
  • editor.findMatchBackground#00ff0015
  • editor.findMatchHighlightBackground#00000000
  • editor.findMatchHighlightBorder#00ff0075
  • editor.foreground#CCCCCC
  • editor.lineHighlightBorder#ADD6FF10
  • editor.selectionBackground#135564
  • editor.selectionHighlightBackground#13556475
  • editor.wordHighlightBackground#00000000
  • editor.wordHighlightBorder#ADD6FF50
  • editor.wordHighlightStrongBackground#00000000
  • editor.wordHighlightStrongBorder#ADD6FF50
  • editorActiveLineNumber.foreground#ffcc00
  • editorGroup.border#000000
  • editorGroupHeader.tabsBackground#181818
  • editorGutter.background#1e1f22
  • editorLineNumber.foreground#6a6a6a
  • focusBorder#ffcc0055
  • input.background#000000
  • input.foreground#ffcc00
  • list.activeSelectionBackground#4a33be
  • list.activeSelectionForeground#CCCCCC
  • list.focusBackground#8d939e33
  • list.focusForeground#ffcc00
  • list.highlightForeground#ffcc00
  • list.hoverBackground#00000033
  • list.hoverForeground#A6C5F4
  • list.inactiveSelectionBackground#4a33be55
  • list.inactiveSelectionForeground#ffcc00
  • peekViewEditor.matchHighlightBackground#61afef22
  • progressBar.background#ffcc00
  • quickInput.background#000000
  • quickInputList.focusBackground#4a33be
  • quickInputList.focusBorder#ffcc00
  • quickInputList.focusForeground#CCCCCC
  • sash.hoverBorder#7b79fa
  • selection.background#ffcc0055
  • sideBar.background#181818
  • sideBar.border#000000
  • sideBarSectionHeader.background#1e1f22
  • sideBarSectionHeader.border#262422
  • sideBarSectionHeader.foreground#A6C5F4
  • statusBar.background#000000
  • statusBar.border#000000
  • tab.activeBackground#1e1f22
  • tab.activeBorderTop#7b79fa
  • tab.inactiveBackground#181818
  • tab.inactiveForeground#A6C5F4
  • terminal.background#181818
  • titleBar.activeBackground#000000
  • titleBar.border#000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#808080
keyword.operator,keyword.operator.logical,keyword.operator.relational,keyword.operator.assignment,keyword.operator.comparison,keyword.operator.ternary,keyword.operator.arithmetic,keyword.operator.spread#CCCCCC
meta.object-literal.key, meta.object-literal.key string, support.type.property-name.json#C77DBB
meta.diff.header.git#CF8E6D
meta.diff.header.from-file, meta.diff.header.to-file#D5B778
markup.deleted.diff#FF0000
markup.inserted.diff#00FF00
keyword.input.graphql, keyword.type.graphql#CF8E6Dbold
variable.graphql#C77DBB
support.type.graphql#D5B778
support.type.builtin.graphql#6AAB73
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, punctuation.definition.string.begin, punctuation.definition.string.end#6AAB73
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.quasi.element.begin,punctuation.quasi.element.end#CF8E6D
expression.string,meta.template.expression,entity.quasi.element#CCCCCC
constant.numeric, variable.other.normal.shell#A6C5F4
constant.language,variable.language#CF8E6D
constant.character, constant.other, string.unquoted#C77DBB
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#CF8E6D
meta.return.type,meta.type.annotation,meta.type.parameters,meta.brace.round,meta.brace.square#CCCCCC
storage.modifier,storage.arrow, storage.type.class,support.type.primitive#CF8E6D
storage,meta.var.expr storage.type,storage.type.class,variable.language.this,variable.language.super,keyword.control.loop,keyword.operator.expression.in,keyword.operator.new,keyword.control.switch,constant.language.boolean.false,constant.language.boolean.true,constant.language.null,keyword.control.conditional,keyword.control.flow,keyword.operator.expression.instanceof,keyword.operator.expression.of,keyword.operator.expression.delete,keyword.operator.expression.void,keyword.control.module,keyword.control.trycatch,keyword.control.import,keyword.control.export,keyword.control.from,keyword.control.default#CF8E6D
support.function, entity.name.function, entity.name.function.tsx, entity.name.type.class.ts, entity.name.function.js, entity.name.function.jsx#D5B778
annotation.meta.ts, annotation.meta.tsx, storage.type.function.arrow.ts, storage.type.function.arrow.js#CCCCCC
variable.parameter,operator.rest.parameters, variable.other.object, variable.other.object.property, meta.ng-binding.event.html#CCCCCC
variable.property,variable.constant,variable.other.property,variable.object.property,support.variable.property,variable.other.readwrite.alias, meta.ng-binding.property.html, meta.ng-binding.template.html#C77DBB
support.class.console, support.class.error, support.class.builtin, support.constant.math, support.class.builtin.js, support.class.builtin.ts#C77DBB
meta.tag.custom.start.html, meta.tag.custom.end.html, entity.name.tag.custom.css, entity.name.tag.custom.scss#CF8E6D
support.class.component.html#CF8E6D
support.class.component.tsx, entity.other.ng-binding-name.template.html, variable.language.this.ts, support.class.component.open.jsx, support.class.component.close.jsx#CF8E6Dbold
support.class.component.open.jsx, support.class.component.close.jsx#CF8E6Dbold
meta.jsx.children.tsx, JSXNested#CCCCCC
source.directive.vue#C77DBB
quote.module#6AAB73
markup.heading, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.comma, punctuation.separator.parameter, punctuation.terminator.statement#CF8E6D
punctuation.definition.tag.html, meta.tag#D5B778
punctuation.definition.tag.begin, punctuation.definition.tag.end#D5B778
entity.other.attribute-name, support.type.property-name.css#C77DBB
invalid.illegal.character-not-allowed-here.html#F44747
meta.object-literal.key, support.type.property-name.json#C77DBB
storage.modifier.ts#CF8E6D
variable.other.env#CF8E6D
source.env, constant.numeric.env#6A8759
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#79B4E1
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#79B4E1
function-declaration,method-declaration,method-overload-declaration,type-fn-type-parameters#D5B778
comment.block.documentation#6AAB73italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#6AAB73italic bold underline
punctuation.decorator#BBB529
entity.name.type#BBB529
constant.language.import-export-all#CCCCCC
objectliteral.key.separator, punctuation.separator.key-value#CCCCCC
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#CCCCCC
regex.character-class#CCCCCC
entity.name.type.class#BBB529
class.instance.constructor, new.expr entity.name.type#D5B778
entity.other.inherited-class#C77DBB
entity.name.type.instance.jsdoc#6AAB73 italic
meta.object-literal.key string#C77DBB
yaml.entity.name,yaml.string.entity.name#CF8E6D
yaml.string.out#CCCCCC
meta.brace.square.ts,block.support.module,block.support.type.module,block.support.function.variable,punctuation.definition.typeparameters.begin,punctuation.definition.typeparameters.end,punctuation.definition.block,punctuation.definition.parameters.begin,punctuation.definition.parameters.end,punctuation.accessor, punctuation.definition.binding-pattern.object#CCCCCC
string.regexp#CCCCCC
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#D5B778
constant.other.character-class.regexp, constant.character.escape.ts, constant.character.escape.js#CF8E6D
expr.regex.or.operator#CCCCCC
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#6AAB73
tag.punctuation.begin.arrow.parameters.embedded,tag.punctuation.end.arrow.parameters.embedded,keyword.other.unit.percentage.css#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#79B4E1
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#D5B778
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#79B4E1
property-list.property-value.function#D5B778
support.constant.property-value.css,support.constant.property-value.scss,keyword.other.unit, punctuation.definition.string.begin.html,punctuation.definition.string.end.html,string.quoted.double.html,string.quoted.double.tsx, string.quoted.double.json,string.quoted.double.jsx,string.quoted.double.js#A5C261
entity.name.tag.css,entity.name.tag.scss,css.entity.name.tag,scss.entity.name.tag,punctuation.terminator.rule.css,punctuation.terminator.rule.scss#CF8E6D
meta.selector.css, entity.attribute-name.id, entity.other.attribute-name.pseudo-class.css,entity.other.attribute-name.pseudo-element.css#D5B778
keyword.scss,keyword.css#CF8E6D
triple-slash.tag#CCCCCCitalic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6