Skip to main content
Coding Theme

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#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—