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#9e4f34underline
source.go#8e3996
source.json#8e3996
source.css#8e3996
markup.italic#8b452e
punctuation.accessor.js#9e4f34
punctuation.accessor.jsx#9e4f34
punctuation.accessor.ts#7f402a
punctuation.accessor.tsx#9e4f34
source.js#743a26
source.jsx#9e4f34
source.ts#7f402a
source.tsx#8b452e
storage.modifier.js#b1593a
storage.modifier.jsx#c36747
storage.modifier.ts#9e4f34
storage.modifier.tsx#9e4f34
storage.type#bd5e3e
string.quoted.single.js#8b452e
string.quoted.single.jsx#9e4f34
string.quoted.single.ts#9e4f34
string.quoted.single.tsx#bd5e3e
support.function.dom.js#743a26
support.function.dom.jsx#9e4f34
support.function.dom.ts#9e4f34
support.function.dom.tsx#9e4f34
support.variable.property.js#7f402a
support.variable.property.jsx#9e4f34
support.variable.property.ts#9e4f34
support.variable.property.tsx#9e4f34
variable.language.constructor#743a26underline
variable.language.this#743a26
meta.var.expr.js#c36747
meta.var.expr.jsx#b1593a
meta.var.expr.ts#9e4f34
meta.var.expr.tsx#9e4f34
variable#be397d
keyword.control.import.js#be397d
keyword.control.import.jsx#c8498a
keyword.control.import.ts#a7326d
keyword.control.import.tsx#ce5d96
keyword.control.from.js#d574a5
keyword.control.from.jsx#c8498a
keyword.control.from.ts#d574a5
keyword.control.from.tsx#c8498a
keyword.control.export.js#c8498a
keyword.control.export.jsx#c8498a
keyword.control.export.ts#c8498a
keyword.control.export.tsx#be397d
variable.parameter#c8498a
support.function#c8498a
meta.import.js#ce5d96
meta.import.jsx#c8498a
meta.import.ts#c8498a
meta.import.tsx#c8498a
meta.paragraph.markdown#c8498a
entity.other.attribute-name.js#c8498a
entity.other.attribute-name.jsx#be397d
entity.other.attribute-name.ts#ce5d96
entity.other.attribute-name.tsx#be397d
string.quoted.single.js#d574a5
string.quoted.single.jsx#c8498a
string.quoted.single.ts#be397d
string.quoted.single.tsx#d1689e
string.quoted.single.json#c8498a
support.class.promise.js#be397d
support.class.promise.jsx#a7326d
support.class.promise.ts#c8498a
support.class.promise.tsx#be397d
support.type.object.console.js#d1689e
support.type.object.console.jsx#c8498a
support.type.object.console.ts#be397d
support.type.object.console.tsx#a7326d
support.function.console.js#c8498a
support.function.console.jsx#ce5d96
support.function.console.ts#c8498a
support.function.console.tsx#d574a5
punctuation.definition.block.js#ce5d96
punctuation.definition.block.jsx#d1689e
punctuation.definition.block.ts#d1689e
punctuation.definition.block.tsx#a7326d
keyword#8e3996
keyword.control.default.js#8e3996
keyword.control.default.jsx#8e3996
keyword.control.default.ts#b14cbb
keyword.control.default.tsx#8e3996
support.type.object.module.js#8e3996
support.type.object.module.jsx#9f40a8
support.type.object.module.ts#8e3996
support.type.object.module.tsx#8e3996
keyword.control.module.js#722e78
keyword.control.module.jsx#8e3996
keyword.control.module.ts#7c3284
keyword.control.module.tsx#9f40a8
keyword.operator.accessor#8e3996
invalid#8e3996underline
constant.numeric#8e3996
constant.language.boolean#9f40a8
constant.language.null.js#8e3996
constant.language.null.jsx#672a6d
constant.language.null.ts#8e3996
constant.language.null.tsx#7c3284
entity.name.class#8e3996underline
entity.name.function#8e3996underline
entity.name.type#aa44b4underline
markup.heading.markdown#b14cbb
punctuation.separator.comma.js#8e3996
punctuation.separator.comma.jsx#8e3996
punctuation.separator.comma.ts#7c3284
punctuation.separator.comma.tsx#672a6d
support.variable.property.js#7c3284
support.variable.property.jsx#8e3996
support.variable.property.ts#672a6d
support.variable.property.tsx#8e3996
support.type.primitive.js#8e3996
support.type.primitive.jsx#672a6d
support.type.primitive.ts#9f40a8
support.type.primitive.tsx#aa44b4
punctuation.definition.parameters.begin.js#5541d5
punctuation.definition.parameters.begin.jsx#9184e4
punctuation.definition.parameters.begin.ts#8677e1
punctuation.definition.parameters.begin.tsx#6856da
punctuation.definition.parameters.end.js#422dcb
punctuation.definition.parameters.end.jsx#422dcb
punctuation.definition.parameters.end.ts#6856da
punctuation.definition.parameters.end.tsx#7a6bdf
punctuation.definition.parameters.end.js#7a6bdf
punctuation.definition.parameters.end.jsx#5541d5
punctuation.definition.parameters.end.ts#6856da
punctuation.definition.parameters.end.tsx#5541d5
markup.quote#6856da
meta.tag.js#6856da
meta.tag.jsx#6856da
meta.tag.ts#6856da
meta.tag.tsx#4a35d3
meta.parameters.js#8677e1
meta.parameters.jsx#6856da
meta.parameters.ts#8677e1
meta.parameters.tsx#7a6bdf
meta.brace.square.js#6856da
meta.brace.square.jsx#6856da
meta.brace.square.ts#5541d5
meta.brace.square.tsx#5541d5
variable.other.class.js#5541d5
variable.other.class.jsx#6856da
variable.other.class.ts#5541d5
variable.other.class.tsx#5541d5
punctuation.separator.key-value.js#5541d5
punctuation.separator.key-value.jsx#6856da
punctuation.separator.key-value.ts#6856da
punctuation.separator.key-value.tsx#5541d5
storage.modifier.async.js#7a6bdf
storage.modifier.async.jsx#4a35d3
storage.modifier.async.ts#5541d5
storage.modifier.async.tsx#5541d5
meta.brace.round.js#6856da
meta.brace.round.jsx#8677e1
meta.brace.round.ts#4a35d3
meta.brace.round.tsx#5541d5
constant.other.object.key.js#7a6bdf
constant.other.object.key.jsx#7a6bdf
constant.other.object.key.ts#6856da
constant.other.object.key.tsx#5541d5
entity.name.function.method#6856da
string.template#6856da
support.type.property-name.json#5541d5
variable.other.property.js#422dcb
variable.other.property.jsx#4a35d3
variable.other.property.ts#7a6bdf
variable.other.property.tsx#6856da
support.constant#20366b
punctuation.separator.parameter.js#20366b
punctuation.separator.parameter.jsx#29458a
punctuation.separator.parameter.ts#20366b
punctuation.separator.parameter.tsx#20366b
constant.character#1a2c57
constant.language#20366b
constant.other#20366b
comment#132040
markup.italic#1a2c57
meta.object-literal.key.js#20366b
meta.object-literal.key.jsx#20366b
meta.object-literal.key.ts#1a2c57
meta.object-literal.key.tsx#1a2c57
comment.block.documentation#1a2c57
comment.line.double-slash#29458a
punctuation.accessor.js#1a2c57
punctuation.accessor.jsx#20366b
punctuation.accessor.ts#20366b
punctuation.accessor.tsx#20366b
variable.language#20366b
variable.other.object.js#132040
variable.other.object.jsx#20366b
variable.other.object.ts#20366b
variable.other.object.tsx#29458a
variable.other.readwrite#17264c
variable.other.readwrite.js#20366b
variable.other.readwrite.jsx#1a2c57
variable.other.readwrite.ts#20366b
variable.other.readwrite.tsx#20366b
entity.other.inherited-class#2d4b96
support.class.builtin.js#20366b
support.class.builtin.jsx#2d4b96
support.class.builtin.ts#20366b
support.class.builtin.tsx#1a2c57
meta.tag.attributes.js#29458a
meta.tag.attributes.jsx#20366b
meta.tag.attributes.ts#20366b
meta.tag.attributes.tsx#20366b

Shiki preview

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

Loading...