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#FAF8F3
  • editor.lineHighlightBackground#bdc3c725
  • editor.selectionBackground#bdc3c755
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#bdc3c7
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#bdc3c7
  • scrollbarSlider.hoverBackground#C4BE9D
  • sideBar.background#bdc3c7
  • statusBar.background#bdc3c7
  • tab.activeBackground#FAF8F3
  • tab.activeForeground#35495f
  • tab.inactiveBackground#bdc3c7
  • tab.inactiveForeground#fff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#2b8fb3
punctuation.separator.parameter.js#2b8fb3
punctuation.separator.parameter.jsx#257C9B
punctuation.separator.parameter.ts#257C9B
punctuation.separator.parameter.tsx#2b8fb3
constant.character#2b8fb3
constant.language#2b8fb3
constant.other#2b8fb3
comment#2b8fb3
markup.italic#2989AB
meta.object-literal.key.js#2989AB
meta.object-literal.key.jsx#2b8fb3
meta.object-literal.key.ts#2989AB
meta.object-literal.key.tsx#2D95BB
comment.block.documentation#2b8fb3
comment.line.double-slash#2b8fb3
punctuation.accessor.js#2D95BB
punctuation.accessor.jsx#2F9CC3
punctuation.accessor.ts#2b8fb3
punctuation.accessor.tsx#2b8fb3
variable.language#2989AB
variable.other.object.js#2b8fb3
variable.other.object.jsx#2b8fb3
variable.other.object.ts#2b8fb3
variable.other.object.tsx#2b8fb3
variable.other.readwrite#2782A3
variable.other.readwrite.js#2b8fb3
variable.other.readwrite.jsx#2b8fb3
variable.other.readwrite.ts#2b8fb3
variable.other.readwrite.tsx#2b8fb3
punctuation.separator.key-value.js#994D2A
punctuation.separator.key-value.jsx#a0512c
punctuation.separator.key-value.ts#A7552E
punctuation.separator.key-value.tsx#A7552E
storage.modifier.async.js#8A4626
storage.modifier.async.jsx#994D2A
storage.modifier.async.ts#a0512c
storage.modifier.async.tsx#a0512c
meta.brace.round.js#a0512c
meta.brace.round.jsx#a0512c
meta.brace.round.ts#B65C32
meta.brace.round.tsx#924A28
entity.other.inherited-class#924A28
support.class.builtin.js#A7552E
support.class.builtin.jsx#a0512c
support.class.builtin.ts#994D2A
support.class.builtin.tsx#a0512c
meta.tag.attributes.js#994D2A
meta.tag.attributes.jsx#A7552E
meta.tag.attributes.ts#994D2A
meta.tag.attributes.tsx#a0512c
keyword.control.module.js#a0512c
keyword.control.module.jsx#a0512c
keyword.control.module.ts#A7552E
keyword.control.module.tsx#a0512c
keyword.operator.accessor#a0512c
invalid#a0512cunderline
constant.numeric#a0512c
keyword#a0512c
meta.var.expr.js#a0512c
meta.var.expr.jsx#A7552E
meta.var.expr.ts#A7552E
meta.var.expr.tsx#994D2A
keyword.control.import.js#B65C32
keyword.control.import.jsx#994D2A
keyword.control.import.ts#B65C32
keyword.control.import.tsx#a0512c
keyword.control.from.js#a0512c
keyword.control.from.jsx#994D2A
keyword.control.from.ts#AE5830
keyword.control.from.tsx#A7552E
keyword.control.export.js#994D2A
keyword.control.export.jsx#8A4626
keyword.control.export.ts#a0512c
keyword.control.export.tsx#B65C32
keyword.control.default.js#a0512c
keyword.control.default.jsx#A7552E
keyword.control.default.ts#B65C32
keyword.control.default.tsx#a0512c
support.type.object.module.js#924A28
support.type.object.module.jsx#994D2A
support.type.object.module.ts#a0512c
support.type.object.module.tsx#994D2A
punctuation.definition.parameters.begin.js#BD2E63
punctuation.definition.parameters.begin.jsx#A32856
punctuation.definition.parameters.begin.ts#BD2E63
punctuation.definition.parameters.begin.tsx#B42C5F
punctuation.definition.parameters.end.js#BD2E63
punctuation.definition.parameters.end.jsx#BD2E63
punctuation.definition.parameters.end.ts#C63067
punctuation.definition.parameters.end.tsx#BD2E63
punctuation.definition.parameters.end.js#CD336C
punctuation.definition.parameters.end.jsx#BD2E63
punctuation.definition.parameters.end.ts#BD2E63
punctuation.definition.parameters.end.tsx#B42C5F
markup.quote#A32856
meta.tag.js#C63067
meta.tag.jsx#CD336C
meta.tag.ts#AC2A5A
meta.tag.tsx#CD336C
meta.parameters.js#BD2E63
meta.parameters.jsx#C63067
meta.parameters.ts#B42C5F
meta.parameters.tsx#BD2E63
meta.brace.square.js#B42C5F
meta.brace.square.jsx#BD2E63
meta.brace.square.ts#BD2E63
meta.brace.square.tsx#BD2E63
variable.other.class.js#CF3B72
variable.other.class.jsx#B42C5F
variable.other.class.ts#AC2A5A
variable.other.class.tsx#BD2E63
constant.other.object.key.js#BD2E63
constant.other.object.key.jsx#CF3B72
constant.other.object.key.ts#BD2E63
constant.other.object.key.tsx#BD2E63
entity.name.function.method#A32856
string.template#BD2E63
support.type.property-name.json#A32856
variable.other.property.js#BD2E63
variable.other.property.jsx#CD336C
variable.other.property.ts#CF3B72
variable.other.property.tsx#BD2E63
entity.name.tag#F2680Funderline
markup.italic#E9630D
punctuation.accessor.js#DF5F0C
punctuation.accessor.jsx#E9630D
punctuation.accessor.ts#DF5F0C
punctuation.accessor.tsx#CA560B
source.js#E9630D
source.jsx#E9630D
source.ts#E9630D
source.tsx#E9630D
storage.modifier.js#E9630D
storage.modifier.jsx#E9630D
storage.modifier.ts#DF5F0C
storage.modifier.tsx#E9630D
storage.type#F37524
string.quoted.single.js#DF5F0C
string.quoted.single.jsx#D45A0C
string.quoted.single.ts#E9630D
string.quoted.single.tsx#E9630D
support.function.dom.js#F37524
support.function.dom.jsx#E9630D
support.function.dom.ts#F26E1A
support.function.dom.tsx#DF5F0C
support.variable.property.js#F2680F
support.variable.property.jsx#E9630D
support.variable.property.ts#E9630D
support.variable.property.tsx#F26E1A
variable.language.constructor#E9630Dunderline
variable.language.this#CA560B
constant.language.boolean#57914C
constant.language.null.js#508546
constant.language.null.jsx#508546
constant.language.null.ts#45733D
constant.language.null.tsx#508546
entity.name.class#508546underline
entity.name.function#4C7F43underline
entity.name.type#4C7F43underline
markup.heading.markdown#4C7F43
punctuation.separator.comma.js#4C7F43
punctuation.separator.comma.jsx#508546
punctuation.separator.comma.ts#57914C
punctuation.separator.comma.tsx#45733D
support.variable.property.js#508546
support.variable.property.jsx#508546
support.variable.property.ts#508546
support.variable.property.tsx#508546
support.type.primitive.js#508546
support.type.primitive.jsx#508546
support.type.primitive.ts#57914C
support.type.primitive.tsx#508546
variable#508546
variable.parameter#820D4B
support.function#820D4B
meta.import.js#880e4f
meta.import.jsx#820D4B
meta.import.ts#880e4f
meta.import.tsx#880e4f
meta.paragraph.markdown#880e4f
entity.other.attribute-name.js#880e4f
entity.other.attribute-name.jsx#880e4f
entity.other.attribute-name.ts#9A105A
entity.other.attribute-name.tsx#880e4f
string.quoted.single.js#7C0D48
string.quoted.single.jsx#880e4f
string.quoted.single.ts#820D4B
string.quoted.single.tsx#820D4B
string.quoted.single.json#7C0D48
support.class.promise.js#7C0D48
support.class.promise.jsx#8E0F53
support.class.promise.ts#7C0D48
support.class.promise.tsx#9A105A
support.type.object.console.js#880e4f
support.type.object.console.jsx#760C44
support.type.object.console.ts#8E0F53
support.type.object.console.tsx#880e4f
support.function.console.js#820D4B
support.function.console.jsx#820D4B
support.function.console.ts#8E0F53
support.function.console.tsx#760C44
punctuation.definition.block.js#880e4f
punctuation.definition.block.jsx#8E0F53
punctuation.definition.block.ts#880e4f
punctuation.definition.block.tsx#8E0F53
AdvancedMystery by selfrefactor - VS Code Theme