Skip to main content
Coding Theme

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#C4BE9D
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#ede8e1
  • editor.lineHighlightBackground#b7bcbf25
  • editor.selectionBackground#b7bcbf55
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#b7bcbf
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#b7bcbf
  • scrollbarSlider.hoverBackground#C4BE9D
  • sideBar.background#b7bcbf
  • statusBar.background#b7bcbf
  • tab.activeBackground#ede8e1
  • tab.activeForeground#35495f
  • tab.inactiveBackground#b7bcbf
  • tab.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.character#83305B
constant.language.boolean#83305B
entity.name.tag#83305Bunderline
keyword#8F3463
markup.italic#89325f
entity.name.function.method#8F3463
string.quoted.single.js#8F3463
string.quoted.single.jsx#89325f
string.quoted.single.ts#83305B
string.quoted.single.tsx#83305B
support.type.property-name.json#89325f
punctuation.accessor.js#89325f
punctuation.accessor.jsx#953668
punctuation.accessor.ts#89325f
punctuation.accessor.tsx#772B52
punctuation.separator.key-value.js#83305B
punctuation.separator.key-value.jsx#772B52
punctuation.separator.key-value.ts#89325f
punctuation.separator.key-value.tsx#89325f
constant.numeric#89325f
meta.brace.square.js#772B52
meta.brace.square.jsx#89325f
meta.brace.square.ts#953668
meta.brace.square.tsx#89325f
meta.var.expr.js#772B52
meta.var.expr.jsx#89325f
meta.var.expr.ts#89325f
meta.var.expr.tsx#772B52
storage.modifier.js#7D2D56
storage.modifier.jsx#8F3463
storage.modifier.ts#8F3463
storage.modifier.tsx#9B396C
storage.type#772B52
string.template#8F3463
support.constant#83305B
support.function.dom.js#89325f
support.function.dom.jsx#89325f
support.function.dom.ts#89325f
support.function.dom.tsx#89325f
support.variable.property.js#89325f
support.variable.property.jsx#8F3463
support.variable.property.ts#89325f
support.variable.property.tsx#89325f
variable.language.constructor#89325funderline
variable.language.this#89325f
meta.tag.js#8F3463
meta.tag.jsx#83305B
meta.tag.ts#89325f
meta.tag.tsx#89325f
support.type.object.module.js#89325f
support.type.object.module.jsx#89325f
support.type.object.module.ts#89325f
support.type.object.module.tsx#772B52
punctuation.definition.parameters.begin.js#8F3463
punctuation.definition.parameters.begin.jsx#7D2D56
punctuation.definition.parameters.begin.ts#8F3463
punctuation.definition.parameters.begin.tsx#89325f
punctuation.definition.parameters.end.js#953668
punctuation.definition.parameters.end.jsx#89325f
punctuation.definition.parameters.end.ts#83305B
punctuation.definition.parameters.end.tsx#89325f
punctuation.definition.parameters.end.js#83305B
punctuation.definition.parameters.end.jsx#83305B
punctuation.definition.parameters.end.ts#7D2D56
punctuation.definition.parameters.end.tsx#89325f
markup.quote#953668
entity.other.attribute-name.js#89325f
entity.other.attribute-name.jsx#89325f
entity.other.attribute-name.ts#7D2D56
entity.other.attribute-name.tsx#89325f
comment#b56e30
constant.language#b56e30
constant.other#b56e30
keyword.control.flow.js#b56e30
keyword.control.flow.jsx#b56e30
keyword.control.flow.ts#9D5F2A
keyword.control.flow.tsx#b56e30
keyword.control.module.js#9D5F2A
keyword.control.module.jsx#b56e30
keyword.control.module.ts#b56e30
keyword.control.module.tsx#b56e30
keyword.operator.accessor#A5642C
markup.italic#b56e30
meta.import.js#b56e30
meta.import.jsx#AD692E
meta.import.ts#b56e30
meta.import.tsx#b56e30
meta.object-literal.key.js#b56e30
meta.object-literal.key.jsx#CB7D39
meta.object-literal.key.ts#b56e30
meta.object-literal.key.tsx#b56e30
meta.paragraph.markdown#BD7332
punctuation.definition.block.js#b56e30
punctuation.definition.block.jsx#BD7332
punctuation.definition.block.ts#BD7332
punctuation.definition.block.tsx#b56e30
punctuation.separator.parameter.js#b56e30
punctuation.separator.parameter.jsx#b56e30
punctuation.separator.parameter.ts#b56e30
punctuation.separator.parameter.tsx#BD7332
string.quoted.single.js#A5642C
string.quoted.single.jsx#BD7332
string.quoted.single.ts#C57834
string.quoted.single.tsx#AD692E
string.quoted.single.json#AD692E
support.class.promise.js#b56e30
support.class.promise.jsx#b56e30
support.class.promise.ts#b56e30
support.class.promise.tsx#BD7332
support.function#b56e30
keyword.control.import.js#C57834
keyword.control.import.jsx#b56e30
keyword.control.import.ts#A5642C
keyword.control.import.tsx#b56e30
keyword.control.from.js#AD692E
keyword.control.from.jsx#AD692E
keyword.control.from.ts#b56e30
keyword.control.from.tsx#BD7332
keyword.control.export.js#b56e30
keyword.control.export.jsx#b56e30
keyword.control.export.ts#b56e30
keyword.control.export.tsx#b56e30
keyword.control.default.js#b56e30
keyword.control.default.jsx#9D5F2A
keyword.control.default.ts#b56e30
keyword.control.default.tsx#b56e30
entity.name.class#AD692Eunderline
support.function.console.js#9D5F2A
support.function.console.jsx#b56e30
support.function.console.ts#C57834
support.function.console.tsx#BD7332
variable.language#b56e30
invalid#A5642Cunderline
support.type.object.console.js#b56e30
support.type.object.console.jsx#b56e30
support.type.object.console.ts#BD7332
support.type.object.console.tsx#b56e30
variable.parameter#b56e30
comment.block.documentation#3C787C
comment.line.double-slash#336568
constant.language.null.js#376F72
constant.language.null.jsx#356a6d
constant.language.null.ts#356a6d
constant.language.null.tsx#336568
entity.name.type#336568
meta.parameters.js#336568
meta.parameters.jsx#356a6d
meta.parameters.ts#356a6d
meta.parameters.tsx#356a6d
variable.other.class.js#356a6d
variable.other.class.jsx#356a6d
variable.other.class.ts#336568
variable.other.class.tsx#336568
constant.other.object.key.js#356a6d
constant.other.object.key.jsx#356a6d
constant.other.object.key.ts#336568
constant.other.object.key.tsx#376F72
entity.other.inherited-class#376F72
markup.heading.markdown#3C787C
meta.brace.round.js#356a6d
meta.brace.round.jsx#376F72
meta.brace.round.ts#356a6d
meta.brace.round.tsx#306063
entity.name.function#376F72underline
meta.tag.attributes.js#306063
meta.tag.attributes.jsx#356a6d
meta.tag.attributes.ts#336568
meta.tag.attributes.tsx#356a6d
punctuation.accessor.js#356a6d
punctuation.accessor.jsx#306063
punctuation.accessor.ts#306063
punctuation.accessor.tsx#2E5C5E
punctuation.separator.comma.js#336568
punctuation.separator.comma.jsx#356a6d
punctuation.separator.comma.ts#356a6d
punctuation.separator.comma.tsx#356a6d
source.js#336568
source.jsx#356a6d
source.ts#2E5C5E
source.tsx#2E5C5E
variable.other.property.js#356a6d
variable.other.property.jsx#3C787C
variable.other.property.ts#356a6d
variable.other.property.tsx#356a6d
storage.modifier.async.js#356a6d
storage.modifier.async.jsx#356a6d
storage.modifier.async.ts#336568
storage.modifier.async.tsx#336568
support.class.builtin.js#356a6d
support.class.builtin.jsx#356a6d
support.class.builtin.ts#336568
support.class.builtin.tsx#356a6d
support.type.primitive.js#376F72
support.type.primitive.jsx#2E5C5E
support.type.primitive.ts#356a6d
support.type.primitive.tsx#306063
support.variable.property.js#356a6d
support.variable.property.jsx#336568
support.variable.property.ts#376F72
support.variable.property.tsx#356a6d
variable#306063
variable.other.object.js#306063
variable.other.object.jsx#356a6d
variable.other.object.ts#336568
variable.other.object.tsx#356a6d
variable.other.readwrite#336568
variable.other.readwrite.js#306063
variable.other.readwrite.jsx#356a6d
variable.other.readwrite.ts#356a6d
variable.other.readwrite.tsx#356a6d
CircusPeople by selfrefactor - VS Code Theme