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#d4d0b8
  • editor.background#d8d5c9
  • editor.lineHighlightBackground#C7C1A28a
  • editor.selectionBackground#b1e4d5
  • editorBracketMatch.background#903360
  • editorBracketMatch.border#7A1A27
  • editorGroupHeader.tabsBackground#D0CDBE
  • editorGutter.background#d8d5c9
  • editorLineNumber.foreground#C7C1A2
  • scrollbarSlider.background#d4d0b8
  • scrollbarSlider.hoverBackground#C7C1A2
  • sideBar.background#CDC9AD
  • statusBar.background#C0BA97
  • tab.activeBackground#d8d5c9
  • tab.activeForeground#AE592E
  • tab.border#d8d5c9
  • tab.inactiveBackground#C0BA97
  • tab.inactiveForeground#C66534

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#227798
punctuation.definition.template-expression.begin.js#2788AD
punctuation.definition.template-expression.begin.jsx#247d9f
punctuation.definition.template-expression.begin.ts#247d9f
punctuation.definition.template-expression.begin.tsx#227798
punctuation.definition.template-expression.end.js#247d9f
punctuation.definition.template-expression.end.jsx#2788AD
punctuation.definition.template-expression.end.ts#247d9f
punctuation.definition.template-expression.end.tsx#247d9f
entity.name.tag#227798underline
punctuation.accessor.js#247d9f
punctuation.accessor.jsx#2683A6
punctuation.accessor.ts#247d9f
punctuation.accessor.tsx#2788AD
source.js#247d9f
source.jsx#247d9f
source.ts#2683A6
source.tsx#247d9f
source.css#2683A6
source.scss#227798
storage.modifier.js#247d9f
storage.modifier.jsx#247d9f
storage.modifier.ts#227798
storage.modifier.tsx#2788AD
string.quoted.single.js#227798
string.quoted.single.jsx#227798
string.quoted.single.ts#217291
string.quoted.single.tsx#217291
support.function.dom.js#227798
support.function.dom.jsx#217291
support.function.dom.ts#2683A6
support.function.dom.tsx#247d9f
support.variable.property.js#247d9f
support.variable.property.jsx#2683A6
support.variable.property.ts#247d9f
support.variable.property.tsx#227798
variable.language.constructor#2683A6underline
variable.language.this#217291
meta.selector.css#C66534
constant.language.null.js#AE592E
constant.language.null.jsx#C66534
constant.language.null.ts#AE592E
constant.language.null.tsx#C66534
entity.name.class#b65d30underline
entity.name.function#A6552Cunderline
markup.heading.markdown#AE592E
punctuation.separator.comma.js#C66534
punctuation.separator.comma.jsx#BE6132
punctuation.separator.comma.ts#b65d30
punctuation.separator.comma.tsx#BE6132
support.variable.property.js#AE592E
support.variable.property.jsx#BE6132
support.variable.property.ts#BE6132
support.variable.property.tsx#C66534
support.type.primitive.js#b65d30
support.type.primitive.jsx#b65d30
support.type.primitive.ts#BE6132
support.type.primitive.tsx#AE592E
meta.brace.square.js#b65d30
meta.brace.square.jsx#BE6132
meta.brace.square.ts#b65d30
meta.brace.square.tsx#b65d30
variable.other.class.js#A6552C
variable.other.class.jsx#b65d30
variable.other.class.ts#BE6132
variable.other.class.tsx#b65d30
constant.other.object.key.js#AE592E
constant.other.object.key.jsx#b65d30
constant.other.object.key.ts#b65d30
constant.other.object.key.tsx#C66534
variable.language#3F735F
constant.language#3c6e5b
entity.name.type#3c6e5bunderline
variable.parameter#3c6e5b
support.function#3c6e5b
source.json#417863
meta.object-literal.key.js#396957
meta.object-literal.key.jsx#417863
meta.object-literal.key.ts#417863
meta.object-literal.key.tsx#417863
variable.other.constant.js#376453
variable.other.constant.jsx#3F735F
variable.other.constant.ts#3c6e5b
variable.other.constant.tsx#3c6e5b
meta.paragraph.markdown#376453
entity.other.attribute-name.js#3F735F
entity.other.attribute-name.jsx#3c6e5b
entity.other.attribute-name.ts#376453
entity.other.attribute-name.tsx#376453
string.quoted.single.json#3c6e5b
support.class.promise.js#3c6e5b
support.class.promise.jsx#376453
support.class.promise.ts#3c6e5b
support.class.promise.tsx#3c6e5b
support.type.object.console.js#417863
support.type.object.console.jsx#396957
support.type.object.console.ts#3F735F
support.type.object.console.tsx#3c6e5b
support.function.console.js#3c6e5b
support.function.console.jsx#376453
support.function.console.ts#3F735F
support.function.console.tsx#3c6e5b
punctuation.definition.block.js#3c6e5b
punctuation.definition.block.jsx#3c6e5b
punctuation.definition.block.ts#3c6e5b
punctuation.definition.block.tsx#376453
storage.type#572157
constant.other#532053
variable.other.object.js#4F1E4F
variable.other.object.jsx#4F1E4F
variable.other.object.ts#4F1E4F
variable.other.object.tsx#572157
markup.quote#5B225B
meta.import.js#4F1E4F
meta.import.jsx#572157
meta.import.ts#5B225B
meta.import.tsx#572157
meta.tag.js#532053
meta.tag.jsx#5B225B
meta.tag.ts#532053
meta.tag.tsx#572157
string.quoted.single.js#572157
string.quoted.single.jsx#5F245F
string.quoted.single.ts#572157
string.quoted.single.tsx#4F1E4F
meta.object-literal.key.js#572157
meta.object-literal.key.jsx#5F245F
meta.object-literal.key.ts#572157
meta.object-literal.key.tsx#572157
string.template#572157
entity.name.function.method#572157
support.type.property-name.json#572157
variable.other.property.js#572157
variable.other.property.jsx#572157
variable.other.property.ts#572157
variable.other.property.tsx#5F245F
markup.italic#861d2b
meta.template.expression.js#861d2b
meta.template.expression.jsx#8C1E2D
meta.template.expression.ts#801C29
meta.template.expression.tsx#861d2b
punctuation.separator.parameter.js#861d2b
punctuation.separator.parameter.jsx#861d2b
punctuation.separator.parameter.ts#7A1A27
punctuation.separator.parameter.tsx#861d2b
meta.parameters.js#8C1E2D
meta.parameters.jsx#8C1E2D
meta.parameters.ts#7A1A27
meta.parameters.tsx#861d2b
constant.character#861d2b
comment#801C29
keyword#861d2b
markup.italic#7A1A27
comment.block.documentation#861d2b
comment.line.double-slash#92202F
punctuation.accessor.js#801C29
punctuation.accessor.jsx#801C29
punctuation.accessor.ts#861d2b
punctuation.accessor.tsx#861d2b
punctuation.definition.parameters.begin.js#9e386a
punctuation.definition.parameters.begin.jsx#9e386a
punctuation.definition.parameters.begin.ts#A53B6F
punctuation.definition.parameters.begin.tsx#A53B6F
punctuation.definition.parameters.end.js#AC3D74
punctuation.definition.parameters.end.jsx#9e386a
punctuation.definition.parameters.end.ts#9e386a
punctuation.definition.parameters.end.tsx#AC3D74
constant.language.boolean#9e386a
punctuation.separator.key-value.js#9e386a
punctuation.separator.key-value.jsx#9e386a
punctuation.separator.key-value.ts#9e386a
punctuation.separator.key-value.tsx#9e386a
storage.modifier.async.js#9e386a
storage.modifier.async.jsx#A53B6F
storage.modifier.async.ts#9e386a
storage.modifier.async.tsx#973565
meta.brace.round.js#A53B6F
meta.brace.round.jsx#AC3D74
meta.brace.round.ts#903360
meta.brace.round.tsx#973565
entity.other.inherited-class#9e386a
support.class.builtin.js#AC3D74
support.class.builtin.jsx#9e386a
support.class.builtin.ts#9e386a
support.class.builtin.tsx#903360
meta.tag.attributes.js#903360
meta.tag.attributes.jsx#9e386a
meta.tag.attributes.ts#973565
meta.tag.attributes.tsx#9e386a
keyword.control.module.js#A53B6F
keyword.control.module.jsx#AC3D74
keyword.control.module.ts#973565
keyword.control.module.tsx#9e386a
keyword.operator.accessor#A53B6F
invalid#9e386aunderline
constant.numeric#9e386a
meta.var.expr.js#AC3D74
meta.var.expr.jsx#AC3D74
meta.var.expr.ts#9e386a
meta.var.expr.tsx#9e386a
keyword.control.import.js#9e386a
keyword.control.import.jsx#AC3D74
keyword.control.import.ts#973565
keyword.control.import.tsx#9e386a
keyword.control.from.js#9e386a
keyword.control.from.jsx#9e386a
keyword.control.from.ts#9e386a
keyword.control.from.tsx#9e386a
keyword.control.export.js#9e386a
keyword.control.export.jsx#AC3D74
keyword.control.export.ts#9e386a
keyword.control.export.tsx#9e386a
keyword.control.default.js#9e386a
keyword.control.default.jsx#9e386a
keyword.control.default.ts#9e386a
keyword.control.default.tsx#9e386a
support.type.object.module.js#9e386a
support.type.object.module.jsx#AC3D74
support.type.object.module.ts#A53B6F
support.type.object.module.tsx#9e386a

Shiki preview

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

Loading...