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#5a2779underline
source.go#fe5e53
source.json#fe5e53
source.css#fe5e53
markup.italic#4c2166
punctuation.accessor.js#5a2779
punctuation.accessor.jsx#5a2779
punctuation.accessor.ts#431d5a
punctuation.accessor.tsx#5a2779
source.js#3a194f
source.jsx#5a2779
source.ts#431d5a
source.tsx#4c2166
storage.modifier.js#682d8c
storage.modifier.jsx#7935a3
storage.modifier.ts#5a2779
storage.modifier.tsx#5a2779
storage.type#713198
string.quoted.single.js#4c2166
string.quoted.single.jsx#5a2779
string.quoted.single.ts#5a2779
string.quoted.single.tsx#713198
support.function.dom.js#3a194f
support.function.dom.jsx#5a2779
support.function.dom.ts#5a2779
support.function.dom.tsx#5a2779
support.variable.property.js#431d5a
support.variable.property.jsx#5a2779
support.variable.property.ts#5a2779
support.variable.property.tsx#5a2779
variable.language.constructor#3a194funderline
variable.language.this#3a194f
meta.var.expr.js#7935a3
meta.var.expr.jsx#682d8c
meta.var.expr.ts#5a2779
meta.var.expr.tsx#5a2779
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#fe5e53
keyword.control.default.js#fe5e53
keyword.control.default.jsx#fe5e53
keyword.control.default.ts#fe928b
keyword.control.default.tsx#fe5e53
support.type.object.module.js#fe5e53
support.type.object.module.jsx#fe766c
support.type.object.module.ts#fe5e53
support.type.object.module.tsx#fe5e53
keyword.control.module.js#fe382a
keyword.control.module.jsx#fe5e53
keyword.control.module.ts#fe463a
keyword.control.module.tsx#fe766c
keyword.operator.accessor#fe5e53
invalid#fe5e53underline
constant.numeric#fe5e53
constant.language.boolean#fe766c
constant.language.null.js#fe5e53
constant.language.null.jsx#fe2a1b
constant.language.null.ts#fe5e53
constant.language.null.tsx#fe463a
entity.name.class#fe5e53underline
entity.name.function#fe5e53underline
entity.name.type#fe847cunderline
markup.heading.markdown#fe928b
punctuation.separator.comma.js#fe5e53
punctuation.separator.comma.jsx#fe5e53
punctuation.separator.comma.ts#fe463a
punctuation.separator.comma.tsx#fe2a1b
support.variable.property.js#fe463a
support.variable.property.jsx#fe5e53
support.variable.property.ts#fe2a1b
support.variable.property.tsx#fe5e53
support.type.primitive.js#fe5e53
support.type.primitive.jsx#fe2a1b
support.type.primitive.ts#fe766c
support.type.primitive.tsx#fe847c
punctuation.definition.parameters.begin.js#2e58a8
punctuation.definition.parameters.begin.jsx#5781d1
punctuation.definition.parameters.begin.ts#4b78cd
punctuation.definition.parameters.begin.tsx#3463bc
punctuation.definition.parameters.end.js#284b90
punctuation.definition.parameters.end.jsx#284b90
punctuation.definition.parameters.end.ts#3463bc
punctuation.definition.parameters.end.tsx#3f6fca
punctuation.definition.parameters.end.js#3f6fca
punctuation.definition.parameters.end.jsx#2e58a8
punctuation.definition.parameters.end.ts#3463bc
punctuation.definition.parameters.end.tsx#2e58a8
markup.quote#3463bc
meta.tag.js#3463bc
meta.tag.jsx#3463bc
meta.tag.ts#3463bc
meta.tag.tsx#2b529c
meta.parameters.js#4b78cd
meta.parameters.jsx#3463bc
meta.parameters.ts#4b78cd
meta.parameters.tsx#3f6fca
meta.brace.square.js#3463bc
meta.brace.square.jsx#3463bc
meta.brace.square.ts#2e58a8
meta.brace.square.tsx#2e58a8
variable.other.class.js#2e58a8
variable.other.class.jsx#3463bc
variable.other.class.ts#2e58a8
variable.other.class.tsx#2e58a8
punctuation.separator.key-value.js#2e58a8
punctuation.separator.key-value.jsx#3463bc
punctuation.separator.key-value.ts#3463bc
punctuation.separator.key-value.tsx#2e58a8
storage.modifier.async.js#3f6fca
storage.modifier.async.jsx#2b529c
storage.modifier.async.ts#2e58a8
storage.modifier.async.tsx#2e58a8
meta.brace.round.js#3463bc
meta.brace.round.jsx#4b78cd
meta.brace.round.ts#2b529c
meta.brace.round.tsx#2e58a8
constant.other.object.key.js#3f6fca
constant.other.object.key.jsx#3f6fca
constant.other.object.key.ts#3463bc
constant.other.object.key.tsx#2e58a8
entity.name.function.method#3463bc
string.template#3463bc
support.type.property-name.json#2e58a8
variable.other.property.js#284b90
variable.other.property.jsx#2b529c
variable.other.property.ts#3f6fca
variable.other.property.tsx#3463bc
support.constant#b66ae4
punctuation.separator.parameter.js#b66ae4
punctuation.separator.parameter.jsx#c78dea
punctuation.separator.parameter.ts#b66ae4
punctuation.separator.parameter.tsx#b66ae4
constant.character#ab54e0
constant.language#b66ae4
constant.other#b66ae4
comment#9e3bdb
markup.italic#ab54e0
meta.object-literal.key.js#b66ae4
meta.object-literal.key.jsx#b66ae4
meta.object-literal.key.ts#ab54e0
meta.object-literal.key.tsx#ab54e0
comment.block.documentation#ab54e0
comment.line.double-slash#c78dea
punctuation.accessor.js#ab54e0
punctuation.accessor.jsx#b66ae4
punctuation.accessor.ts#b66ae4
punctuation.accessor.tsx#b66ae4
variable.language#b66ae4
variable.other.object.js#9e3bdb
variable.other.object.jsx#b66ae4
variable.other.object.ts#b66ae4
variable.other.object.tsx#c78dea
variable.other.readwrite#a547de
variable.other.readwrite.js#b66ae4
variable.other.readwrite.jsx#ab54e0
variable.other.readwrite.ts#b66ae4
variable.other.readwrite.tsx#b66ae4
entity.other.inherited-class#cd99ed
support.class.builtin.js#b66ae4
support.class.builtin.jsx#cd99ed
support.class.builtin.ts#b66ae4
support.class.builtin.tsx#ab54e0
meta.tag.attributes.js#c78dea
meta.tag.attributes.jsx#b66ae4
meta.tag.attributes.ts#b66ae4
meta.tag.attributes.tsx#b66ae4

Shiki preview

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

Loading...