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#e4d9b5
  • editor.background#fafafa
  • editor.lineHighlightBackground#e4d9b555
  • editor.selectionBackground#f6b3e0
  • editorBracketMatch.background#0B766E
  • editorBracketMatch.border#9C3212
  • editorGroupHeader.tabsBackground#E8E8E8
  • editorGutter.background#fafafa
  • editorLineNumber.foreground#D4C38A
  • scrollbarSlider.background#e4d9b5
  • scrollbarSlider.hoverBackground#D4C38A
  • sideBar.background#DCCE9F
  • statusBar.background#CCB874
  • tab.activeBackground#fafafa
  • tab.activeForeground#394D5E
  • tab.border#fafafa
  • tab.inactiveBackground#CCB874
  • tab.inactiveForeground#465F74

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant#0696B2
punctuation.definition.template-expression.begin.js#07B9DC
punctuation.definition.template-expression.begin.jsx#06a2c0
punctuation.definition.template-expression.begin.ts#06a2c0
punctuation.definition.template-expression.begin.tsx#0696B2
punctuation.definition.template-expression.end.js#06a2c0
punctuation.definition.template-expression.end.jsx#07B9DC
punctuation.definition.template-expression.end.ts#06a2c0
punctuation.definition.template-expression.end.tsx#06a2c0
entity.name.tag#0696B2underline
punctuation.accessor.js#06a2c0
punctuation.accessor.jsx#06AECE
punctuation.accessor.ts#06a2c0
punctuation.accessor.tsx#07B9DC
source.js#06a2c0
source.jsx#06a2c0
source.ts#06AECE
source.tsx#06a2c0
source.css#06AECE
source.scss#0696B2
storage.modifier.js#06a2c0
storage.modifier.jsx#06a2c0
storage.modifier.ts#0696B2
storage.modifier.tsx#07B9DC
string.quoted.single.js#0696B2
string.quoted.single.jsx#0696B2
string.quoted.single.ts#058BA4
string.quoted.single.tsx#058BA4
support.function.dom.js#0696B2
support.function.dom.jsx#058BA4
support.function.dom.ts#06AECE
support.function.dom.tsx#06a2c0
support.variable.property.js#06a2c0
support.variable.property.jsx#06AECE
support.variable.property.ts#06a2c0
support.variable.property.tsx#0696B2
variable.language.constructor#06AECEunderline
variable.language.this#058BA4
meta.selector.css#465F74
constant.language.null.js#394D5E
constant.language.null.jsx#465F74
constant.language.null.ts#394D5E
constant.language.null.tsx#465F74
entity.name.class#3d5365underline
entity.name.function#344756underline
markup.heading.markdown#394D5E
punctuation.separator.comma.js#465F74
punctuation.separator.comma.jsx#41596C
punctuation.separator.comma.ts#3d5365
punctuation.separator.comma.tsx#41596C
support.variable.property.js#394D5E
support.variable.property.jsx#41596C
support.variable.property.ts#41596C
support.variable.property.tsx#465F74
support.type.primitive.js#3d5365
support.type.primitive.jsx#3d5365
support.type.primitive.ts#41596C
support.type.primitive.tsx#394D5E
meta.brace.square.js#3d5365
meta.brace.square.jsx#41596C
meta.brace.square.ts#3d5365
meta.brace.square.tsx#3d5365
variable.other.class.js#344756
variable.other.class.jsx#3d5365
variable.other.class.ts#41596C
variable.other.class.tsx#3d5365
constant.other.object.key.js#394D5E
constant.other.object.key.jsx#3d5365
constant.other.object.key.ts#3d5365
constant.other.object.key.tsx#465F74
variable.language#D66F67
constant.language#d15f56
entity.name.type#d15f56underline
variable.parameter#d15f56
support.function#d15f56
source.json#DA7F77
meta.object-literal.key.js#CC4F45
meta.object-literal.key.jsx#DA7F77
meta.object-literal.key.ts#DA7F77
meta.object-literal.key.tsx#DA7F77
variable.other.constant.js#C64136
variable.other.constant.jsx#D66F67
variable.other.constant.ts#d15f56
variable.other.constant.tsx#d15f56
meta.paragraph.markdown#C64136
entity.other.attribute-name.js#D66F67
entity.other.attribute-name.jsx#d15f56
entity.other.attribute-name.ts#C64136
entity.other.attribute-name.tsx#C64136
string.quoted.single.json#d15f56
support.class.promise.js#d15f56
support.class.promise.jsx#C64136
support.class.promise.ts#d15f56
support.class.promise.tsx#d15f56
support.type.object.console.js#DA7F77
support.type.object.console.jsx#CC4F45
support.type.object.console.ts#D66F67
support.type.object.console.tsx#d15f56
support.function.console.js#d15f56
support.function.console.jsx#C64136
support.function.console.ts#D66F67
support.function.console.tsx#d15f56
punctuation.definition.block.js#d15f56
punctuation.definition.block.jsx#d15f56
punctuation.definition.block.ts#d15f56
punctuation.definition.block.tsx#C64136
storage.type#2a6b94
constant.other#276389
variable.other.object.js#245C7F
variable.other.object.jsx#245C7F
variable.other.object.ts#245C7F
variable.other.object.tsx#2a6b94
markup.quote#2D739F
meta.import.js#245C7F
meta.import.jsx#2a6b94
meta.import.ts#2D739F
meta.import.tsx#2a6b94
meta.tag.js#276389
meta.tag.jsx#2D739F
meta.tag.ts#276389
meta.tag.tsx#2a6b94
string.quoted.single.js#2a6b94
string.quoted.single.jsx#307AA9
string.quoted.single.ts#2a6b94
string.quoted.single.tsx#245C7F
meta.object-literal.key.js#2a6b94
meta.object-literal.key.jsx#307AA9
meta.object-literal.key.ts#2a6b94
meta.object-literal.key.tsx#2a6b94
string.template#2a6b94
entity.name.function.method#2a6b94
support.type.property-name.json#2a6b94
variable.other.property.js#2a6b94
variable.other.property.jsx#2a6b94
variable.other.property.ts#2a6b94
variable.other.property.tsx#307AA9
markup.italic#b63a15
meta.template.expression.js#b63a15
meta.template.expression.jsx#C33E17
meta.template.expression.ts#A93613
meta.template.expression.tsx#b63a15
punctuation.separator.parameter.js#b63a15
punctuation.separator.parameter.jsx#b63a15
punctuation.separator.parameter.ts#9C3212
punctuation.separator.parameter.tsx#b63a15
meta.parameters.js#C33E17
meta.parameters.jsx#C33E17
meta.parameters.ts#9C3212
meta.parameters.tsx#b63a15
constant.character#b63a15
comment#A93613
keyword#b63a15
markup.italic#9C3212
comment.block.documentation#b63a15
comment.line.double-slash#D04218
punctuation.accessor.js#A93613
punctuation.accessor.jsx#A93613
punctuation.accessor.ts#b63a15
punctuation.accessor.tsx#b63a15
punctuation.definition.parameters.begin.js#0d8a81
punctuation.definition.parameters.begin.jsx#0d8a81
punctuation.definition.parameters.begin.ts#0E948A
punctuation.definition.parameters.begin.tsx#0E948A
punctuation.definition.parameters.end.js#0F9E94
punctuation.definition.parameters.end.jsx#0d8a81
punctuation.definition.parameters.end.ts#0d8a81
punctuation.definition.parameters.end.tsx#0F9E94
constant.language.boolean#0d8a81
punctuation.separator.key-value.js#0d8a81
punctuation.separator.key-value.jsx#0d8a81
punctuation.separator.key-value.ts#0d8a81
punctuation.separator.key-value.tsx#0d8a81
storage.modifier.async.js#0d8a81
storage.modifier.async.jsx#0E948A
storage.modifier.async.ts#0d8a81
storage.modifier.async.tsx#0C8078
meta.brace.round.js#0E948A
meta.brace.round.jsx#0F9E94
meta.brace.round.ts#0B766E
meta.brace.round.tsx#0C8078
entity.other.inherited-class#0d8a81
support.class.builtin.js#0F9E94
support.class.builtin.jsx#0d8a81
support.class.builtin.ts#0d8a81
support.class.builtin.tsx#0B766E
meta.tag.attributes.js#0B766E
meta.tag.attributes.jsx#0d8a81
meta.tag.attributes.ts#0C8078
meta.tag.attributes.tsx#0d8a81
keyword.control.module.js#0E948A
keyword.control.module.jsx#0F9E94
keyword.control.module.ts#0C8078
keyword.control.module.tsx#0d8a81
keyword.operator.accessor#0E948A
invalid#0d8a81underline
constant.numeric#0d8a81
meta.var.expr.js#0F9E94
meta.var.expr.jsx#0F9E94
meta.var.expr.ts#0d8a81
meta.var.expr.tsx#0d8a81
keyword.control.import.js#0d8a81
keyword.control.import.jsx#0F9E94
keyword.control.import.ts#0C8078
keyword.control.import.tsx#0d8a81
keyword.control.from.js#0d8a81
keyword.control.from.jsx#0d8a81
keyword.control.from.ts#0d8a81
keyword.control.from.tsx#0d8a81
keyword.control.export.js#0d8a81
keyword.control.export.jsx#0F9E94
keyword.control.export.ts#0d8a81
keyword.control.export.tsx#0d8a81
keyword.control.default.js#0d8a81
keyword.control.default.jsx#0d8a81
keyword.control.default.ts#0d8a81
keyword.control.default.tsx#0d8a81
support.type.object.module.js#0d8a81
support.type.object.module.jsx#0F9E94
support.type.object.module.ts#0E948A
support.type.object.module.tsx#0d8a81

Shiki preview

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

Loading...