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#9b5636underline
source.go#3f9072
source.json#3f9072
source.css#3f9072
markup.italic#884c2f
punctuation.accessor.js#9b5636
punctuation.accessor.jsx#9b5636
punctuation.accessor.ts#7d452b
punctuation.accessor.tsx#9b5636
source.js#713f28
source.jsx#9b5636
source.ts#7d452b
source.tsx#884c2f
storage.modifier.js#ae603d
storage.modifier.jsx#c06f49
storage.modifier.ts#9b5636
storage.modifier.tsx#9b5636
storage.type#b96741
string.quoted.single.js#884c2f
string.quoted.single.jsx#9b5636
string.quoted.single.ts#9b5636
string.quoted.single.tsx#b96741
support.function.dom.js#713f28
support.function.dom.jsx#9b5636
support.function.dom.ts#9b5636
support.function.dom.tsx#9b5636
support.variable.property.js#7d452b
support.variable.property.jsx#9b5636
support.variable.property.ts#9b5636
support.variable.property.tsx#9b5636
variable.language.constructor#713f28underline
variable.language.this#713f28
meta.var.expr.js#c06f49
meta.var.expr.jsx#ae603d
meta.var.expr.ts#9b5636
meta.var.expr.tsx#9b5636
variable#380647
keyword.control.import.js#380647
keyword.control.import.jsx#4b085f
keyword.control.import.ts#22042b
keyword.control.import.tsx#5d0a77
keyword.control.from.js#740c93
keyword.control.from.jsx#4b085f
keyword.control.from.ts#740c93
keyword.control.from.tsx#4b085f
keyword.control.export.js#4b085f
keyword.control.export.jsx#4b085f
keyword.control.export.ts#4b085f
keyword.control.export.tsx#380647
variable.parameter#4b085f
support.function#4b085f
meta.import.js#5d0a77
meta.import.jsx#4b085f
meta.import.ts#4b085f
meta.import.tsx#4b085f
meta.paragraph.markdown#4b085f
entity.other.attribute-name.js#4b085f
entity.other.attribute-name.jsx#380647
entity.other.attribute-name.ts#5d0a77
entity.other.attribute-name.tsx#380647
string.quoted.single.js#740c93
string.quoted.single.jsx#4b085f
string.quoted.single.ts#380647
string.quoted.single.tsx#680b85
string.quoted.single.json#4b085f
support.class.promise.js#380647
support.class.promise.jsx#22042b
support.class.promise.ts#4b085f
support.class.promise.tsx#380647
support.type.object.console.js#680b85
support.type.object.console.jsx#4b085f
support.type.object.console.ts#380647
support.type.object.console.tsx#22042b
support.function.console.js#4b085f
support.function.console.jsx#5d0a77
support.function.console.ts#4b085f
support.function.console.tsx#740c93
punctuation.definition.block.js#5d0a77
punctuation.definition.block.jsx#680b85
punctuation.definition.block.ts#680b85
punctuation.definition.block.tsx#22042b
keyword#3f9072
keyword.control.default.js#3f9072
keyword.control.default.jsx#3f9072
keyword.control.default.ts#53b490
keyword.control.default.tsx#3f9072
support.type.object.module.js#3f9072
support.type.object.module.jsx#47a280
support.type.object.module.ts#3f9072
support.type.object.module.tsx#3f9072
keyword.control.module.js#33745c
keyword.control.module.jsx#3f9072
keyword.control.module.ts#377e64
keyword.control.module.tsx#47a280
keyword.operator.accessor#3f9072
invalid#3f9072underline
constant.numeric#3f9072
constant.language.boolean#47a280
constant.language.null.js#3f9072
constant.language.null.jsx#2e6953
constant.language.null.ts#3f9072
constant.language.null.tsx#377e64
entity.name.class#3f9072underline
entity.name.function#3f9072underline
entity.name.type#4bac89underline
markup.heading.markdown#53b490
punctuation.separator.comma.js#3f9072
punctuation.separator.comma.jsx#3f9072
punctuation.separator.comma.ts#377e64
punctuation.separator.comma.tsx#2e6953
support.variable.property.js#377e64
support.variable.property.jsx#3f9072
support.variable.property.ts#2e6953
support.variable.property.tsx#3f9072
support.type.primitive.js#3f9072
support.type.primitive.jsx#2e6953
support.type.primitive.ts#47a280
support.type.primitive.tsx#4bac89
punctuation.definition.parameters.begin.js#8d265f
punctuation.definition.parameters.begin.jsx#ca3a8a
punctuation.definition.parameters.begin.ts#c13482
punctuation.definition.parameters.begin.tsx#a12b6d
punctuation.definition.parameters.end.js#751f4f
punctuation.definition.parameters.end.jsx#751f4f
punctuation.definition.parameters.end.ts#a12b6d
punctuation.definition.parameters.end.tsx#b5307a
punctuation.definition.parameters.end.js#b5307a
punctuation.definition.parameters.end.jsx#8d265f
punctuation.definition.parameters.end.ts#a12b6d
punctuation.definition.parameters.end.tsx#8d265f
markup.quote#a12b6d
meta.tag.js#a12b6d
meta.tag.jsx#a12b6d
meta.tag.ts#a12b6d
meta.tag.tsx#812257
meta.parameters.js#c13482
meta.parameters.jsx#a12b6d
meta.parameters.ts#c13482
meta.parameters.tsx#b5307a
meta.brace.square.js#a12b6d
meta.brace.square.jsx#a12b6d
meta.brace.square.ts#8d265f
meta.brace.square.tsx#8d265f
variable.other.class.js#8d265f
variable.other.class.jsx#a12b6d
variable.other.class.ts#8d265f
variable.other.class.tsx#8d265f
punctuation.separator.key-value.js#8d265f
punctuation.separator.key-value.jsx#a12b6d
punctuation.separator.key-value.ts#a12b6d
punctuation.separator.key-value.tsx#8d265f
storage.modifier.async.js#b5307a
storage.modifier.async.jsx#812257
storage.modifier.async.ts#8d265f
storage.modifier.async.tsx#8d265f
meta.brace.round.js#a12b6d
meta.brace.round.jsx#c13482
meta.brace.round.ts#812257
meta.brace.round.tsx#8d265f
constant.other.object.key.js#b5307a
constant.other.object.key.jsx#b5307a
constant.other.object.key.ts#a12b6d
constant.other.object.key.tsx#8d265f
entity.name.function.method#a12b6d
string.template#a12b6d
support.type.property-name.json#8d265f
variable.other.property.js#751f4f
variable.other.property.jsx#812257
variable.other.property.ts#b5307a
variable.other.property.tsx#a12b6d
support.constant#0d1016
punctuation.separator.parameter.js#0d1016
punctuation.separator.parameter.jsx#1c2330
punctuation.separator.parameter.ts#0d1016
punctuation.separator.parameter.tsx#0d1016
constant.character#040406
constant.language#0d1016
constant.other#0d1016
comment#000000
markup.italic#040406
meta.object-literal.key.js#0d1016
meta.object-literal.key.jsx#0d1016
meta.object-literal.key.ts#040406
meta.object-literal.key.tsx#040406
comment.block.documentation#040406
comment.line.double-slash#1c2330
punctuation.accessor.js#040406
punctuation.accessor.jsx#0d1016
punctuation.accessor.ts#0d1016
punctuation.accessor.tsx#0d1016
variable.language#0d1016
variable.other.object.js#000000
variable.other.object.jsx#0d1016
variable.other.object.ts#0d1016
variable.other.object.tsx#1c2330
variable.other.readwrite#000000
variable.other.readwrite.js#0d1016
variable.other.readwrite.jsx#040406
variable.other.readwrite.ts#0d1016
variable.other.readwrite.tsx#0d1016
entity.other.inherited-class#222a39
support.class.builtin.js#0d1016
support.class.builtin.jsx#222a39
support.class.builtin.ts#0d1016
support.class.builtin.tsx#040406
meta.tag.attributes.js#1c2330
meta.tag.attributes.jsx#0d1016
meta.tag.attributes.ts#0d1016
meta.tag.attributes.tsx#0d1016

Shiki preview

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

Loading...