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#C4BE9D
  • badge.background#e7e7e7
  • badge.foreground#3f7063
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#FAF8F3
  • editor.findMatchBackground#87a192
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.inactiveSelectionBackground#aaab9c66
  • editor.lineHighlightBackground#FAF8F3
  • editor.lineHighlightBorder#9c824a
  • editor.selectionBackground#cdd0d255
  • editor.selectionHighlightBackground#cdd0d277
  • editor.wordHighlightBackground#aa769b55
  • editor.wordHighlightStrongBackground#410a0b44
  • editorBracketMatch.background#e7e7e7
  • editorBracketMatch.border#fafafa
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#cdd0d2
  • editorHoverWidget.background#d1d3d4
  • editorHoverWidget.border#d78d9f
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#d1d3d4
  • editorSuggestWidget.border#d78d9f
  • editorSuggestWidget.foreground#2a3343
  • editorSuggestWidget.highlightForeground#820014
  • editorSuggestWidget.selectedBackground#2c3d5244
  • editorWidget.background#cdd0d2
  • editorWidget.border#d78d9f
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • foreground#24283b
  • git.color.modified#4d0e0b
  • gitDecoration.addedResourceForeground#53245b
  • gitDecoration.modifiedResourceForeground#034694
  • gitDecoration.untrackedResourceForeground#aa769b
  • list.activeSelectionBackground#d1343822
  • list.activeSelectionForeground#2a3343
  • list.dropBackground#db82d6cc
  • list.errorForeground#a50044
  • list.focusBackground#6d50a188
  • list.highlightForeground#4d0e0b
  • list.hoverBackground#ad680066
  • list.hoverForeground#e7e7e7
  • list.inactiveFocusBackground#885f66cc
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#4d0e0b
  • scrollbar.shadow#cf6f4b
  • scrollbarSlider.background#cdd0d2
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#cdd0d2
  • sideBar.border#8382ae
  • sideBar.foreground#85483d
  • sideBarSectionHeader.background#aebabe
  • sideBarSectionHeader.foreground#2a3343
  • sideBarTitle.foreground#30322e
  • statusBar.background#cdd0d2
  • statusBar.foreground#35495f
  • tab.activeBackground#FAF8F3
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#cdd0d2
  • tab.inactiveBackground#cdd0d2
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#cdd0d2
  • tab.unfocusedActiveBorder#cdd0d2
  • tab.unfocusedActiveForeground#aa769b
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#d239a0underline
source.go#ce5371
source.json#ce5371
source.css#ce5371
markup.italic#c52d92
punctuation.accessor.js#d239a0
punctuation.accessor.jsx#d239a0
punctuation.accessor.ts#b82a89
punctuation.accessor.tsx#d239a0
source.js#ac2780
source.jsx#d239a0
source.ts#b82a89
source.tsx#c52d92
storage.modifier.js#d74ea9
storage.modifier.jsx#dc67b5
storage.modifier.ts#d239a0
storage.modifier.tsx#d239a0
storage.type#da5aaf
string.quoted.single.js#c52d92
string.quoted.single.jsx#d239a0
string.quoted.single.ts#d239a0
string.quoted.single.tsx#da5aaf
support.function.dom.js#ac2780
support.function.dom.jsx#d239a0
support.function.dom.ts#d239a0
support.function.dom.tsx#d239a0
support.variable.property.js#b82a89
support.variable.property.jsx#d239a0
support.variable.property.ts#d239a0
support.variable.property.tsx#d239a0
variable.language.constructor#ac2780underline
variable.language.this#ac2780
meta.var.expr.js#dc67b5
meta.var.expr.jsx#d74ea9
meta.var.expr.ts#d239a0
meta.var.expr.tsx#d239a0
variable#002bc6
keyword.control.import.js#002bc6
keyword.control.import.jsx#0031df
keyword.control.import.ts#0024a7
keyword.control.import.tsx#0036f9
keyword.control.from.js#184aff
keyword.control.from.jsx#0031df
keyword.control.from.ts#184aff
keyword.control.from.tsx#0031df
keyword.control.export.js#0031df
keyword.control.export.jsx#0031df
keyword.control.export.ts#0031df
keyword.control.export.tsx#002bc6
variable.parameter#0031df
support.function#0031df
meta.import.js#0036f9
meta.import.jsx#0031df
meta.import.ts#0031df
meta.import.tsx#0031df
meta.paragraph.markdown#0031df
entity.other.attribute-name.js#0031df
entity.other.attribute-name.jsx#002bc6
entity.other.attribute-name.ts#0036f9
entity.other.attribute-name.tsx#002bc6
string.quoted.single.js#184aff
string.quoted.single.jsx#0031df
string.quoted.single.ts#002bc6
string.quoted.single.tsx#093eff
string.quoted.single.json#0031df
support.class.promise.js#002bc6
support.class.promise.jsx#0024a7
support.class.promise.ts#0031df
support.class.promise.tsx#002bc6
support.type.object.console.js#093eff
support.type.object.console.jsx#0031df
support.type.object.console.ts#002bc6
support.type.object.console.tsx#0024a7
support.function.console.js#0031df
support.function.console.jsx#0036f9
support.function.console.ts#0031df
support.function.console.tsx#184aff
punctuation.definition.block.js#0036f9
punctuation.definition.block.jsx#093eff
punctuation.definition.block.ts#093eff
punctuation.definition.block.tsx#0024a7
keyword#ce5371
keyword.control.default.js#ce5371
keyword.control.default.jsx#ce5371
keyword.control.default.ts#da7f94
keyword.control.default.tsx#ce5371
support.type.object.module.js#ce5371
support.type.object.module.jsx#d46781
support.type.object.module.ts#ce5371
support.type.object.module.tsx#ce5371
keyword.control.module.js#c13758
keyword.control.module.jsx#ce5371
keyword.control.module.ts#c83f60
keyword.control.module.tsx#d46781
keyword.operator.accessor#ce5371
invalid#ce5371underline
constant.numeric#ce5371
constant.language.boolean#d46781
constant.language.null.js#ce5371
constant.language.null.jsx#b53452
constant.language.null.ts#ce5371
constant.language.null.tsx#c83f60
entity.name.class#ce5371underline
entity.name.function#ce5371underline
entity.name.type#d7738bunderline
markup.heading.markdown#da7f94
punctuation.separator.comma.js#ce5371
punctuation.separator.comma.jsx#ce5371
punctuation.separator.comma.ts#c83f60
punctuation.separator.comma.tsx#b53452
support.variable.property.js#c83f60
support.variable.property.jsx#ce5371
support.variable.property.ts#b53452
support.variable.property.tsx#ce5371
support.type.primitive.js#ce5371
support.type.primitive.jsx#b53452
support.type.primitive.ts#d46781
support.type.primitive.tsx#d7738b
punctuation.definition.parameters.begin.js#1c5365
punctuation.definition.parameters.begin.jsx#2d88a5
punctuation.definition.parameters.begin.ts#2a7e99
punctuation.definition.parameters.begin.tsx#216479
punctuation.definition.parameters.end.js#153f4d
punctuation.definition.parameters.end.jsx#153f4d
punctuation.definition.parameters.end.ts#216479
punctuation.definition.parameters.end.tsx#26748d
punctuation.definition.parameters.end.js#26748d
punctuation.definition.parameters.end.jsx#1c5365
punctuation.definition.parameters.end.ts#216479
punctuation.definition.parameters.end.tsx#1c5365
markup.quote#216479
meta.tag.js#216479
meta.tag.jsx#216479
meta.tag.ts#216479
meta.tag.tsx#184959
meta.parameters.js#2a7e99
meta.parameters.jsx#216479
meta.parameters.ts#2a7e99
meta.parameters.tsx#26748d
meta.brace.square.js#216479
meta.brace.square.jsx#216479
meta.brace.square.ts#1c5365
meta.brace.square.tsx#1c5365
variable.other.class.js#1c5365
variable.other.class.jsx#216479
variable.other.class.ts#1c5365
variable.other.class.tsx#1c5365
punctuation.separator.key-value.js#1c5365
punctuation.separator.key-value.jsx#216479
punctuation.separator.key-value.ts#216479
punctuation.separator.key-value.tsx#1c5365
storage.modifier.async.js#26748d
storage.modifier.async.jsx#184959
storage.modifier.async.ts#1c5365
storage.modifier.async.tsx#1c5365
meta.brace.round.js#216479
meta.brace.round.jsx#2a7e99
meta.brace.round.ts#184959
meta.brace.round.tsx#1c5365
constant.other.object.key.js#26748d
constant.other.object.key.jsx#26748d
constant.other.object.key.ts#216479
constant.other.object.key.tsx#1c5365
entity.name.function.method#216479
string.template#216479
support.type.property-name.json#1c5365
variable.other.property.js#153f4d
variable.other.property.jsx#184959
variable.other.property.ts#26748d
variable.other.property.tsx#216479
support.constant#2c323a
punctuation.separator.parameter.js#2c323a
punctuation.separator.parameter.jsx#3e4651
punctuation.separator.parameter.ts#2c323a
punctuation.separator.parameter.tsx#2c323a
constant.character#21252b
constant.language#2c323a
constant.other#2c323a
comment#14161a
markup.italic#21252b
meta.object-literal.key.js#2c323a
meta.object-literal.key.jsx#2c323a
meta.object-literal.key.ts#21252b
meta.object-literal.key.tsx#21252b
comment.block.documentation#21252b
comment.line.double-slash#3e4651
punctuation.accessor.js#21252b
punctuation.accessor.jsx#2c323a
punctuation.accessor.ts#2c323a
punctuation.accessor.tsx#2c323a
variable.language#2c323a
variable.other.object.js#14161a
variable.other.object.jsx#2c323a
variable.other.object.ts#2c323a
variable.other.object.tsx#3e4651
variable.other.readwrite#1a1e23
variable.other.readwrite.js#2c323a
variable.other.readwrite.jsx#21252b
variable.other.readwrite.ts#2c323a
variable.other.readwrite.tsx#2c323a
entity.other.inherited-class#444d5a
support.class.builtin.js#2c323a
support.class.builtin.jsx#444d5a
support.class.builtin.ts#2c323a
support.class.builtin.tsx#21252b
meta.tag.attributes.js#3e4651
meta.tag.attributes.jsx#2c323a
meta.tag.attributes.ts#2c323a
meta.tag.attributes.tsx#2c323a

Shiki preview

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

Loading...