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#2b4dd2underline
source.go#ad145b
source.json#ad145b
source.css#ad145b
markup.italic#2745bd
punctuation.accessor.js#2b4dd2
punctuation.accessor.jsx#2b4dd2
punctuation.accessor.ts#2440b0
punctuation.accessor.tsx#2b4dd2
source.js#213ba3
source.jsx#2b4dd2
source.ts#2440b0
source.tsx#2745bd
storage.modifier.js#3f5dd8
storage.modifier.jsx#5873dd
storage.modifier.ts#2b4dd2
storage.modifier.tsx#2b4dd2
storage.type#4c68da
string.quoted.single.js#2745bd
string.quoted.single.jsx#2b4dd2
string.quoted.single.ts#2b4dd2
string.quoted.single.tsx#4c68da
support.function.dom.js#213ba3
support.function.dom.jsx#2b4dd2
support.function.dom.ts#2b4dd2
support.function.dom.tsx#2b4dd2
support.variable.property.js#2440b0
support.variable.property.jsx#2b4dd2
support.variable.property.ts#2b4dd2
support.variable.property.tsx#2b4dd2
variable.language.constructor#213ba3underline
variable.language.this#213ba3
meta.var.expr.js#5873dd
meta.var.expr.jsx#3f5dd8
meta.var.expr.ts#2b4dd2
meta.var.expr.tsx#2b4dd2
variable#734f34
keyword.control.import.js#734f34
keyword.control.import.jsx#855b3c
keyword.control.import.ts#5e412b
keyword.control.import.tsx#976744
keyword.control.from.js#ac754d
keyword.control.from.jsx#855b3c
keyword.control.from.ts#ac754d
keyword.control.from.tsx#855b3c
keyword.control.export.js#855b3c
keyword.control.export.jsx#855b3c
keyword.control.export.ts#855b3c
keyword.control.export.tsx#734f34
variable.parameter#855b3c
support.function#855b3c
meta.import.js#976744
meta.import.jsx#855b3c
meta.import.ts#855b3c
meta.import.tsx#855b3c
meta.paragraph.markdown#855b3c
entity.other.attribute-name.js#855b3c
entity.other.attribute-name.jsx#734f34
entity.other.attribute-name.ts#976744
entity.other.attribute-name.tsx#734f34
string.quoted.single.js#ac754d
string.quoted.single.jsx#855b3c
string.quoted.single.ts#734f34
string.quoted.single.tsx#a16e49
string.quoted.single.json#855b3c
support.class.promise.js#734f34
support.class.promise.jsx#5e412b
support.class.promise.ts#855b3c
support.class.promise.tsx#734f34
support.type.object.console.js#a16e49
support.type.object.console.jsx#855b3c
support.type.object.console.ts#734f34
support.type.object.console.tsx#5e412b
support.function.console.js#855b3c
support.function.console.jsx#976744
support.function.console.ts#855b3c
support.function.console.tsx#ac754d
punctuation.definition.block.js#976744
punctuation.definition.block.jsx#a16e49
punctuation.definition.block.ts#a16e49
punctuation.definition.block.tsx#5e412b
keyword#ad145b
keyword.control.default.js#ad145b
keyword.control.default.jsx#ad145b
keyword.control.default.ts#df1a74
keyword.control.default.tsx#ad145b
support.type.object.module.js#ad145b
support.type.object.module.jsx#c41766
support.type.object.module.ts#ad145b
support.type.object.module.tsx#ad145b
keyword.control.module.js#881047
keyword.control.module.jsx#ad145b
keyword.control.module.ts#96114e
keyword.control.module.tsx#c41766
keyword.operator.accessor#ad145b
invalid#ad145bunderline
constant.numeric#ad145b
constant.language.boolean#c41766
constant.language.null.js#ad145b
constant.language.null.jsx#7b0e40
constant.language.null.ts#ad145b
constant.language.null.tsx#96114e
entity.name.class#ad145bunderline
entity.name.function#ad145bunderline
entity.name.type#d2186dunderline
markup.heading.markdown#df1a74
punctuation.separator.comma.js#ad145b
punctuation.separator.comma.jsx#ad145b
punctuation.separator.comma.ts#96114e
punctuation.separator.comma.tsx#7b0e40
support.variable.property.js#96114e
support.variable.property.jsx#ad145b
support.variable.property.ts#7b0e40
support.variable.property.tsx#ad145b
support.type.primitive.js#ad145b
support.type.primitive.jsx#7b0e40
support.type.primitive.ts#c41766
support.type.primitive.tsx#d2186d
punctuation.definition.parameters.begin.js#758076
punctuation.definition.parameters.begin.jsx#9fa8a0
punctuation.definition.parameters.begin.ts#97a098
punctuation.definition.parameters.begin.tsx#828d83
punctuation.definition.parameters.end.js#677067
punctuation.definition.parameters.end.jsx#677067
punctuation.definition.parameters.end.ts#828d83
punctuation.definition.parameters.end.tsx#8f9990
punctuation.definition.parameters.end.js#8f9990
punctuation.definition.parameters.end.jsx#758076
punctuation.definition.parameters.end.ts#828d83
punctuation.definition.parameters.end.tsx#758076
markup.quote#828d83
meta.tag.js#828d83
meta.tag.jsx#828d83
meta.tag.ts#828d83
meta.tag.tsx#6e786f
meta.parameters.js#97a098
meta.parameters.jsx#828d83
meta.parameters.ts#97a098
meta.parameters.tsx#8f9990
meta.brace.square.js#828d83
meta.brace.square.jsx#828d83
meta.brace.square.ts#758076
meta.brace.square.tsx#758076
variable.other.class.js#758076
variable.other.class.jsx#828d83
variable.other.class.ts#758076
variable.other.class.tsx#758076
punctuation.separator.key-value.js#758076
punctuation.separator.key-value.jsx#828d83
punctuation.separator.key-value.ts#828d83
punctuation.separator.key-value.tsx#758076
storage.modifier.async.js#8f9990
storage.modifier.async.jsx#6e786f
storage.modifier.async.ts#758076
storage.modifier.async.tsx#758076
meta.brace.round.js#828d83
meta.brace.round.jsx#97a098
meta.brace.round.ts#6e786f
meta.brace.round.tsx#758076
constant.other.object.key.js#8f9990
constant.other.object.key.jsx#8f9990
constant.other.object.key.ts#828d83
constant.other.object.key.tsx#758076
entity.name.function.method#828d83
string.template#828d83
support.type.property-name.json#758076
variable.other.property.js#677067
variable.other.property.jsx#6e786f
variable.other.property.ts#8f9990
variable.other.property.tsx#828d83
support.constant#82397e
punctuation.separator.parameter.js#82397e
punctuation.separator.parameter.jsx#9e4599
punctuation.separator.parameter.ts#82397e
punctuation.separator.parameter.tsx#82397e
constant.character#70316c
constant.language#82397e
constant.other#82397e
comment#5b2858
markup.italic#70316c
meta.object-literal.key.js#82397e
meta.object-literal.key.jsx#82397e
meta.object-literal.key.ts#70316c
meta.object-literal.key.tsx#70316c
comment.block.documentation#70316c
comment.line.double-slash#9e4599
punctuation.accessor.js#70316c
punctuation.accessor.jsx#82397e
punctuation.accessor.ts#82397e
punctuation.accessor.tsx#82397e
variable.language#82397e
variable.other.object.js#5b2858
variable.other.object.jsx#82397e
variable.other.object.ts#82397e
variable.other.object.tsx#9e4599
variable.other.readwrite#662d62
variable.other.readwrite.js#82397e
variable.other.readwrite.jsx#70316c
variable.other.readwrite.ts#82397e
variable.other.readwrite.tsx#82397e
entity.other.inherited-class#a94aa3
support.class.builtin.js#82397e
support.class.builtin.jsx#a94aa3
support.class.builtin.ts#82397e
support.class.builtin.tsx#70316c
meta.tag.attributes.js#9e4599
meta.tag.attributes.jsx#82397e
meta.tag.attributes.ts#82397e
meta.tag.attributes.tsx#82397e

Shiki preview

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

Loading...