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#0F1615
  • activityBar.foreground#4AFFD6
  • button.background#4AFFD6
  • button.foreground#0F1615
  • button.hoverBackground#7FFDE2
  • editor.background#111A19
  • editor.foreground#E2F3F1
  • editor.lineHighlightBackground#142E2B
  • editor.selectionBackground#1F4F46
  • editor.wordHighlightBackground#1F4F46
  • editorGroupHeader.tabsBackground#0F1615
  • focusBorder#4AFFD650
  • inputOption.activeBorder#4AFFD6
  • progressBar.background#4AFFD6
  • sideBar.background#111A19
  • sideBar.foreground#B8E2D9
  • statusBar.background#0F1615
  • statusBar.foreground#4AFFD6
  • tab.activeBackground#111A19
  • tab.inactiveBackground#0F1615
  • titleBar.activeBackground#0F1615

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.line.documentation.rust, comment.block.documentation.ts, comment.block.html, comment.line.triple-slash.directive#619F92italic
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#E2F3F1
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, keyword.control.default, storage.type.class.ts, storage.modifier.async#4AFFD6
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, keyword.operator.optional#40E6C1
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#73FFE0
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, entity.name.function.php, support.function.magic, meta.function-call.generic, meta.method.declaration#8AFFE7
constant.numeric, constant.language, support.constant, constant.character, constant.escape, keyword.other.unit, constant.other.color, constant.other.symbol, constant.other.key, support.constant.property-value, constant.numeric.decimal, constant.numeric.integer, constant.numeric.hex, constant.numeric.binary#FFB84A
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#B4FFE6
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, storage.type.builtin, entity.name.type.class, entity.name.type.module, entity.name.type.parameter#A3FFE8
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, meta.decorator variable.other.readwrite, meta.decorator punctuation.decorator, entity.other.attribute-name.id#8AFFE7
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, support.constant.property-value.css, support.constant.font-name, support.constant.media, constant.other.color.rgb-value#40E6C1
markup.heading, markup.bold, markup.italic, markup.inline.raw, markup.quote, markup.list, markup.link, markup.underline, markup.raw.block, markup.fenced_code, markup.inline.raw.string#73FFE0
variable.language.self, variable.language.this, variable.language.super, variable.language.special.self.python, variable.language.this.php, variable.language.this.ts, variable.language.arguments, variable.language.global#4AFFD6italic
punctuation.definition.template-expression, punctuation.section.embedded, meta.embedded.line, meta.template.expression, meta.embedded.expression, meta.interpolation#40E6C1