Skip to main content
Coding Theme

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#161616
  • activityBarBadge.background#000000
  • breadcrumb.background#161616
  • editor.background#0f0f0f
  • editor.foreground#eeffff
  • editor.selectionBackground#4d992a85
  • editorGroupHeader.tabsBackground#161616
  • editorLineNumber.activeForeground#ffffff
  • sideBar.background#161616
  • sideBar.foreground#ffffff
  • sideBarTitle.foreground#bbbbbb
  • statusBar.background#d7ff52
  • statusBar.foreground#000000
  • titleBar.activeBackground#161616

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5e778f
constant#e27e8d
entity#70e1e8
invalid#d95468
keyword#5ec4ff
storage.type.class.js#0097a1
meta#68A1F0
meta.brace#68A1F0
punctuation#68A1F0
punctuation.definition.parameters#68A1F0
variable.parameter, entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql#ebbf83
punctuation.definition.template-expression#68A1F0
storage#0ab4c0
storage.type.function.arrow#008B94
string, punctuation.definition.string#98d66f
string.template, punctuation.definition.string.template#718CA1
support#68A1F0
support.function#70e1e8
support.class.component.js, support.class.component.jsx, support.class.component.ts, support.class.component.tsx#70e1e8
storage.modifier.async.tsx, storage.modifier.async.ts, storage.modifier.async.js, storage.modifier.async.jsx, keyword.operator.new.js, keyword.control.flow.js, keyword.control.flow.jsx, keyword.control.flow.ts, keyword.control.flow.tsx#5ec4ffitalic
support.variable.property.dom, support.constant.math.js, support.constant.math.jsx, support.constant.math.ts, support.constant.math.jsx, support.class.console.js, support.class.console.jsx, support.class.console.ts, support.class.console.tsx#b7c5d3
variable#68A1F0
source.css, source.stylus, source.scss, entity.other.attribute-name.class.css#68A1F0
punctuation.definition.constant.css#D95468
constant.other.color.rgb-value.hex.css#E27E8Dff
support.type.property-name.css#B7C5D3
keyword.other.important.scss#b62d65
entity.other.attribute-name.pseudo-element.css#5EC4FF
support.function.misc.scss#B7C5D3
entity.other.attribute-name.id.css, punctuation.definition.entity.css#68A1F0
entity.name.tag.css#68A1F0
source.css support, source.stylus support#B7C5D3
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#e27e8d
support.constant.property-value.css#68A1F0
keyword.other.unit.px.css, keyword.other.unit.percentage.css, constant.other.color.rgb-value.hex.css, keyword.other.unit.ms.css, keyword.other.unit.s.css, keyword.other.unit.vh.css, keyword.other.unit.vw.css, keyword.other.unit.deg.css#d95468
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#718CA1
source.css variable, source.stylus variable#ebbf83
entity.other#33CED8
text.html.basic#B7C5D3
toc-list.id.html#68A1F0
punctuation.definition.tag.end.html, punctuation.definition.tag.begin.html#68A1F0
entity.name.tag.block.any.html, meta.tag.block.any.html, entity.name.tag.inline.any.html, entity.name.tag.structure.any.html, meta.tag.inline.any.html, entity.name.tag.html, entity.name.tag.js, entity.name.tag.jsx, entity.name.tag.ts, entity.name.tag.tsx, meta.tag.js#008b94
punctuation.definition.string.begin, punctuation.definition.string.end#718CA1
source.js storage.type.function#008B94
variable.language, entity.name.type.class.js, entity.other.inherited-class.js, variable.language.this.ts, variable.language.this.java, variable.language.this.js#d98e48
entity.other.inherited-class.js, variable.other.readwrite.alias.js, meta.import.js, punctuation.accessor.js, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.readwrite.js, variable.other.readwrite.jsx#B7C5D3
variable.other.constant.js, variable.other.constant.js.jsx, variable.other.constant.ts, variable.other.constant.property.ts, variable.other.constant.property.js, variable.other.constant.property.tsx, variable.other.constant.tsx, support.constant.json.js, support.constant.json.ts, support.constant.json.tsx, variable.other.constant.object.js, variable.object.property.js, variable.object.property.jsx, variable.object.property.ts, variable.object.property.tsx#8BD49C
variable.parameter.function.language.special.self.python#b62d65
storage.type.function.python#b62d65
meta.function-call.arguments.python#8bd49c
meta.function-call.generic.python#008b94
source.json support#68A1F0
source.json string, source.json punctuation.definition.string, punctuation.definition.string.end.json, punctuation.definition.string.begin.json#B7C5D3
source.php entity#9effff
variable.other.php, punctuation.definition.variable.php#ebbf83
entity.other.inherited-class.java#d98e48
storage.type.annotation.java, storage.type.annotation.ts, entity.name.type.ts#b7c5d3italic
storage.type.java, support.type.primitive.ts, support.type.primitive.tsx, entity.name.type.ts, entity.name.type.tsx#008b94italic
support.type.primitive.ts#33ced8italic
storage.modifier.java, storage.modifier.ts, storage.modifier.js, storage.modifier.jsx#5ec4ff
entity.name.type.class.java#d98e48
variable.language.java, meta.try.resources.java, variable.language.super.ts#b62d65
variable.other.definition.java, meta.try.resources.java#8bd49c
Lights Off by Sohan Manju - VS Code Theme