Skip to main content
CodingTheme

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#a7c2f266
  • 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...

ZeppelinImmigrantSong by selfrefactor - VS Code Theme