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#8c9696
  • editor.background#f7f2f2
  • editor.lineHighlightBackground#aebabe39
  • editor.selectionBackground#F8E2E2E0
  • editorBracketMatch.background#00AFD6f3
  • editorBracketMatch.border#314269
  • editorGroupHeader.tabsBackground#EBDEDE
  • editorGutter.background#f7f2f2
  • editorLineNumber.foreground#788484
  • scrollbarSlider.background#8c9696
  • scrollbarSlider.hoverBackground#788484
  • sideBar.background#cfd1bf
  • statusBar.background#6F7A7A
  • tab.activeBackground#f7f2f2
  • tab.activeForeground#7B7324
  • tab.border#f7f2f2
  • tab.inactiveBackground#6F7A7A
  • tab.inactiveForeground#f7f2f2

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.parameters.begin.js#b68aa9
punctuation.definition.parameters.begin.jsx#b68aa9
punctuation.definition.parameters.begin.ts#b68aa9
punctuation.definition.parameters.begin.tsx#b68aa9
punctuation.definition.parameters.end.js#b68aa9
punctuation.definition.parameters.end.jsx#b68aa9
punctuation.definition.parameters.end.ts#b68aa9
punctuation.definition.parameters.end.tsx#9E648D
punctuation.definition.parameters.end.js#b68aa9
punctuation.definition.parameters.end.jsx#b68aa9
punctuation.definition.parameters.end.ts#b68aa9
punctuation.definition.parameters.end.tsx#b68aa9
markup.quote#b68aa9
meta.tag.js#AE7DA0
meta.tag.jsx#b68aa9
meta.tag.ts#b68aa9
meta.tag.tsx#A67096
meta.parameters.js#AE7DA0
meta.parameters.jsx#BE97B2
meta.parameters.ts#b68aa9
meta.parameters.tsx#b68aa9
meta.brace.square.js#A67096
meta.brace.square.jsx#C6A4BC
meta.brace.square.ts#BE97B2
meta.brace.square.tsx#BE97B2
variable.other.class.js#b68aa9
variable.other.class.jsx#b68aa9
variable.other.class.ts#AE7DA0
variable.other.class.tsx#BE97B2
constant.other.object.key.js#CEB0C5
constant.other.object.key.jsx#C6A4BC
constant.other.object.key.ts#C6A4BC
constant.other.object.key.tsx#b68aa9
entity.name.function.method#BE97B2
string.template#b68aa9
support.type.property-name.json#b68aa9
variable.other.property.js#b68aa9
variable.other.property.jsx#BE97B2
variable.other.property.ts#AE7DA0
variable.other.property.tsx#b68aa9
punctuation.separator.key-value.js#8D832A
punctuation.separator.key-value.jsx#847b27
punctuation.separator.key-value.ts#847b27
punctuation.separator.key-value.tsx#7B7324
storage.modifier.async.js#847b27
storage.modifier.async.jsx#7B7324
storage.modifier.async.ts#847b27
storage.modifier.async.tsx#847b27
meta.brace.round.js#6A631F
meta.brace.round.jsx#958B2C
meta.brace.round.ts#7B7324
meta.brace.round.tsx#7B7324
entity.other.inherited-class#7B7324
support.class.builtin.js#847b27
support.class.builtin.jsx#7B7324
support.class.builtin.ts#847b27
support.class.builtin.tsx#847b27
meta.tag.attributes.js#847b27
meta.tag.attributes.jsx#8D832A
meta.tag.attributes.ts#847b27
meta.tag.attributes.tsx#847b27
keyword.control.module.js#7B7324
keyword.control.module.jsx#736B22
keyword.control.module.ts#847b27
keyword.control.module.tsx#847b27
keyword.operator.accessor#847b27
invalid#847b27underline
constant.numeric#7B7324
keyword#847b27
meta.var.expr.js#847b27
meta.var.expr.jsx#847b27
meta.var.expr.ts#7B7324
meta.var.expr.tsx#847b27
keyword.control.import.js#958B2C
keyword.control.import.jsx#847b27
keyword.control.import.ts#847b27
keyword.control.import.tsx#847b27
keyword.control.from.js#847b27
keyword.control.from.jsx#6A631F
keyword.control.from.ts#7B7324
keyword.control.from.tsx#847b27
keyword.control.export.js#7B7324
keyword.control.export.jsx#847b27
keyword.control.export.ts#847b27
keyword.control.export.tsx#847b27
keyword.control.default.js#7B7324
keyword.control.default.jsx#8D832A
keyword.control.default.ts#847b27
keyword.control.default.tsx#847b27
support.type.object.module.js#9E932F
support.type.object.module.jsx#847b27
support.type.object.module.ts#8D832A
support.type.object.module.tsx#847b27
entity.name.tag#823326underline
markup.italic#8b3729
punctuation.accessor.js#8b3729
punctuation.accessor.jsx#823326
punctuation.accessor.ts#702C21
punctuation.accessor.tsx#9D3E2E
source.js#823326
source.jsx#8b3729
source.ts#823326
source.tsx#8b3729
storage.modifier.js#8b3729
storage.modifier.jsx#823326
storage.modifier.ts#8b3729
storage.modifier.tsx#823326
storage.type#943B2C
string.quoted.single.js#8b3729
string.quoted.single.jsx#943B2C
string.quoted.single.ts#823326
string.quoted.single.tsx#8b3729
support.function.dom.js#823326
support.function.dom.jsx#8b3729
support.function.dom.ts#A64231
support.function.dom.tsx#823326
support.variable.property.js#8b3729
support.variable.property.jsx#8b3729
support.variable.property.ts#702C21
support.variable.property.tsx#8b3729
variable.language.constructor#8b3729underline
variable.language.this#8b3729
support.constant#d66d22
punctuation.separator.parameter.js#C86620
punctuation.separator.parameter.jsx#AC581B
punctuation.separator.parameter.ts#d66d22
punctuation.separator.parameter.tsx#d66d22
constant.character#d66d22
constant.language#d66d22
constant.other#d66d22
comment#d66d22
markup.italic#d66d22
meta.object-literal.key.js#d66d22
meta.object-literal.key.jsx#C86620
meta.object-literal.key.ts#d66d22
meta.object-literal.key.tsx#d66d22
comment.block.documentation#C86620
comment.line.double-slash#d66d22
punctuation.accessor.js#AC581B
punctuation.accessor.jsx#C86620
punctuation.accessor.ts#d66d22
punctuation.accessor.tsx#AC581B
variable.language#d66d22
variable.other.object.js#E07E39
variable.other.object.jsx#d66d22
variable.other.object.ts#E07E39
variable.other.object.tsx#d66d22
variable.other.readwrite#C86620
variable.other.readwrite.js#d66d22
variable.other.readwrite.jsx#C86620
variable.other.readwrite.ts#d66d22
variable.other.readwrite.tsx#C86620
variable.parameter#384c79
support.function#3C5181
meta.import.js#384c79
meta.import.jsx#3F5689
meta.import.ts#344771
meta.import.tsx#2D3D61
meta.paragraph.markdown#384c79
entity.other.attribute-name.js#435B91
entity.other.attribute-name.jsx#384c79
entity.other.attribute-name.ts#3C5181
entity.other.attribute-name.tsx#384c79
string.quoted.single.js#2D3D61
string.quoted.single.jsx#344771
string.quoted.single.ts#384c79
string.quoted.single.tsx#314269
string.quoted.single.json#435B91
support.class.promise.js#384c79
support.class.promise.jsx#435B91
support.class.promise.ts#314269
support.class.promise.tsx#3C5181
support.type.object.console.js#384c79
support.type.object.console.jsx#3C5181
support.type.object.console.ts#384c79
support.type.object.console.tsx#384c79
support.function.console.js#384c79
support.function.console.jsx#435B91
support.function.console.ts#2D3D61
support.function.console.tsx#435B91
punctuation.definition.block.js#384c79
punctuation.definition.block.jsx#435B91
punctuation.definition.block.ts#314269
punctuation.definition.block.tsx#384c79
constant.language.boolean#00AFD6f3
constant.language.null.js#00AFD6F2
constant.language.null.jsx#00AFD6f3
constant.language.null.ts#00AFD6F2
constant.language.null.tsx#00AFD6F2
entity.name.class#00AFD6F2underline
entity.name.function#00AFD6F2underline
entity.name.type#00AFD6C0underline
markup.heading.markdown#00AFD6AC
punctuation.separator.comma.js#00AFD6F2
punctuation.separator.comma.jsx#00AFD6F2
punctuation.separator.comma.ts#00AFD6F2
punctuation.separator.comma.tsx#00AFD6F2
support.variable.property.js#00AFD6f3
support.variable.property.jsx#00AFD6D4
support.variable.property.ts#00AFD6F2
support.variable.property.tsx#00AFD6D4
support.type.primitive.js#00AFD6F2
support.type.primitive.jsx#00AFD6F2
support.type.primitive.ts#00AFD6f3
support.type.primitive.tsx#00AFD6F2
variable#00AFD6f3

Shiki preview

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

Loading...