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#D4A0EE
meta.diff.header.git#CC7832
meta.diff.header.from-file, meta.diff.header.to-file#FFC66D
markup.deleted.diff#FF0000
markup.inserted.diff#00FF00
keyword.input.graphql, keyword.type.graphql#CC7832bold
variable.graphql#D4A0EE
support.type.graphql#FFC66D
support.type.builtin.graphql#6CC158
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#6CC158
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end,punctuation.quasi.element.begin,punctuation.quasi.element.end#CC7832
expression.string,meta.template.expression,entity.quasi.element#CCCCCC
constant.numeric, variable.other.normal.shell#A6C5F4
constant.language,variable.language#CC7832
constant.character, constant.other, string.unquoted#D4A0EE
keyword,keyword.operator.new,keyword.operator.delete,keyword.operator.static,keyword.operator.this,keyword.operator.expression#CC7832
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#CC7832
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#CC7832
support.function, entity.name.function, entity.name.function.tsx, entity.name.type.class.ts, entity.name.function.js, entity.name.function.jsx#FFC66D
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#D4A0EE
support.class.console, support.class.error, support.class.builtin, support.constant.math, support.class.builtin.js, support.class.builtin.ts#D4A0EE
meta.tag.custom.start.html, meta.tag.custom.end.html, entity.name.tag.custom.css, entity.name.tag.custom.scss#CC7832
support.class.component.html#CC7832
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#CC7832bold
support.class.component.open.jsx, support.class.component.close.jsx#CC7832bold
meta.jsx.children.tsx, JSXNested#CCCCCC
source.directive.vue#D4A0EE
quote.module#6CC158
markup.heading, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json, punctuation.separator.comma, punctuation.separator.parameter, punctuation.terminator.statement#CC7832
punctuation.definition.tag.html, meta.tag#E8BF6A
punctuation.definition.tag.begin, punctuation.definition.tag.end#E8BF6A
entity.other.attribute-name, support.type.property-name.css#D4A0EE
invalid.illegal.character-not-allowed-here.html#F44747
meta.object-literal.key, support.type.property-name.json#D4A0EE
storage.modifier.ts#CC7832
variable.other.env#CC7832
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#FFC66D
comment.block.documentation#6CC158italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#6CC158italic 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#FFC66D
entity.other.inherited-class#D4A0EE
entity.name.type.instance.jsdoc#6CC158 italic
meta.object-literal.key string#D4A0EE
yaml.entity.name,yaml.string.entity.name#CC7832
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#FFC66D
constant.other.character-class.regexp, constant.character.escape.ts, constant.character.escape.js#CC7832
expr.regex.or.operator#CCCCCC
string.template.tag,string.template.punctuation.tag,string.quoted.punctuation.tag,string.quoted.embedded.tag, string.quoted.double.tag#6CC158
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#FFC66D
property-list.property-value.rgb-value, keyword.other.unit.css,keyword.other.unit.scss#79B4E1
property-list.property-value.function#FFC66D
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#CC7832
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#CC7832
triple-slash.tag#CCCCCCitalic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6