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#A0595E
keyword#975459
constant.language.null.js#975459
constant.language.null.jsx#A0595E
constant.language.null.ts#A76166
constant.language.null.tsx#A0595E
entity.name.class#A0595Eunderline
entity.name.function#A0595Eunderline
entity.name.type#A0595E
markup.heading.markdown#A0595E
punctuation.separator.comma.js#A0595E
punctuation.separator.comma.jsx#A76166
punctuation.separator.comma.ts#A76166
punctuation.separator.comma.tsx#A76166
support.variable.property.js#A0595E
support.variable.property.jsx#A0595E
support.variable.property.ts#A0595E
support.variable.property.tsx#A0595E
support.type.primitive.js#A0595E
support.type.primitive.jsx#A0595E
support.type.primitive.ts#A0595E
support.type.primitive.tsx#A76166
variable#A0595E
entity.name.tag#3782AFunderline
markup.italic#3782AF
punctuation.separator.key-value.js#3782AF
punctuation.separator.key-value.jsx#3782AF
punctuation.separator.key-value.ts#347AA5
punctuation.separator.key-value.tsx#347AA5
punctuation.accessor.js#3E91C2
punctuation.accessor.jsx#3A8AB9
punctuation.accessor.ts#3782AF
punctuation.accessor.tsx#3782AF
storage.modifier.js#3782AF
storage.modifier.jsx#3782AF
storage.modifier.ts#347AA5
storage.modifier.tsx#347AA5
storage.type#3782AF
support.function.dom.js#347AA5
support.function.dom.jsx#3782AF
support.function.dom.ts#3A8AB9
support.function.dom.tsx#4897C6
support.variable.property.js#3782AF
support.variable.property.jsx#3782AF
support.variable.property.ts#3782AF
support.variable.property.tsx#3782AF
variable.language.constructor#347AA5underline
variable.language.this#347AA5
storage.modifier.async.js#0E9288
storage.modifier.async.jsx#0E9288
storage.modifier.async.ts#0C827A
storage.modifier.async.tsx#0C827A
meta.brace.round.js#0E9288
meta.brace.round.jsx#0E9288
meta.brace.round.ts#0d8a81
meta.brace.round.tsx#0E9288
variable.parameter#0d8a81
entity.other.inherited-class#0d8a81
support.class.builtin.js#0C827A
support.class.builtin.jsx#0B726B
support.class.builtin.ts#0E9288
support.class.builtin.tsx#0d8a81
meta.tag.attributes.js#0d8a81
meta.tag.attributes.jsx#0C827A
meta.tag.attributes.ts#0C827A
meta.tag.attributes.tsx#0d8a81
keyword.control.module.js#0F9A90
keyword.control.module.jsx#0C827A
keyword.control.module.ts#0C827A
keyword.control.module.tsx#0C827A
keyword.operator.accessor#0d8a81
invalid#0B726Bunderline
constant.numeric#0FA297
meta.brace.square.js#0B7A72
meta.brace.square.jsx#0C827A
meta.brace.square.ts#0F9A90
meta.brace.square.tsx#0B726B
meta.var.expr.js#0C827A
meta.var.expr.jsx#0d8a81
meta.var.expr.ts#0d8a81
meta.var.expr.tsx#0d8a81
keyword.control.import.js#0C827A
keyword.control.import.jsx#0d8a81
keyword.control.import.ts#0B7A72
keyword.control.import.tsx#0C827A
keyword.control.from.js#0E9288
keyword.control.from.jsx#0d8a81
keyword.control.from.ts#0B726B
keyword.control.from.tsx#0E9288
keyword.control.export.js#0C827A
keyword.control.export.jsx#0d8a81
keyword.control.export.ts#0C827A
keyword.control.export.tsx#0d8a81
keyword.control.default.js#0d8a81
keyword.control.default.jsx#0E9288
keyword.control.default.ts#0d8a81
keyword.control.default.tsx#0E9288
support.type.object.module.js#0d8a81
support.type.object.module.jsx#0d8a81
support.type.object.module.ts#0C827A
support.type.object.module.tsx#0d8a81
support.function#A0595E
source.js#B17378
source.jsx#975459
source.ts#A0595E
source.tsx#8D4F53
keyword.control.flow.js#A76166
keyword.control.flow.jsx#A0595E
keyword.control.flow.ts#A0595E
keyword.control.flow.tsx#A0595E
meta.import.js#975459
meta.import.jsx#975459
meta.import.ts#A0595E
meta.import.tsx#975459
meta.paragraph.markdown#A0595E
string.quoted.single.js#A0595E
string.quoted.single.jsx#A0595E
string.quoted.single.ts#A0595E
string.quoted.single.tsx#975459
string.quoted.single.json#A0595E
support.class.promise.js#A76166
support.class.promise.jsx#A0595E
support.class.promise.ts#975459
support.class.promise.tsx#A0595E
support.type.object.console.js#A0595E
support.type.object.console.jsx#A76166
support.type.object.console.ts#A0595E
support.type.object.console.tsx#8D4F53
support.function.console.js#975459
support.function.console.jsx#A0595E
support.function.console.ts#B17378
support.function.console.tsx#A0595E
punctuation.definition.block.js#A0595E
punctuation.definition.block.jsx#A0595E
punctuation.definition.block.ts#844A4E
punctuation.definition.block.tsx#B17378
variable.language#A76166
meta.tag.js#A0595E
meta.tag.jsx#A0595E
meta.tag.ts#A0595E
meta.tag.tsx#A0595E
punctuation.definition.parameters.begin.js#2D6B91
punctuation.definition.parameters.begin.jsx#3A8AB9
punctuation.definition.parameters.begin.ts#31739B
punctuation.definition.parameters.begin.tsx#4897C6
punctuation.definition.parameters.end.js#3782AF
punctuation.definition.parameters.end.jsx#3782AF
punctuation.definition.parameters.end.ts#2D6B91
punctuation.definition.parameters.end.tsx#4897C6
punctuation.definition.parameters.end.js#3782AF
punctuation.definition.parameters.end.jsx#2D6B91
punctuation.definition.parameters.end.ts#2D6B91
punctuation.definition.parameters.end.tsx#3A8AB9
markup.quote#31739B
entity.other.attribute-name.js#3782AF
entity.other.attribute-name.jsx#3782AF
entity.other.attribute-name.ts#3782AF
entity.other.attribute-name.tsx#3782AF
meta.parameters.js#3E91C2
meta.parameters.jsx#31739B
meta.parameters.ts#3A8AB9
meta.parameters.tsx#4897C6
variable.other.class.js#31739B
variable.other.class.jsx#347AA5
variable.other.class.ts#3A8AB9
variable.other.class.tsx#4897C6
constant.other.object.key.js#3782AF
constant.other.object.key.jsx#3782AF
constant.other.object.key.ts#3782AF
constant.other.object.key.tsx#3782AF
entity.name.function.method#347AA5
string.template#3782AF
support.constant#3782AF
string.quoted.single.js#31739B
string.quoted.single.jsx#3782AF
string.quoted.single.ts#3782AF
string.quoted.single.tsx#347AA5
support.type.property-name.json#3A8AB9
variable.other.property.js#3782AF
variable.other.property.jsx#347AA5
variable.other.property.ts#3E91C2
variable.other.property.tsx#3782AF
punctuation.separator.parameter.js#0d8a81
punctuation.separator.parameter.jsx#0B726B
punctuation.separator.parameter.ts#0d8a81
punctuation.separator.parameter.tsx#0d8a81
constant.character#0d8a81
constant.language#0d8a81
constant.other#0C827A
comment#0C827A
markup.italic#0d8a81
meta.object-literal.key.js#0E9288
meta.object-literal.key.jsx#0d8a81
meta.object-literal.key.ts#0d8a81
meta.object-literal.key.tsx#0B7A72
comment.block.documentation#0d8a81
comment.line.double-slash#0FA297
punctuation.accessor.js#0F9A90
punctuation.accessor.jsx#0C827A
punctuation.accessor.ts#0d8a81
punctuation.accessor.tsx#0d8a81
variable.other.object.js#0d8a81
variable.other.object.jsx#0E9288
variable.other.object.ts#0B726B
variable.other.object.tsx#0C827A
variable.other.readwrite#0B7A72
variable.other.readwrite.js#0d8a81
variable.other.readwrite.jsx#0d8a81
variable.other.readwrite.ts#0F9A90
variable.other.readwrite.tsx#0d8a81

Shiki preview

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

Loading...

Zeppelin themes by selfrefactor - VS Code Theme