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#621b66underline
source.go#bb9132
source.json#bb9132
source.css#bb9132
markup.italic#4f1652
punctuation.accessor.js#621b66
punctuation.accessor.jsx#621b66
punctuation.accessor.ts#431246
punctuation.accessor.tsx#621b66
source.js#370f3a
source.jsx#621b66
source.ts#431246
source.tsx#4f1652
storage.modifier.js#75207a
storage.modifier.jsx#8c2792
storage.modifier.ts#621b66
storage.modifier.tsx#621b66
storage.type#812486
string.quoted.single.js#4f1652
string.quoted.single.jsx#621b66
string.quoted.single.ts#621b66
string.quoted.single.tsx#812486
support.function.dom.js#370f3a
support.function.dom.jsx#621b66
support.function.dom.ts#621b66
support.function.dom.tsx#621b66
support.variable.property.js#431246
support.variable.property.jsx#621b66
support.variable.property.ts#621b66
support.variable.property.tsx#621b66
variable.language.constructor#370f3aunderline
variable.language.this#370f3a
meta.var.expr.js#8c2792
meta.var.expr.jsx#75207a
meta.var.expr.ts#621b66
meta.var.expr.tsx#621b66
variable#000000
keyword.control.import.js#000000
keyword.control.import.jsx#080c11
keyword.control.import.ts#000000
keyword.control.import.tsx#101822
keyword.control.from.js#1a2737
keyword.control.from.jsx#080c11
keyword.control.from.ts#1a2737
keyword.control.from.tsx#080c11
keyword.control.export.js#080c11
keyword.control.export.jsx#080c11
keyword.control.export.ts#080c11
keyword.control.export.tsx#000000
variable.parameter#080c11
support.function#080c11
meta.import.js#101822
meta.import.jsx#080c11
meta.import.ts#080c11
meta.import.tsx#080c11
meta.paragraph.markdown#080c11
entity.other.attribute-name.js#080c11
entity.other.attribute-name.jsx#000000
entity.other.attribute-name.ts#101822
entity.other.attribute-name.tsx#000000
string.quoted.single.js#1a2737
string.quoted.single.jsx#080c11
string.quoted.single.ts#000000
string.quoted.single.tsx#151f2d
string.quoted.single.json#080c11
support.class.promise.js#000000
support.class.promise.jsx#000000
support.class.promise.ts#080c11
support.class.promise.tsx#000000
support.type.object.console.js#151f2d
support.type.object.console.jsx#080c11
support.type.object.console.ts#000000
support.type.object.console.tsx#000000
support.function.console.js#080c11
support.function.console.jsx#101822
support.function.console.ts#080c11
support.function.console.tsx#1a2737
punctuation.definition.block.js#101822
punctuation.definition.block.jsx#151f2d
punctuation.definition.block.ts#151f2d
punctuation.definition.block.tsx#000000
keyword#bb9132
keyword.control.default.js#bb9132
keyword.control.default.jsx#bb9132
keyword.control.default.ts#d1ab54
keyword.control.default.tsx#bb9132
support.type.object.module.js#bb9132
support.type.object.module.jsx#cb9f3c
support.type.object.module.ts#bb9132
support.type.object.module.tsx#bb9132
keyword.control.module.js#9b7829
keyword.control.module.jsx#bb9132
keyword.control.module.ts#a7812d
keyword.control.module.tsx#cb9f3c
keyword.operator.accessor#bb9132
invalid#bb9132underline
constant.numeric#bb9132
constant.language.boolean#cb9f3c
constant.language.null.js#bb9132
constant.language.null.jsx#8f6f26
constant.language.null.ts#bb9132
constant.language.null.tsx#a7812d
entity.name.class#bb9132underline
entity.name.function#bb9132underline
entity.name.type#cea548underline
markup.heading.markdown#d1ab54
punctuation.separator.comma.js#bb9132
punctuation.separator.comma.jsx#bb9132
punctuation.separator.comma.ts#a7812d
punctuation.separator.comma.tsx#8f6f26
support.variable.property.js#a7812d
support.variable.property.jsx#bb9132
support.variable.property.ts#8f6f26
support.variable.property.tsx#bb9132
support.type.primitive.js#bb9132
support.type.primitive.jsx#8f6f26
support.type.primitive.ts#cb9f3c
support.type.primitive.tsx#cea548
punctuation.definition.parameters.begin.js#2b4a64
punctuation.definition.parameters.begin.jsx#44749d
punctuation.definition.parameters.begin.ts#3f6c92
punctuation.definition.parameters.begin.tsx#335776
punctuation.definition.parameters.end.js#223a4f
punctuation.definition.parameters.end.jsx#223a4f
punctuation.definition.parameters.end.ts#335776
punctuation.definition.parameters.end.tsx#3b6488
punctuation.definition.parameters.end.js#3b6488
punctuation.definition.parameters.end.jsx#2b4a64
punctuation.definition.parameters.end.ts#335776
punctuation.definition.parameters.end.tsx#2b4a64
markup.quote#335776
meta.tag.js#335776
meta.tag.jsx#335776
meta.tag.ts#335776
meta.tag.tsx#27425a
meta.parameters.js#3f6c92
meta.parameters.jsx#335776
meta.parameters.ts#3f6c92
meta.parameters.tsx#3b6488
meta.brace.square.js#335776
meta.brace.square.jsx#335776
meta.brace.square.ts#2b4a64
meta.brace.square.tsx#2b4a64
variable.other.class.js#2b4a64
variable.other.class.jsx#335776
variable.other.class.ts#2b4a64
variable.other.class.tsx#2b4a64
punctuation.separator.key-value.js#2b4a64
punctuation.separator.key-value.jsx#335776
punctuation.separator.key-value.ts#335776
punctuation.separator.key-value.tsx#2b4a64
storage.modifier.async.js#3b6488
storage.modifier.async.jsx#27425a
storage.modifier.async.ts#2b4a64
storage.modifier.async.tsx#2b4a64
meta.brace.round.js#335776
meta.brace.round.jsx#3f6c92
meta.brace.round.ts#27425a
meta.brace.round.tsx#2b4a64
constant.other.object.key.js#3b6488
constant.other.object.key.jsx#3b6488
constant.other.object.key.ts#335776
constant.other.object.key.tsx#2b4a64
entity.name.function.method#335776
string.template#335776
support.type.property-name.json#2b4a64
variable.other.property.js#223a4f
variable.other.property.jsx#27425a
variable.other.property.ts#3b6488
variable.other.property.tsx#335776
support.constant#d44578
punctuation.separator.parameter.js#d44578
punctuation.separator.parameter.jsx#dc668f
punctuation.separator.parameter.ts#d44578
punctuation.separator.parameter.tsx#d44578
constant.character#cf3068
constant.language#d44578
constant.other#d44578
comment#b72a5b
markup.italic#cf3068
meta.object-literal.key.js#d44578
meta.object-literal.key.jsx#d44578
meta.object-literal.key.ts#cf3068
meta.object-literal.key.tsx#cf3068
comment.block.documentation#cf3068
comment.line.double-slash#dc668f
punctuation.accessor.js#cf3068
punctuation.accessor.jsx#d44578
punctuation.accessor.ts#d44578
punctuation.accessor.tsx#d44578
variable.language#d44578
variable.other.object.js#b72a5b
variable.other.object.jsx#d44578
variable.other.object.ts#d44578
variable.other.object.tsx#dc668f
variable.other.readwrite#c32d62
variable.other.readwrite.js#d44578
variable.other.readwrite.jsx#cf3068
variable.other.readwrite.ts#d44578
variable.other.readwrite.tsx#d44578
entity.other.inherited-class#df7398
support.class.builtin.js#d44578
support.class.builtin.jsx#df7398
support.class.builtin.ts#d44578
support.class.builtin.tsx#cf3068
meta.tag.attributes.js#dc668f
meta.tag.attributes.jsx#d44578
meta.tag.attributes.ts#d44578
meta.tag.attributes.tsx#d44578

Shiki preview

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

Loading...