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#28305dunderline
source.go#c85044
source.json#c85044
source.css#c85044
markup.italic#20274b
punctuation.accessor.js#28305d
punctuation.accessor.jsx#28305d
punctuation.accessor.ts#1c2140
punctuation.accessor.tsx#28305d
source.js#171c36
source.jsx#28305d
source.ts#1c2140
source.tsx#20274b
storage.modifier.js#30396f
storage.modifier.jsx#394484
storage.modifier.ts#28305d
storage.modifier.tsx#28305d
storage.type#343e7a
string.quoted.single.js#20274b
string.quoted.single.jsx#28305d
string.quoted.single.ts#28305d
string.quoted.single.tsx#343e7a
support.function.dom.js#171c36
support.function.dom.jsx#28305d
support.function.dom.ts#28305d
support.function.dom.tsx#28305d
support.variable.property.js#1c2140
support.variable.property.jsx#28305d
support.variable.property.ts#28305d
support.variable.property.tsx#28305d
variable.language.constructor#171c36underline
variable.language.this#171c36
meta.var.expr.js#394484
meta.var.expr.jsx#30396f
meta.var.expr.ts#28305d
meta.var.expr.tsx#28305d
variable#718951
keyword.control.import.js#718951
keyword.control.import.jsx#7e995b
keyword.control.import.ts#617646
keyword.control.import.tsx#8ba568
keyword.control.from.js#99b17b
keyword.control.from.jsx#7e995b
keyword.control.from.ts#99b17b
keyword.control.from.tsx#7e995b
keyword.control.export.js#7e995b
keyword.control.export.jsx#7e995b
keyword.control.export.ts#7e995b
keyword.control.export.tsx#718951
variable.parameter#7e995b
support.function#7e995b
meta.import.js#8ba568
meta.import.jsx#7e995b
meta.import.ts#7e995b
meta.import.tsx#7e995b
meta.paragraph.markdown#7e995b
entity.other.attribute-name.js#7e995b
entity.other.attribute-name.jsx#718951
entity.other.attribute-name.ts#8ba568
entity.other.attribute-name.tsx#718951
string.quoted.single.js#99b17b
string.quoted.single.jsx#7e995b
string.quoted.single.ts#718951
string.quoted.single.tsx#92ab72
string.quoted.single.json#7e995b
support.class.promise.js#718951
support.class.promise.jsx#617646
support.class.promise.ts#7e995b
support.class.promise.tsx#718951
support.type.object.console.js#92ab72
support.type.object.console.jsx#7e995b
support.type.object.console.ts#718951
support.type.object.console.tsx#617646
support.function.console.js#7e995b
support.function.console.jsx#8ba568
support.function.console.ts#7e995b
support.function.console.tsx#99b17b
punctuation.definition.block.js#8ba568
punctuation.definition.block.jsx#92ab72
punctuation.definition.block.ts#92ab72
punctuation.definition.block.tsx#617646
keyword#c85044
keyword.control.default.js#c85044
keyword.control.default.jsx#c85044
keyword.control.default.ts#d5796f
keyword.control.default.tsx#c85044
support.type.object.module.js#c85044
support.type.object.module.jsx#ce6258
support.type.object.module.ts#c85044
support.type.object.module.tsx#c85044
keyword.control.module.js#b03f34
keyword.control.module.jsx#c85044
keyword.control.module.ts#bb4337
keyword.control.module.tsx#ce6258
keyword.operator.accessor#c85044
invalid#c85044underline
constant.numeric#c85044
constant.language.boolean#ce6258
constant.language.null.js#c85044
constant.language.null.jsx#a43b30
constant.language.null.ts#c85044
constant.language.null.tsx#bb4337
entity.name.class#c85044underline
entity.name.function#c85044underline
entity.name.type#d16e64underline
markup.heading.markdown#d5796f
punctuation.separator.comma.js#c85044
punctuation.separator.comma.jsx#c85044
punctuation.separator.comma.ts#bb4337
punctuation.separator.comma.tsx#a43b30
support.variable.property.js#bb4337
support.variable.property.jsx#c85044
support.variable.property.ts#a43b30
support.variable.property.tsx#c85044
support.type.primitive.js#c85044
support.type.primitive.jsx#a43b30
support.type.primitive.ts#ce6258
support.type.primitive.tsx#d16e64
punctuation.definition.parameters.begin.js#83345c
punctuation.definition.parameters.begin.jsx#b94f85
punctuation.definition.parameters.begin.ts#b2477d
punctuation.definition.parameters.begin.tsx#953b69
punctuation.definition.parameters.end.js#6d2b4c
punctuation.definition.parameters.end.jsx#6d2b4c
punctuation.definition.parameters.end.ts#953b69
punctuation.definition.parameters.end.tsx#a74275
punctuation.definition.parameters.end.js#a74275
punctuation.definition.parameters.end.jsx#83345c
punctuation.definition.parameters.end.ts#953b69
punctuation.definition.parameters.end.tsx#83345c
markup.quote#953b69
meta.tag.js#953b69
meta.tag.jsx#953b69
meta.tag.ts#953b69
meta.tag.tsx#782f54
meta.parameters.js#b2477d
meta.parameters.jsx#953b69
meta.parameters.ts#b2477d
meta.parameters.tsx#a74275
meta.brace.square.js#953b69
meta.brace.square.jsx#953b69
meta.brace.square.ts#83345c
meta.brace.square.tsx#83345c
variable.other.class.js#83345c
variable.other.class.jsx#953b69
variable.other.class.ts#83345c
variable.other.class.tsx#83345c
punctuation.separator.key-value.js#83345c
punctuation.separator.key-value.jsx#953b69
punctuation.separator.key-value.ts#953b69
punctuation.separator.key-value.tsx#83345c
storage.modifier.async.js#a74275
storage.modifier.async.jsx#782f54
storage.modifier.async.ts#83345c
storage.modifier.async.tsx#83345c
meta.brace.round.js#953b69
meta.brace.round.jsx#b2477d
meta.brace.round.ts#782f54
meta.brace.round.tsx#83345c
constant.other.object.key.js#a74275
constant.other.object.key.jsx#a74275
constant.other.object.key.ts#953b69
constant.other.object.key.tsx#83345c
entity.name.function.method#953b69
string.template#953b69
support.type.property-name.json#83345c
variable.other.property.js#6d2b4c
variable.other.property.jsx#782f54
variable.other.property.ts#a74275
variable.other.property.tsx#953b69
support.constant#6c48c4
punctuation.separator.parameter.js#6c48c4
punctuation.separator.parameter.jsx#8567ce
punctuation.separator.parameter.ts#6c48c4
punctuation.separator.parameter.tsx#6c48c4
constant.character#5f3bb7
constant.language#6c48c4
constant.other#6c48c4
comment#5334a0
markup.italic#5f3bb7
meta.object-literal.key.js#6c48c4
meta.object-literal.key.jsx#6c48c4
meta.object-literal.key.ts#5f3bb7
meta.object-literal.key.tsx#5f3bb7
comment.block.documentation#5f3bb7
comment.line.double-slash#8567ce
punctuation.accessor.js#5f3bb7
punctuation.accessor.jsx#6c48c4
punctuation.accessor.ts#6c48c4
punctuation.accessor.tsx#6c48c4
variable.language#6c48c4
variable.other.object.js#5334a0
variable.other.object.jsx#6c48c4
variable.other.object.ts#6c48c4
variable.other.object.tsx#8567ce
variable.other.readwrite#5937ac
variable.other.readwrite.js#6c48c4
variable.other.readwrite.jsx#5f3bb7
variable.other.readwrite.ts#6c48c4
variable.other.readwrite.tsx#6c48c4
entity.other.inherited-class#8e72d2
support.class.builtin.js#6c48c4
support.class.builtin.jsx#8e72d2
support.class.builtin.ts#6c48c4
support.class.builtin.tsx#5f3bb7
meta.tag.attributes.js#8567ce
meta.tag.attributes.jsx#6c48c4
meta.tag.attributes.ts#6c48c4
meta.tag.attributes.tsx#6c48c4

Shiki preview

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

Loading...