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#c4c2ac
  • editor.background#f8f6eb
  • editor.lineHighlightBackground#c4c2ac35
  • editor.selectionBackground#edc8be
  • editorBracketMatch.background#497195
  • editorBracketMatch.border#791F39
  • editorGroupHeader.tabsBackground#F0ECD4
  • editorGutter.background#f8f6eb
  • editorLineNumber.foreground#B0AD90
  • scrollbarSlider.background#c4c2ac
  • scrollbarSlider.hoverBackground#B0AD90
  • sideBar.background#BAB89E
  • statusBar.background#A6A382
  • tab.activeBackground#f8f6eb
  • tab.activeForeground#A24877
  • tab.border#f8f6eb
  • tab.inactiveBackground#3D5554
  • tab.inactiveForeground#f8f6eb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#415C5B
punctuation.definition.template-expression.begin.js#3D5554
punctuation.definition.template-expression.begin.jsx#466261
punctuation.definition.template-expression.begin.ts#4F6F6E
punctuation.definition.template-expression.begin.tsx#466261
punctuation.definition.template-expression.end.js#466261
punctuation.definition.template-expression.end.jsx#415C5B
punctuation.definition.template-expression.end.ts#466261
punctuation.definition.template-expression.end.tsx#4B6867
entity.name.tag#3D5554underline
punctuation.accessor.js#415C5B
punctuation.accessor.jsx#466261
punctuation.accessor.ts#466261
punctuation.accessor.tsx#4B6867
source.js#942646
source.jsx#9D294B
source.ts#791F39
source.tsx#791F39
source.css#466261
source.scss#5482ab
storage.modifier.js#8b2442
storage.modifier.jsx#9D294B
storage.modifier.ts#8b2442
storage.modifier.tsx#82223E
string.quoted.single.js#4B6867
string.quoted.single.jsx#466261
string.quoted.single.ts#4F6F6E
string.quoted.single.tsx#4F6F6E
support.function.dom.js#4F6F6E
support.function.dom.jsx#4F6F6E
support.function.dom.ts#466261
support.function.dom.tsx#466261
support.variable.property.js#8b2442
support.variable.property.jsx#82223E
support.variable.property.ts#8b2442
support.variable.property.tsx#8b2442
variable.language.constructor#8b2442underline
variable.language.this#7e1b24
meta.selector.css#97436E
constant.language.null.js#B45687
constant.language.null.jsx#A24877
constant.language.null.ts#ad4d7f
constant.language.null.tsx#ad4d7f
entity.name.class#4F7AA0underline
entity.name.function#B45687underline
markup.heading.markdown#ad4d7f
punctuation.separator.comma.js#B45687
punctuation.separator.comma.jsx#ad4d7f
punctuation.separator.comma.ts#B9628F
punctuation.separator.comma.tsx#A24877
support.variable.property.js#466261
support.variable.property.jsx#466261
support.variable.property.ts#415C5B
support.variable.property.tsx#466261
support.type.primitive.js#466261
support.type.primitive.jsx#466261
support.type.primitive.ts#466261
support.type.primitive.tsx#466261
meta.brace.square.js#5482ab
meta.brace.square.jsx#5482ab
meta.brace.square.ts#5482ab
meta.brace.square.tsx#4F7AA0
variable.other.class.js#8b2442
variable.other.class.jsx#791F39
variable.other.class.ts#8b2442
variable.other.class.tsx#791F39
constant.other.object.key.js#4F7AA0
constant.other.object.key.jsx#5482ab
constant.other.object.key.ts#5482ab
constant.other.object.key.tsx#5F8AB0
variable.language#861D26
constant.language#8b2442
entity.name.type#415C5Bunderline
variable.parameter#3D5554
support.function#ad4d7f
source.json#942646
meta.object-literal.key.js#5482ab
meta.object-literal.key.jsx#6A92B6
meta.object-literal.key.ts#6A92B6
meta.object-literal.key.tsx#5482ab
variable.other.constant.js#466261
variable.other.constant.jsx#4F6F6E
variable.other.constant.ts#415C5B
variable.other.constant.tsx#415C5B
meta.paragraph.markdown#466261
entity.other.attribute-name.js#3D5554
entity.other.attribute-name.jsx#4B6867
entity.other.attribute-name.ts#466261
entity.other.attribute-name.tsx#3D5554
string.quoted.single.json#ad4d7f
support.class.promise.js#761922
support.class.promise.jsx#7e1b24
support.class.promise.ts#7e1b24
support.class.promise.tsx#8E1F29
support.type.object.console.js#97436E
support.type.object.console.jsx#A24877
support.type.object.console.ts#ad4d7f
support.type.object.console.tsx#ad4d7f
support.function.console.js#8b2442
support.function.console.jsx#9D294B
support.function.console.ts#82223E
support.function.console.tsx#791F39
punctuation.definition.block.js#415C5B
punctuation.definition.block.jsx#466261
punctuation.definition.block.ts#4F6F6E
punctuation.definition.block.tsx#4B6867
storage.type#ad4d7f
constant.other#8b2442
variable.other.object.js#942646
variable.other.object.jsx#8b2442
variable.other.object.ts#8b2442
variable.other.object.tsx#8b2442
markup.quote#82223E
meta.import.js#8b2442
meta.import.jsx#8b2442
meta.import.ts#8b2442
meta.import.tsx#791F39
meta.tag.js#942646
meta.tag.jsx#8b2442
meta.tag.ts#8b2442
meta.tag.tsx#8b2442
string.quoted.single.js#ad4d7f
string.quoted.single.jsx#B45687
string.quoted.single.ts#ad4d7f
string.quoted.single.tsx#97436E
meta.object-literal.key.js#497195
meta.object-literal.key.jsx#5F8AB0
meta.object-literal.key.ts#5482ab
meta.object-literal.key.tsx#497195
string.template#466261
entity.name.function.method#B9628F
support.type.property-name.json#7e1b24
variable.other.property.js#5482ab
variable.other.property.jsx#5482ab
variable.other.property.ts#6A92B6
variable.other.property.tsx#4F7AA0
markup.italic#8E1F29
meta.template.expression.js#4B6867
meta.template.expression.jsx#466261
meta.template.expression.ts#466261
meta.template.expression.tsx#4B6867
punctuation.separator.parameter.js#415C5B
punctuation.separator.parameter.jsx#3D5554
punctuation.separator.parameter.ts#466261
punctuation.separator.parameter.tsx#466261
meta.parameters.js#4F7AA0
meta.parameters.jsx#5F8AB0
meta.parameters.ts#5482ab
meta.parameters.tsx#4F7AA0
constant.character#8b2442
comment#791F39
keyword#6A92B6
markup.italic#97436E
comment.block.documentation#466261
comment.line.double-slash#466261
punctuation.accessor.js#A24877
punctuation.accessor.jsx#B9628F
punctuation.accessor.ts#A24877
punctuation.accessor.tsx#B45687
punctuation.definition.parameters.begin.js#B45687
punctuation.definition.parameters.begin.jsx#ad4d7f
punctuation.definition.parameters.begin.ts#ad4d7f
punctuation.definition.parameters.begin.tsx#ad4d7f
punctuation.definition.parameters.end.js#ad4d7f
punctuation.definition.parameters.end.jsx#97436E
punctuation.definition.parameters.end.ts#B9628F
punctuation.definition.parameters.end.tsx#ad4d7f
constant.language.boolean#ad4d7f
punctuation.separator.key-value.js#8E1F29
punctuation.separator.key-value.jsx#6E171F
punctuation.separator.key-value.ts#6E171F
punctuation.separator.key-value.tsx#7e1b24
storage.modifier.async.js#ad4d7f
storage.modifier.async.jsx#ad4d7f
storage.modifier.async.ts#ad4d7f
storage.modifier.async.tsx#A24877
meta.brace.round.js#415C5B
meta.brace.round.jsx#466261
meta.brace.round.ts#3D5554
meta.brace.round.tsx#466261
entity.other.inherited-class#6E171F
support.class.builtin.js#466261
support.class.builtin.jsx#4F6F6E
support.class.builtin.ts#4F6F6E
support.class.builtin.tsx#466261
meta.tag.attributes.js#8E1F29
meta.tag.attributes.jsx#8E1F29
meta.tag.attributes.ts#7e1b24
meta.tag.attributes.tsx#861D26
keyword.control.module.js#ad4d7f
keyword.control.module.jsx#ad4d7f
keyword.control.module.ts#ad4d7f
keyword.control.module.tsx#A24877
keyword.operator.accessor#466261
invalid#4F7AA0underline
constant.numeric#466261
meta.var.expr.js#415C5B
meta.var.expr.jsx#415C5B
meta.var.expr.ts#466261
meta.var.expr.tsx#466261
keyword.control.import.js#466261
keyword.control.import.jsx#466261
keyword.control.import.ts#4F6F6E
keyword.control.import.tsx#466261
keyword.control.from.js#8E1F29
keyword.control.from.jsx#7e1b24
keyword.control.from.ts#761922
keyword.control.from.tsx#7e1b24
keyword.control.export.js#861D26
keyword.control.export.jsx#7e1b24
keyword.control.export.ts#7e1b24
keyword.control.export.tsx#7e1b24
keyword.control.default.js#6A92B6
keyword.control.default.jsx#5482ab
keyword.control.default.ts#5482ab
keyword.control.default.tsx#5482ab
support.type.object.module.js#466261
support.type.object.module.jsx#466261
support.type.object.module.ts#466261
support.type.object.module.tsx#466261

Shiki preview

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

Loading...