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#0C1018
  • activityBar.foreground#56F0FF
  • button.background#56F0FF
  • button.foreground#0C1018
  • button.hoverBackground#7FF4FF
  • editor.background#0E1420
  • editor.foreground#F5F9FF
  • editor.lineHighlightBackground#121825
  • editor.selectionBackground#2D4055
  • editor.wordHighlightBackground#2D4055
  • editorGroupHeader.tabsBackground#0C1018
  • focusBorder#56F0FF50
  • inputOption.activeBorder#56F0FF
  • progressBar.background#56F0FF
  • sideBar.background#0E1420
  • sideBar.foreground#D0E1F5
  • statusBar.background#0C1018
  • statusBar.foreground#56F0FF
  • tab.activeBackground#0E1420
  • tab.inactiveBackground#0C1018
  • titleBar.activeBackground#0C1018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, comment.block.documentation, comment.block.javadoc, comment.line.double-slash, comment.line.number-sign.python, comment.line.hash.ruby, comment.block.documentation.rust, comment.block.documentation.ts, comment.block.html, comment.line.triple-slash.directive, comment.block.documentation.phpdoc, comment.block.yml#7A8B9Fitalic
variable, string constant.other.placeholder, variable.other.readwrite, variable.parameter, variable.other.object, variable.language, variable.other.property, variable.other.member, variable.scss, variable.other.php, variable.other.normal.shell, variable.other.special.rust, variable.other.readwrite.global, variable.other.constant, variable.argument.css, variable.other.object.property.js, meta.definition.variable#F5F9FF—
keyword, storage.type, storage.modifier, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.control.flow, storage.type.class.python, storage.type.function.python, keyword.other.fn.rust, storage.type.cs, keyword.package.go, storage.type.kotlin, keyword.control.import, keyword.control.export, storage.type.class.ts, keyword.control.conditional, keyword.control.loop, keyword.operator.expression.typeof#FF7FD4—
keyword.operator, punctuation, meta.brace, meta.delimiter, punctuation.definition.parameters, punctuation.separator, punctuation.terminator, punctuation.accessor, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.type.annotation, meta.decorator punctuation, punctuation.definition.template-expression#56F0FF—
entity.name.tag, support.class.component, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.jsx, entity.name.tag.tsx, punctuation.definition.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.js, meta.tag.tsx, meta.tag.custom#56F0FF—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.method-call, meta.function, support.function.builtin, support.function.core, meta.function.python, entity.name.function.go, entity.name.function.rust, support.function.std.rust, entity.name.function.php, support.function.magic, meta.function-call.generic#82EAFF—
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key, constant.numeric.decimal, constant.numeric.hex, constant.numeric.binary, constant.numeric.octal, constant.numeric.float, support.constant.property-value#FFB86C—
string, string.quoted.single, string.quoted.double, string.template, string.interpolated, string.regexp, string.other.link, string.quoted.backtick, string.unquoted.heredoc, string.quoted.triple, string.quoted.docstring.multi.python, string.template.js, string.quoted.template, string.quoted.sql#7FFF9F—
entity.name.type, support.type, support.class, storage.type.generic, storage.type.primitive, entity.name.class, entity.other.inherited-class, entity.name.struct, entity.name.enum, entity.name.interface, support.type.builtin, entity.name.type.class, entity.name.type.module, support.type.primitive.ts, meta.type.annotation#FFE97F—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.class.css, meta.decorator, meta.decorator entity.name.function, entity.other.attribute-name.id, meta.attribute#FF9FD4—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js, meta.decorator, meta.decorator.ts, meta.decorator.js, meta.decorator punctuation.decorator, meta.decorator variable.other.readwrite, meta.decorator entity.name.function#FFA7FF—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass, support.type.vendored.property-name, source.css.scss, source.css.less, source.css.sass, meta.property-name#56F0FF—
string.regexp, constant.character.escape.regex, string.regexp.character-class, string.regexp.anchor, string.regexp.group, punctuation.definition.group.regexp, keyword.operator.quantifier.regexp#7FFF9F—
meta.selectionset.graphql, entity.name.fragment.graphql, variable.graphql, meta.objectvalues.graphql#82EAFF—
support.type.property-name.json, meta.structure.dictionary.key.json#FF9FD4—