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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.character#1D3E69
constant.language.boolean#1D3E69
entity.name.tag#1D3E69underline
keyword#1F4473
markup.italic#1E416E
entity.name.function.method#1F4473
string.quoted.single.js#1F4473
string.quoted.single.jsx#1E416E
string.quoted.single.ts#1D3E69
string.quoted.single.tsx#1D3E69
support.type.property-name.json#1E416E
punctuation.accessor.js#1E416E
punctuation.accessor.jsx#214778
punctuation.accessor.ts#1E416E
punctuation.accessor.tsx#1A385F
punctuation.separator.key-value.js#1D3E69
punctuation.separator.key-value.jsx#1A385F
punctuation.separator.key-value.ts#1E416E
punctuation.separator.key-value.tsx#1E416E
constant.numeric#1E416E
meta.brace.square.js#1A385F
meta.brace.square.jsx#1E416E
meta.brace.square.ts#214778
meta.brace.square.tsx#1E416E
meta.var.expr.js#1A385F
meta.var.expr.jsx#1E416E
meta.var.expr.ts#1E416E
meta.var.expr.tsx#1A385F
storage.modifier.js#1B3B64
storage.modifier.jsx#1F4473
storage.modifier.ts#1F4473
storage.modifier.tsx#224A7D
storage.type#1A385F
string.template#1F4473
support.constant#1D3E69
support.function.dom.js#1E416E
support.function.dom.jsx#1E416E
support.function.dom.ts#1E416E
support.function.dom.tsx#1E416E
support.variable.property.js#1E416E
support.variable.property.jsx#1F4473
support.variable.property.ts#1E416E
support.variable.property.tsx#1E416E
variable.language.constructor#1E416Eunderline
variable.language.this#1E416E
meta.tag.js#1F4473
meta.tag.jsx#1D3E69
meta.tag.ts#1E416E
meta.tag.tsx#1E416E
support.type.object.module.js#1E416E
support.type.object.module.jsx#1E416E
support.type.object.module.ts#1E416E
support.type.object.module.tsx#1A385F
punctuation.definition.parameters.begin.js#1F4473
punctuation.definition.parameters.begin.jsx#1B3B64
punctuation.definition.parameters.begin.ts#1F4473
punctuation.definition.parameters.begin.tsx#1E416E
punctuation.definition.parameters.end.js#214778
punctuation.definition.parameters.end.jsx#1E416E
punctuation.definition.parameters.end.ts#1D3E69
punctuation.definition.parameters.end.tsx#1E416E
punctuation.definition.parameters.end.js#1D3E69
punctuation.definition.parameters.end.jsx#1D3E69
punctuation.definition.parameters.end.ts#1B3B64
punctuation.definition.parameters.end.tsx#1E416E
markup.quote#214778
entity.other.attribute-name.js#1E416E
entity.other.attribute-name.jsx#1E416E
entity.other.attribute-name.ts#1B3B64
entity.other.attribute-name.tsx#1E416E
comment#38978D
constant.language#38978D
constant.other#38978D
keyword.control.flow.js#38978D
keyword.control.flow.jsx#38978D
keyword.control.flow.ts#30837A
keyword.control.flow.tsx#38978D
keyword.control.module.js#30837A
keyword.control.module.jsx#38978D
keyword.control.module.ts#38978D
keyword.control.module.tsx#38978D
keyword.operator.accessor#338980
markup.italic#38978D
meta.import.js#38978D
meta.import.jsx#359087
meta.import.ts#38978D
meta.import.tsx#38978D
meta.object-literal.key.js#38978D
meta.object-literal.key.jsx#40ABA0
meta.object-literal.key.ts#38978D
meta.object-literal.key.tsx#38978D
meta.paragraph.markdown#3B9E93
punctuation.definition.block.js#38978D
punctuation.definition.block.jsx#3B9E93
punctuation.definition.block.ts#3B9E93
punctuation.definition.block.tsx#38978D
punctuation.separator.parameter.js#38978D
punctuation.separator.parameter.jsx#38978D
punctuation.separator.parameter.ts#38978D
punctuation.separator.parameter.tsx#3B9E93
string.quoted.single.js#338980
string.quoted.single.jsx#3B9E93
string.quoted.single.ts#3DA59A
string.quoted.single.tsx#359087
string.quoted.single.json#359087
support.class.promise.js#38978D
support.class.promise.jsx#38978D
support.class.promise.ts#38978D
support.class.promise.tsx#3B9E93
support.function#38978D
keyword.control.import.js#3DA59A
keyword.control.import.jsx#38978D
keyword.control.import.ts#338980
keyword.control.import.tsx#38978D
keyword.control.from.js#359087
keyword.control.from.jsx#359087
keyword.control.from.ts#38978D
keyword.control.from.tsx#3B9E93
keyword.control.export.js#38978D
keyword.control.export.jsx#38978D
keyword.control.export.ts#38978D
keyword.control.export.tsx#38978D
keyword.control.default.js#38978D
keyword.control.default.jsx#30837A
keyword.control.default.ts#38978D
keyword.control.default.tsx#38978D
entity.name.class#359087underline
support.function.console.js#30837A
support.function.console.jsx#38978D
support.function.console.ts#3DA59A
support.function.console.tsx#3B9E93
variable.language#38978D
invalid#338980underline
support.type.object.console.js#38978D
support.type.object.console.jsx#38978D
support.type.object.console.ts#3B9E93
support.type.object.console.tsx#38978D
variable.parameter#38978D
comment.block.documentation#C3865C
comment.line.double-slash#B16F41
constant.language.null.js#BD7A4B
constant.language.null.jsx#B97444
constant.language.null.ts#B97444
constant.language.null.tsx#B16F41
entity.name.type#B16F41
meta.parameters.js#B16F41
meta.parameters.jsx#B97444
meta.parameters.ts#B97444
meta.parameters.tsx#B97444
variable.other.class.js#B97444
variable.other.class.jsx#B97444
variable.other.class.ts#B16F41
variable.other.class.tsx#B16F41
constant.other.object.key.js#B97444
constant.other.object.key.jsx#B97444
constant.other.object.key.ts#B16F41
constant.other.object.key.tsx#BD7A4B
entity.other.inherited-class#BD7A4B
markup.heading.markdown#C3865C
meta.brace.round.js#B97444
meta.brace.round.jsx#BD7A4B
meta.brace.round.ts#B97444
meta.brace.round.tsx#A86A3E
entity.name.function#BD7A4Bunderline
meta.tag.attributes.js#A86A3E
meta.tag.attributes.jsx#B97444
meta.tag.attributes.ts#B16F41
meta.tag.attributes.tsx#B97444
punctuation.accessor.js#B97444
punctuation.accessor.jsx#A86A3E
punctuation.accessor.ts#A86A3E
punctuation.accessor.tsx#A0643B
punctuation.separator.comma.js#B16F41
punctuation.separator.comma.jsx#B97444
punctuation.separator.comma.ts#B97444
punctuation.separator.comma.tsx#B97444
source.js#B16F41
source.jsx#B97444
source.ts#A0643B
source.tsx#A0643B
variable.other.property.js#B97444
variable.other.property.jsx#C3865C
variable.other.property.ts#B97444
variable.other.property.tsx#B97444
storage.modifier.async.js#B97444
storage.modifier.async.jsx#B97444
storage.modifier.async.ts#B16F41
storage.modifier.async.tsx#B16F41
support.class.builtin.js#B97444
support.class.builtin.jsx#B97444
support.class.builtin.ts#B16F41
support.class.builtin.tsx#B97444
support.type.primitive.js#BD7A4B
support.type.primitive.jsx#A0643B
support.type.primitive.ts#B97444
support.type.primitive.tsx#A86A3E
support.variable.property.js#B97444
support.variable.property.jsx#B16F41
support.variable.property.ts#BD7A4B
support.variable.property.tsx#B97444
variable#A86A3E
variable.other.object.js#A86A3E
variable.other.object.jsx#B97444
variable.other.object.ts#B16F41
variable.other.object.tsx#B97444
variable.other.readwrite#B16F41
variable.other.readwrite.js#A86A3E
variable.other.readwrite.jsx#B97444
variable.other.readwrite.ts#B97444
variable.other.readwrite.tsx#B97444
BraveNeighbour by selfrefactor - VS Code Theme