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
comment#063672
constant.language#063672
constant.other#06346D
keyword.control.flow.js#052F63
keyword.control.flow.jsx#063672
keyword.control.flow.ts#063877
keyword.control.flow.tsx#063672
keyword.control.module.js#063672
keyword.control.module.jsx#06346D
keyword.control.module.ts#073B7C
keyword.control.module.tsx#073D81
keyword.operator.accessor#063672
markup.italic#073D81
meta.import.js#063672
meta.import.jsx#063877
meta.import.ts#063672
meta.import.tsx#063672
meta.object-literal.key.js#073B7C
meta.object-literal.key.jsx#06346D
meta.object-literal.key.ts#063672
meta.object-literal.key.tsx#063672
meta.paragraph.markdown#06346D
punctuation.definition.block.js#063877
punctuation.definition.block.jsx#073B7C
punctuation.definition.block.ts#073D81
punctuation.definition.block.tsx#063672
punctuation.separator.parameter.js#063672
punctuation.separator.parameter.jsx#063672
punctuation.separator.parameter.ts#06346D
punctuation.separator.parameter.tsx#053168
string.quoted.single.js#06346D
string.quoted.single.jsx#063672
string.quoted.single.ts#06346D
string.quoted.single.tsx#063672
string.quoted.single.json#053168
support.class.promise.js#063877
support.class.promise.jsx#063672
support.class.promise.ts#063672
support.class.promise.tsx#063672
support.function#063672
support.function.console.js#073B7C
support.function.console.jsx#063672
support.function.console.ts#063672
support.function.console.tsx#063672
support.type.object.console.js#063672
support.type.object.console.jsx#06346D
support.type.object.console.ts#063672
support.type.object.console.tsx#063672
variable.parameter#052F63
meta.tag.js#FF7E9A
meta.tag.jsx#ff5177
meta.tag.ts#FF2454
meta.tag.tsx#FF426B
variable.language#FF426B
invalid#ff5177underline
constant.numeric#ff5177
meta.brace.square.js#FF426B
meta.brace.square.jsx#FF2454
meta.brace.square.ts#ff5177
meta.brace.square.tsx#FF6083
meta.var.expr.js#ff5177
meta.var.expr.jsx#ff5177
meta.var.expr.ts#FF335F
meta.var.expr.tsx#ff5177
keyword.control.import.js#FF426B
keyword.control.import.jsx#FF7E9A
keyword.control.import.ts#FF426B
keyword.control.import.tsx#ff5177
keyword.control.from.js#FF7E9A
keyword.control.from.jsx#FF335F
keyword.control.from.ts#FF6083
keyword.control.from.tsx#ff5177
keyword.control.export.js#FF335F
keyword.control.export.jsx#FF6F8F
keyword.control.export.ts#FF426B
keyword.control.export.tsx#ff5177
keyword.control.default.js#FF426B
keyword.control.default.jsx#ff5177
keyword.control.default.ts#ff5177
keyword.control.default.tsx#FF7E9A
support.type.object.module.js#FF6083
support.type.object.module.jsx#FF6083
support.type.object.module.ts#FF335F
support.type.object.module.tsx#ff5177
punctuation.definition.parameters.begin.js#ff5177
punctuation.definition.parameters.begin.jsx#FF2454
punctuation.definition.parameters.begin.ts#ff5177
punctuation.definition.parameters.begin.tsx#ff5177
punctuation.definition.parameters.end.js#ff5177
punctuation.definition.parameters.end.jsx#FF6F8F
punctuation.definition.parameters.end.ts#FF7E9A
punctuation.definition.parameters.end.tsx#FF6F8F
punctuation.definition.parameters.end.js#FF426B
punctuation.definition.parameters.end.jsx#ff5177
punctuation.definition.parameters.end.ts#FF7E9A
punctuation.definition.parameters.end.tsx#ff5177
markup.quote#ff5177
entity.other.attribute-name.js#FF6F8F
entity.other.attribute-name.jsx#ff5177
entity.other.attribute-name.ts#FF426B
entity.other.attribute-name.tsx#ff5177
meta.parameters.js#FF426B
meta.parameters.jsx#ff5177
meta.parameters.ts#FF6F8F
meta.parameters.tsx#ff5177
variable.other.class.js#ff5177
variable.other.class.jsx#ff5177
variable.other.class.ts#ff5177
variable.other.class.tsx#ff5177
constant.other.object.key.js#FF335F
constant.other.object.key.jsx#FF335F
constant.other.object.key.ts#FF6F8F
constant.other.object.key.tsx#FF426B
entity.name.function.method#ff5177
string.quoted.single.js#ff5177
string.quoted.single.jsx#FF6083
string.quoted.single.ts#ff5177
string.quoted.single.tsx#ff5177
support.type.property-name.json#FF2454
variable.other.property.js#ff5177
variable.other.property.jsx#FF7E9A
variable.other.property.ts#FF426B
variable.other.property.tsx#FF426B
entity.name.class#ff5177underline
comment.block.documentation#BF6E53
comment.line.double-slash#b76144
constant.language.null.js#b76144
constant.language.null.jsx#C2755B
constant.language.null.ts#b76144
constant.language.null.tsx#AF5D41
entity.name.type#BF6E53
entity.other.inherited-class#AF5D41
markup.heading.markdown#BC674A
meta.brace.round.js#AF5D41
meta.brace.round.jsx#AF5D41
meta.brace.round.ts#b76144
meta.brace.round.tsx#AF5D41
entity.name.function#b76144underline
meta.tag.attributes.js#BC674A
meta.tag.attributes.jsx#b76144
meta.tag.attributes.ts#AF5D41
meta.tag.attributes.tsx#b76144
punctuation.accessor.js#b76144
punctuation.accessor.jsx#BF6E53
punctuation.accessor.ts#b76144
punctuation.accessor.tsx#b76144
punctuation.separator.comma.js#b76144
punctuation.separator.comma.jsx#A7583E
punctuation.separator.comma.ts#b76144
punctuation.separator.comma.tsx#b76144
source.js#AF5D41
source.jsx#b76144
source.ts#AF5D41
source.tsx#AF5D41
storage.modifier.async.js#AF5D41
storage.modifier.async.jsx#b76144
storage.modifier.async.ts#b76144
storage.modifier.async.tsx#AF5D41
support.class.builtin.js#A7583E
support.class.builtin.jsx#b76144
support.class.builtin.ts#b76144
support.class.builtin.tsx#b76144
support.type.primitive.js#BC674A
support.type.primitive.jsx#BC674A
support.type.primitive.ts#AF5D41
support.type.primitive.tsx#BF6E53
support.variable.property.js#AF5D41
support.variable.property.jsx#AF5D41
support.variable.property.ts#b76144
support.variable.property.tsx#BC674A
variable#b76144
variable.other.object.js#b76144
variable.other.object.jsx#AF5D41
variable.other.object.ts#b76144
variable.other.object.tsx#b76144
variable.other.readwrite#AF5D41
variable.other.readwrite.js#BC674A
variable.other.readwrite.jsx#b76144
variable.other.readwrite.ts#A7583E
variable.other.readwrite.tsx#b76144
constant.character#0068a8
constant.language.boolean#0068a8
entity.name.tag#0063A0underline
keyword#0063A0
markup.italic#0068a8
punctuation.accessor.js#0063A0
punctuation.accessor.jsx#0068a8
punctuation.accessor.ts#0068a8
punctuation.accessor.tsx#006DB0
punctuation.separator.key-value.js#0068a8
punctuation.separator.key-value.jsx#0071B7
punctuation.separator.key-value.ts#006DB0
punctuation.separator.key-value.tsx#0068a8
storage.modifier.js#0071B7
storage.modifier.jsx#0068a8
storage.modifier.ts#0071B7
storage.modifier.tsx#006DB0
storage.type#0068a8
string.template#006DB0
support.constant#0068a8
support.function.dom.js#005F99
support.function.dom.jsx#0068a8
support.function.dom.ts#006DB0
support.function.dom.tsx#0068a8
support.variable.property.js#0068a8
support.variable.property.jsx#0068a8
support.variable.property.ts#0068a8
support.variable.property.tsx#0063A0
variable.language.constructor#0068a8underline
variable.language.this#0063A0
AdvancedImmigrant by selfrefactor - VS Code Theme