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#BCBEC4
  • 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#BCBEC4
  • 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#BCBEC4
  • 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#BCBEC4
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#FFC66D
markup.deleted.diff#FF0000
markup.inserted.diff#00FF00
keyword.input.graphql, keyword.type.graphql#CF8E6Dbold
variable.graphql#C77DBB
support.type.graphql#FFC66D
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#BCBEC4
constant.numeric, variable.other.normal.shell#2AACB8
constant.language,variable.language#CF8E6D
constant.character, constant.other, string.unquoted#C77DBB
constant.character.entity#2AACB8
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#BCBEC4
storage.modifier,storage.arrow, storage.type.class,support.type.primitive,support.type.builtin#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#56A8F5
annotation.meta.ts, annotation.meta.tsx, storage.type.function.arrow#BCBEC4
variable.parameter,operator.rest.parameters, variable.other.object, variable.other.object.property, meta.ng-binding.event.html#BCBEC4
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#2AACB8
support.class.component.open.jsx, support.class.component.close.jsx#2AACB8
meta.jsx.children.tsx, JSXNested#BCBEC4
source.directive.vue#C77DBB
quote.module#6AAB73
markup.heading, punctuation.separator.dictionary.key-value.json, punctuation.separator.dictionary.pair.json#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#2AACB8
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#6AAB73italic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#6AAB73italic bold underline
punctuation.decorator#B3AE60
entity.name.type#B3AE60
constant.language.import-export-all#BCBEC4
objectliteral.key.separator, punctuation.separator.key-value, punctuation.separator.comma, punctuation.separator.parameter, punctuation.terminator.statement#BCBEC4
regex italic
ts.meta.entity.name.namespace,tsx.meta.entity.name.namespace#BCBEC4
regex.character-class#BCBEC4
entity.name.type.class#B3AE60
class.instance.constructor, new.expr entity.name.type#FFC66D
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#BCBEC4
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#BCBEC4
string.regexp#BCBEC4
punctuation.definition.group.regexp,punctuation.definition.character-class.regexp#FFC66D
constant.other.character-class.regexp, constant.character.escape.ts, constant.character.escape.js#CF8E6D
expr.regex.or.operator#BCBEC4
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#BCBEC4
object-literal.object.member.key.field.other,object-literal.object.member.key.accessor,object-literal.object.member.key.array.brace.square#BCBEC4
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#CF8E6D
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#CF8E6D
triple-slash.tag#BCBEC4italic
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
Daynight Darcula Theme by igolskyi - VS Code Theme