Skip to main content
CodingTheme

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#eee6da
  • editor.background#f9f6f2
  • editor.lineHighlightBackground#FFFFFF
  • editor.selectionBackground#b0e4d5
  • editorBracketMatch.background#7B4145
  • editorBracketMatch.border#B72937
  • editorGroupHeader.tabsBackground#EFE7DC
  • editorGutter.background#f9f6f2
  • editorLineNumber.foreground#DBCBB1
  • scrollbarSlider.background#eee6da
  • scrollbarSlider.hoverBackground#DBCBB1
  • sideBar.background#E5D8C6
  • statusBar.background#D2BD9D
  • tab.activeBackground#f9f6f2
  • tab.activeForeground#2F83BC
  • tab.border#f9f6f2
  • tab.inactiveBackground#D2BD9D
  • tab.inactiveForeground#f9f6f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.separator.key-value.js#aa6064
punctuation.separator.key-value.jsx#aa6064
punctuation.separator.key-value.ts#aa6064
punctuation.separator.key-value.tsx#aa6064
storage.modifier.async.js#aa6064
storage.modifier.async.jsx#aa6064
storage.modifier.async.ts#aa6064
storage.modifier.async.tsx#aa6064
meta.brace.round.js#A2575B
meta.brace.round.jsx#aa6064
meta.brace.round.ts#aa6064
meta.brace.round.tsx#aa6064
entity.other.inherited-class#aa6064
support.class.builtin.js#A2575B
support.class.builtin.jsx#aa6064
support.class.builtin.ts#aa6064
support.class.builtin.tsx#aa6064
meta.tag.attributes.js#aa6064
meta.tag.attributes.jsx#A2575B
meta.tag.attributes.ts#aa6064
meta.tag.attributes.tsx#8C4B4E
keyword.control.module.js#A2575B
keyword.control.module.jsx#aa6064
keyword.control.module.ts#aa6064
keyword.control.module.tsx#B06B6F
keyword.operator.accessor#B6777A
invalid#BC8285underline
constant.numeric#A2575B
keyword#B6777A
meta.var.expr.js#aa6064
meta.var.expr.jsx#aa6064
meta.var.expr.ts#aa6064
meta.var.expr.tsx#aa6064
keyword.control.import.js#975154
keyword.control.import.jsx#aa6064
keyword.control.import.ts#8C4B4E
keyword.control.import.tsx#aa6064
keyword.control.from.js#aa6064
keyword.control.from.jsx#B6777A
keyword.control.from.ts#BC8285
keyword.control.from.tsx#A2575B
keyword.control.export.js#B06B6F
keyword.control.export.jsx#aa6064
keyword.control.export.ts#B06B6F
keyword.control.export.tsx#aa6064
keyword.control.default.js#A2575B
keyword.control.default.jsx#975154
keyword.control.default.ts#aa6064
keyword.control.default.tsx#aa6064
support.type.object.module.js#A2575B
support.type.object.module.jsx#aa6064
support.type.object.module.ts#aa6064
support.type.object.module.tsx#A2575B
variable.parameter#328cc9
support.function#2871A2
meta.import.js#328cc9
meta.import.jsx#328cc9
meta.import.ts#328cc9
meta.import.tsx#328cc9
meta.paragraph.markdown#328cc9
entity.other.attribute-name.js#57A2D5
entity.other.attribute-name.jsx#328cc9
entity.other.attribute-name.ts#57A2D5
entity.other.attribute-name.tsx#57A2D5
string.quoted.single.js#328cc9
string.quoted.single.jsx#2F83BC
string.quoted.single.ts#2F83BC
string.quoted.single.tsx#57A2D5
string.quoted.single.json#4A9BD2
support.class.promise.js#328cc9
support.class.promise.jsx#328cc9
support.class.promise.ts#328cc9
support.class.promise.tsx#3D94CF
support.type.object.console.js#328cc9
support.type.object.console.jsx#2F83BC
support.type.object.console.ts#4A9BD2
support.type.object.console.tsx#4A9BD2
support.function.console.js#328cc9
support.function.console.jsx#328cc9
support.function.console.ts#328cc9
support.function.console.tsx#328cc9
punctuation.definition.block.js#2F83BC
punctuation.definition.block.jsx#328cc9
punctuation.definition.block.ts#328cc9
punctuation.definition.block.tsx#328cc9
support.constant#d95361
punctuation.separator.parameter.js#DD6370
punctuation.separator.parameter.jsx#D23344
punctuation.separator.parameter.ts#d95361
punctuation.separator.parameter.tsx#d95361
constant.character#D54352
constant.language#d95361
constant.other#d95361
comment#D54352
markup.italic#D54352
meta.object-literal.key.js#D54352
meta.object-literal.key.jsx#d95361
meta.object-literal.key.ts#D23344
meta.object-literal.key.tsx#d95361
comment.block.documentation#D54352
comment.line.double-slash#d95361
punctuation.accessor.js#d95361
punctuation.accessor.jsx#d95361
punctuation.accessor.ts#D54352
punctuation.accessor.tsx#d95361
variable.language#DD6370
variable.other.object.js#C62C3C
variable.other.object.jsx#d95361
variable.other.object.ts#d95361
variable.other.object.tsx#C62C3C
variable.other.readwrite#d95361
variable.other.readwrite.js#E4838D
variable.other.readwrite.jsx#E0737E
variable.other.readwrite.ts#d95361
variable.other.readwrite.tsx#D23344
constant.language.boolean#567c73
constant.language.null.js#4B6C64
constant.language.null.jsx#50746C
constant.language.null.ts#618C82
constant.language.null.tsx#4B6C64
entity.name.class#567c73underline
entity.name.function#567c73underline
entity.name.type#50746Cunderline
markup.heading.markdown#567c73
punctuation.separator.comma.js#567c73
punctuation.separator.comma.jsx#679489
punctuation.separator.comma.ts#567c73
punctuation.separator.comma.tsx#567c73
support.variable.property.js#50746C
support.variable.property.jsx#4B6C64
support.variable.property.ts#50746C
support.variable.property.tsx#567c73
support.type.primitive.js#567c73
support.type.primitive.jsx#5C847A
support.type.primitive.ts#567c73
support.type.primitive.tsx#679489
variable#567c73
entity.name.tag#D43F4Eunderline
markup.italic#d13141
punctuation.accessor.js#D43F4E
punctuation.accessor.jsx#d13141
punctuation.accessor.ts#D43F4E
punctuation.accessor.tsx#B72937
source.js#d13141
source.jsx#d13141
source.ts#D43F4E
source.tsx#d13141
storage.modifier.js#C52C3B
storage.modifier.jsx#d13141
storage.modifier.ts#D43F4E
storage.modifier.tsx#d13141
storage.type#B72937
string.quoted.single.js#B72937
string.quoted.single.jsx#d13141
string.quoted.single.ts#d13141
string.quoted.single.tsx#d13141
support.function.dom.js#C52C3B
support.function.dom.jsx#AA2633
support.function.dom.ts#DA5A67
support.function.dom.tsx#d13141
support.variable.property.js#AA2633
support.variable.property.jsx#d13141
support.variable.property.ts#D43F4E
support.variable.property.tsx#d13141
variable.language.constructor#d13141underline
variable.language.this#C52C3B
punctuation.definition.parameters.begin.js#8d4b4f
punctuation.definition.parameters.begin.jsx#A85B5F
punctuation.definition.parameters.begin.ts#A85B5F
punctuation.definition.parameters.begin.tsx#A85B5F
punctuation.definition.parameters.end.js#84464A
punctuation.definition.parameters.end.jsx#965054
punctuation.definition.parameters.end.ts#8d4b4f
punctuation.definition.parameters.end.tsx#8d4b4f
punctuation.definition.parameters.end.js#8d4b4f
punctuation.definition.parameters.end.jsx#8d4b4f
punctuation.definition.parameters.end.ts#8d4b4f
punctuation.definition.parameters.end.tsx#8d4b4f
markup.quote#84464A
meta.tag.js#8d4b4f
meta.tag.jsx#84464A
meta.tag.ts#8d4b4f
meta.tag.tsx#A85B5F
meta.parameters.js#7B4145
meta.parameters.jsx#8d4b4f
meta.parameters.ts#8d4b4f
meta.parameters.tsx#84464A
meta.brace.square.js#8d4b4f
meta.brace.square.jsx#8d4b4f
meta.brace.square.ts#8d4b4f
meta.brace.square.tsx#8d4b4f
variable.other.class.js#84464A
variable.other.class.jsx#8d4b4f
variable.other.class.ts#8d4b4f
variable.other.class.tsx#965054
constant.other.object.key.js#84464A
constant.other.object.key.jsx#8d4b4f
constant.other.object.key.ts#8d4b4f
constant.other.object.key.tsx#7B4145
entity.name.function.method#8d4b4f
string.template#A85B5F
support.type.property-name.json#8d4b4f
variable.other.property.js#84464A
variable.other.property.jsx#8d4b4f
variable.other.property.ts#8d4b4f
variable.other.property.tsx#8d4b4f

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...