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.background#859DA9D5
  • editor.background#2A3343
  • editor.lineHighlightBackground#40434a
  • editor.selectionBackground#40434a
  • editorBracketMatch.background#52BC8C
  • editorBracketMatch.border#D64F82
  • editorGroupHeader.tabsBackground#2A3343f3
  • editorGutter.background#2A3343DA
  • editorLineNumber.foreground#859DA9f3
  • scrollbarSlider.background#859DA9D5
  • scrollbarSlider.hoverBackground#859DA9f3
  • sideBar.background#859DA9f3
  • statusBar.background#859DA9f3
  • tab.activeBackground#2A3343DA
  • tab.activeForeground#6197B4
  • tab.border#2A3343DA
  • tab.inactiveBackground#859DA9f3
  • tab.inactiveForeground#2A3343DA

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#F7DDB2F1—
constant.language.null.js#F7DDB2F1—
constant.language.null.jsx#F7DDB2f3—
constant.language.null.ts#F7DDB2F1—
constant.language.null.tsx#F7DDB2F1—
entity.name.class#F7DDB2f3underline
entity.name.function#F7DDB2F1underline
entity.name.type#F7DDB2f3underline
markup.heading.markdown#F7DDB2F1—
punctuation.separator.comma.js#F7DDB2D3—
punctuation.separator.comma.jsx#F7DDB2F1—
punctuation.separator.comma.ts#F7DDB2BF—
punctuation.separator.comma.tsx#F7DDB2D3—
support.variable.property.js#F7DDB2f3—
support.variable.property.jsx#F7DDB2D3—
support.variable.property.ts#F7DDB2F1—
support.variable.property.tsx#F7DDB2F1—
support.type.primitive.js#F7DDB2F1—
support.type.primitive.jsx#F7DDB2F1—
support.type.primitive.ts#F7DDB2f3—
support.type.primitive.tsx#F7DDB2F1—
variable#F7DDB2F1—
variable.parameter#6ea0ba—
support.function#6ea0ba—
meta.import.js#7BA9C0—
meta.import.jsx#7BA9C0—
meta.import.ts#6197B4—
meta.import.tsx#95BACD—
meta.paragraph.markdown#548FAE—
entity.other.attribute-name.js#6ea0ba—
entity.other.attribute-name.jsx#6ea0ba—
entity.other.attribute-name.ts#6ea0ba—
entity.other.attribute-name.tsx#95BACD—
string.quoted.single.js#6197B4—
string.quoted.single.jsx#88B1C6—
string.quoted.single.ts#6ea0ba—
string.quoted.single.tsx#6197B4—
string.quoted.single.json#4D85A1—
support.class.promise.js#6197B4—
support.class.promise.jsx#88B1C6—
support.class.promise.ts#6ea0ba—
support.class.promise.tsx#95BACD—
support.type.object.console.js#7BA9C0—
support.type.object.console.jsx#6197B4—
support.type.object.console.ts#6ea0ba—
support.type.object.console.tsx#95BACD—
support.function.console.js#6ea0ba—
support.function.console.jsx#6ea0ba—
support.function.console.ts#6ea0ba—
support.function.console.tsx#6ea0ba—
punctuation.definition.block.js#95BACD—
punctuation.definition.block.jsx#6ea0ba—
punctuation.definition.block.ts#6ea0ba—
punctuation.definition.block.tsx#95BACD—
support.constant#EBA1A1—
punctuation.separator.parameter.js#DF6868—
punctuation.separator.parameter.jsx#E78E8E—
punctuation.separator.parameter.ts#D74343—
punctuation.separator.parameter.tsx#DF6868—
constant.character#DF6868—
constant.language#e37b7b—
constant.other#e37b7b—
comment#e37b7b—
markup.italic#DF6868—
meta.object-literal.key.js#e37b7b—
meta.object-literal.key.jsx#D74343—
meta.object-literal.key.ts#E78E8E—
meta.object-literal.key.tsx#E78E8E—
comment.block.documentation#DB5555—
comment.line.double-slash#DF6868—
punctuation.accessor.js#e37b7b—
punctuation.accessor.jsx#E78E8E—
punctuation.accessor.ts#e37b7b—
punctuation.accessor.tsx#e37b7b—
variable.language#e37b7b—
variable.other.object.js#DF6868—
variable.other.object.jsx#e37b7b—
variable.other.object.ts#E78E8E—
variable.other.object.tsx#e37b7b—
variable.other.readwrite#e37b7b—
variable.other.readwrite.js#e37b7b—
variable.other.readwrite.jsx#DF6868—
variable.other.readwrite.ts#e37b7b—
variable.other.readwrite.tsx#EBA1A1—
entity.name.tag#EDB23Aunderline
markup.italic#EDB23A—
punctuation.accessor.js#E9A61A—
punctuation.accessor.jsx#E9A61A—
punctuation.accessor.ts#ebac2a—
punctuation.accessor.tsx#ebac2a—
source.js#ebac2a—
source.jsx#E9A61A—
source.ts#E9A61A—
source.tsx#ebac2a—
storage.modifier.js#EEB94B—
storage.modifier.jsx#ebac2a—
storage.modifier.ts#EEB94B—
storage.modifier.tsx#ebac2a—
storage.type#F0BF5B—
string.quoted.single.js#E9A61A—
string.quoted.single.jsx#EDB23A—
string.quoted.single.ts#E9A61A—
string.quoted.single.tsx#E9A61A—
support.function.dom.js#ebac2a—
support.function.dom.jsx#ebac2a—
support.function.dom.ts#ebac2a—
support.function.dom.tsx#ebac2a—
support.variable.property.js#ebac2a—
support.variable.property.jsx#ebac2a—
support.variable.property.ts#ebac2a—
support.variable.property.tsx#CC9013—
variable.language.constructor#ebac2aunderline
variable.language.this#EEB94B—
punctuation.separator.key-value.js#DA608E—
punctuation.separator.key-value.jsx#de729b—
punctuation.separator.key-value.ts#E695B4—
punctuation.separator.key-value.tsx#de729b—
storage.modifier.async.js#de729b—
storage.modifier.async.jsx#E284A8—
storage.modifier.async.ts#de729b—
storage.modifier.async.tsx#DA608E—
meta.brace.round.js#de729b—
meta.brace.round.jsx#D23D75—
meta.brace.round.ts#de729b—
meta.brace.round.tsx#de729b—
entity.other.inherited-class#EAA7C1—
support.class.builtin.js#de729b—
support.class.builtin.jsx#de729b—
support.class.builtin.ts#D23D75—
support.class.builtin.tsx#E284A8—
meta.tag.attributes.js#de729b—
meta.tag.attributes.jsx#DA608E—
meta.tag.attributes.ts#D23D75—
meta.tag.attributes.tsx#EAA7C1—
keyword.control.module.js#de729b—
keyword.control.module.jsx#de729b—
keyword.control.module.ts#E695B4—
keyword.control.module.tsx#DA608E—
keyword.operator.accessor#EAA7C1—
invalid#E284A8underline
constant.numeric#de729b—
keyword#D23D75—
meta.var.expr.js#de729b—
meta.var.expr.jsx#EAA7C1—
meta.var.expr.ts#E284A8—
meta.var.expr.tsx#DA608E—
keyword.control.import.js#de729b—
keyword.control.import.jsx#DA608E—
keyword.control.import.ts#D23D75—
keyword.control.import.tsx#DA608E—
keyword.control.from.js#de729b—
keyword.control.from.jsx#E284A8—
keyword.control.from.ts#de729b—
keyword.control.from.tsx#E284A8—
keyword.control.export.js#EAA7C1—
keyword.control.export.jsx#de729b—
keyword.control.export.ts#de729b—
keyword.control.export.tsx#DA608E—
keyword.control.default.js#DA608E—
keyword.control.default.jsx#de729b—
keyword.control.default.ts#D64F82—
keyword.control.default.tsx#DA608E—
support.type.object.module.js#de729b—
support.type.object.module.jsx#DA608E—
support.type.object.module.ts#de729b—
support.type.object.module.tsx#de729b—
punctuation.definition.parameters.begin.js#6fc79f—
punctuation.definition.parameters.begin.jsx#6fc79f—
punctuation.definition.parameters.begin.ts#60C195—
punctuation.definition.parameters.begin.tsx#46B482—
punctuation.definition.parameters.end.js#6fc79f—
punctuation.definition.parameters.end.jsx#6fc79f—
punctuation.definition.parameters.end.ts#6fc79f—
punctuation.definition.parameters.end.tsx#9BD8BC—
punctuation.definition.parameters.end.js#6fc79f—
punctuation.definition.parameters.end.jsx#6fc79f—
punctuation.definition.parameters.end.ts#60C195—
punctuation.definition.parameters.end.tsx#9BD8BC—
markup.quote#8CD2B2—
meta.tag.js#52BC8C—
meta.tag.jsx#6fc79f—
meta.tag.ts#6fc79f—
meta.tag.tsx#6fc79f—
meta.parameters.js#6fc79f—
meta.parameters.jsx#6fc79f—
meta.parameters.ts#6fc79f—
meta.parameters.tsx#6fc79f—
meta.brace.square.js#7ECDA9—
meta.brace.square.jsx#60C195—
meta.brace.square.ts#46B482—
meta.brace.square.tsx#60C195—
variable.other.class.js#6fc79f—
variable.other.class.jsx#60C195—
variable.other.class.ts#7ECDA9—
variable.other.class.tsx#8CD2B2—
constant.other.object.key.js#60C195—
constant.other.object.key.jsx#60C195—
constant.other.object.key.ts#6fc79f—
constant.other.object.key.tsx#60C195—
entity.name.function.method#6fc79f—
string.template#6fc79f—
support.type.property-name.json#60C195—
variable.other.property.js#6fc79f—
variable.other.property.jsx#7ECDA9—
variable.other.property.ts#6fc79f—
variable.other.property.tsx#60C195—
BecauseAlways by selfrefactor - VS Code Theme