Skip to main content
CodingTheme

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#cccdc5f1
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f9f6f1
  • editor.lineHighlightBackground#F2EBE1
  • editor.selectionBackground#94525755
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorGroupHeader.tabsBackground#F2EBE1
  • editorGutter.background#f9f6f1
  • editorLineNumber.foreground#2a3343a9
  • scrollbarSlider.background#cccdc5f1
  • scrollbarSlider.hoverBackground#cccdc5f3
  • sideBar.background#cccdc5f3
  • statusBar.background#cccdc5f3
  • tab.activeBackground#f9f6f1
  • tab.activeForeground#2a3343e9
  • tab.border#f9f6f1
  • tab.inactiveBackground#859da9e9
  • tab.inactiveForeground#fafafa

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language.boolean#9C8058
keyword#937953
constant.language.null.js#937953
constant.language.null.jsx#9C8058
constant.language.null.ts#A4875E
constant.language.null.tsx#9C8058
entity.name.class#9C8058underline
entity.name.function#9C8058underline
entity.name.type#9C8058
markup.heading.markdown#9C8058
punctuation.separator.comma.js#9C8058
punctuation.separator.comma.jsx#A4875E
punctuation.separator.comma.ts#A4875E
punctuation.separator.comma.tsx#A4875E
support.variable.property.js#9C8058
support.variable.property.jsx#9C8058
support.variable.property.ts#9C8058
support.variable.property.tsx#9C8058
support.type.primitive.js#9C8058
support.type.primitive.jsx#9C8058
support.type.primitive.ts#9C8058
support.type.primitive.tsx#A4875E
variable#9C8058
entity.name.tag#f26153underline
markup.italic#f26153
punctuation.separator.key-value.js#f26153
punctuation.separator.key-value.jsx#f26153
punctuation.separator.key-value.ts#F15141
punctuation.separator.key-value.tsx#F15141
punctuation.accessor.js#F58176
punctuation.accessor.jsx#F37165
punctuation.accessor.ts#f26153
punctuation.accessor.tsx#f26153
storage.modifier.js#f26153
storage.modifier.jsx#f26153
storage.modifier.ts#F15141
storage.modifier.tsx#F15141
storage.type#f26153
support.function.dom.js#F15141
support.function.dom.jsx#f26153
support.function.dom.ts#F37165
support.function.dom.tsx#F69188
support.variable.property.js#f26153
support.variable.property.jsx#f26153
support.variable.property.ts#f26153
support.variable.property.tsx#f26153
variable.language.constructor#F15141underline
variable.language.this#F15141
storage.modifier.async.js#0A676B
storage.modifier.async.jsx#0A676B
storage.modifier.async.ts#085B5F
storage.modifier.async.tsx#085B5F
meta.brace.round.js#0A676B
meta.brace.round.jsx#0A676B
meta.brace.round.ts#096165
meta.brace.round.tsx#0A676B
variable.parameter#096165
entity.other.inherited-class#096165
support.class.builtin.js#085B5F
support.class.builtin.jsx#075053
support.class.builtin.ts#0A676B
support.class.builtin.tsx#096165
meta.tag.attributes.js#096165
meta.tag.attributes.jsx#085B5F
meta.tag.attributes.ts#085B5F
meta.tag.attributes.tsx#096165
keyword.control.module.js#0A6C71
keyword.control.module.jsx#085B5F
keyword.control.module.ts#085B5F
keyword.control.module.tsx#085B5F
keyword.operator.accessor#096165
invalid#075053underline
constant.numeric#0B7277
meta.brace.square.js#085659
meta.brace.square.jsx#085B5F
meta.brace.square.ts#0A6C71
meta.brace.square.tsx#075053
meta.var.expr.js#085B5F
meta.var.expr.jsx#096165
meta.var.expr.ts#096165
meta.var.expr.tsx#096165
keyword.control.import.js#085B5F
keyword.control.import.jsx#096165
keyword.control.import.ts#085659
keyword.control.import.tsx#085B5F
keyword.control.from.js#0A676B
keyword.control.from.jsx#096165
keyword.control.from.ts#075053
keyword.control.from.tsx#0A676B
keyword.control.export.js#085B5F
keyword.control.export.jsx#096165
keyword.control.export.ts#085B5F
keyword.control.export.tsx#096165
keyword.control.default.js#096165
keyword.control.default.jsx#0A676B
keyword.control.default.ts#096165
keyword.control.default.tsx#0A676B
support.type.object.module.js#096165
support.type.object.module.jsx#096165
support.type.object.module.ts#085B5F
support.type.object.module.tsx#096165
support.function#9C8058
source.js#AE9570
source.jsx#937953
source.ts#9C8058
source.tsx#8A714E
keyword.control.flow.js#A4875E
keyword.control.flow.jsx#9C8058
keyword.control.flow.ts#9C8058
keyword.control.flow.tsx#9C8058
meta.import.js#937953
meta.import.jsx#937953
meta.import.ts#9C8058
meta.import.tsx#937953
meta.paragraph.markdown#9C8058
string.quoted.single.js#9C8058
string.quoted.single.jsx#9C8058
string.quoted.single.ts#9C8058
string.quoted.single.tsx#937953
string.quoted.single.json#9C8058
support.class.promise.js#A4875E
support.class.promise.jsx#9C8058
support.class.promise.ts#937953
support.class.promise.tsx#9C8058
support.type.object.console.js#9C8058
support.type.object.console.jsx#A4875E
support.type.object.console.ts#9C8058
support.type.object.console.tsx#8A714E
support.function.console.js#937953
support.function.console.jsx#9C8058
support.function.console.ts#AE9570
support.function.console.tsx#9C8058
punctuation.definition.block.js#9C8058
punctuation.definition.block.jsx#9C8058
punctuation.definition.block.ts#816A49
punctuation.definition.block.tsx#AE9570
variable.language#A4875E
meta.tag.js#9C8058
meta.tag.jsx#9C8058
meta.tag.ts#9C8058
meta.tag.tsx#9C8058
punctuation.definition.parameters.begin.js#EE311E
punctuation.definition.parameters.begin.jsx#F37165
punctuation.definition.parameters.begin.ts#EF4130
punctuation.definition.parameters.begin.tsx#F69188
punctuation.definition.parameters.end.js#f26153
punctuation.definition.parameters.end.jsx#f26153
punctuation.definition.parameters.end.ts#EE311E
punctuation.definition.parameters.end.tsx#F69188
punctuation.definition.parameters.end.js#f26153
punctuation.definition.parameters.end.jsx#EE311E
punctuation.definition.parameters.end.ts#EE311E
punctuation.definition.parameters.end.tsx#F37165
markup.quote#EF4130
entity.other.attribute-name.js#f26153
entity.other.attribute-name.jsx#f26153
entity.other.attribute-name.ts#f26153
entity.other.attribute-name.tsx#f26153
meta.parameters.js#F58176
meta.parameters.jsx#EF4130
meta.parameters.ts#F37165
meta.parameters.tsx#F69188
variable.other.class.js#EF4130
variable.other.class.jsx#F15141
variable.other.class.ts#F37165
variable.other.class.tsx#F69188
constant.other.object.key.js#f26153
constant.other.object.key.jsx#f26153
constant.other.object.key.ts#f26153
constant.other.object.key.tsx#f26153
entity.name.function.method#F15141
string.template#f26153
support.constant#f26153
string.quoted.single.js#EF4130
string.quoted.single.jsx#f26153
string.quoted.single.ts#f26153
string.quoted.single.tsx#F15141
support.type.property-name.json#F37165
variable.other.property.js#f26153
variable.other.property.jsx#F15141
variable.other.property.ts#F58176
variable.other.property.tsx#f26153
punctuation.separator.parameter.js#096165
punctuation.separator.parameter.jsx#075053
punctuation.separator.parameter.ts#096165
punctuation.separator.parameter.tsx#096165
constant.character#096165
constant.language#096165
constant.other#085B5F
comment#085B5F
markup.italic#096165
meta.object-literal.key.js#0A676B
meta.object-literal.key.jsx#096165
meta.object-literal.key.ts#096165
meta.object-literal.key.tsx#085659
comment.block.documentation#096165
comment.line.double-slash#0B7277
punctuation.accessor.js#0A6C71
punctuation.accessor.jsx#085B5F
punctuation.accessor.ts#096165
punctuation.accessor.tsx#096165
variable.other.object.js#096165
variable.other.object.jsx#0A676B
variable.other.object.ts#075053
variable.other.object.tsx#085B5F
variable.other.readwrite#085659
variable.other.readwrite.js#096165
variable.other.readwrite.jsx#096165
variable.other.readwrite.ts#0A6C71
variable.other.readwrite.tsx#096165

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...