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#063672underline
source.go#3866d5
source.json#3866d5
source.css#3866d5
markup.italic#052a5a
punctuation.accessor.js#063672
punctuation.accessor.jsx#063672
punctuation.accessor.ts#04234b
punctuation.accessor.tsx#063672
source.js#031d3d
source.jsx#063672
source.ts#04234b
source.tsx#052a5a
storage.modifier.js#07418a
storage.modifier.jsx#094fa7
storage.modifier.ts#063672
storage.modifier.tsx#063672
storage.type#084899
string.quoted.single.js#052a5a
string.quoted.single.jsx#063672
string.quoted.single.ts#063672
string.quoted.single.tsx#084899
support.function.dom.js#031d3d
support.function.dom.jsx#063672
support.function.dom.ts#063672
support.function.dom.tsx#063672
support.variable.property.js#04234b
support.variable.property.jsx#063672
support.variable.property.ts#063672
support.variable.property.tsx#063672
variable.language.constructor#031d3dunderline
variable.language.this#031d3d
meta.var.expr.js#094fa7
meta.var.expr.jsx#07418a
meta.var.expr.ts#063672
meta.var.expr.tsx#063672
variable#826f36
keyword.control.import.js#826f36
keyword.control.import.jsx#947e3e
keyword.control.import.ts#6c5c2d
keyword.control.import.tsx#a68d46
keyword.control.from.js#b79d53
keyword.control.from.jsx#947e3e
keyword.control.from.ts#b79d53
keyword.control.from.tsx#947e3e
keyword.control.export.js#947e3e
keyword.control.export.jsx#947e3e
keyword.control.export.ts#947e3e
keyword.control.export.tsx#826f36
variable.parameter#947e3e
support.function#947e3e
meta.import.js#a68d46
meta.import.jsx#947e3e
meta.import.ts#947e3e
meta.import.tsx#947e3e
meta.paragraph.markdown#947e3e
entity.other.attribute-name.js#947e3e
entity.other.attribute-name.jsx#826f36
entity.other.attribute-name.ts#a68d46
entity.other.attribute-name.tsx#826f36
string.quoted.single.js#b79d53
string.quoted.single.jsx#947e3e
string.quoted.single.ts#826f36
string.quoted.single.tsx#b1964a
string.quoted.single.json#947e3e
support.class.promise.js#826f36
support.class.promise.jsx#6c5c2d
support.class.promise.ts#947e3e
support.class.promise.tsx#826f36
support.type.object.console.js#b1964a
support.type.object.console.jsx#947e3e
support.type.object.console.ts#826f36
support.type.object.console.tsx#6c5c2d
support.function.console.js#947e3e
support.function.console.jsx#a68d46
support.function.console.ts#947e3e
support.function.console.tsx#b79d53
punctuation.definition.block.js#a68d46
punctuation.definition.block.jsx#b1964a
punctuation.definition.block.ts#b1964a
punctuation.definition.block.tsx#6c5c2d
keyword#3866d5
keyword.control.default.js#3866d5
keyword.control.default.jsx#3866d5
keyword.control.default.ts#6689df
keyword.control.default.tsx#3866d5
support.type.object.module.js#3866d5
support.type.object.module.jsx#4d76d9
support.type.object.module.ts#3866d5
support.type.object.module.tsx#3866d5
keyword.control.module.js#2853bc
keyword.control.module.jsx#3866d5
keyword.control.module.ts#2a58c9
keyword.control.module.tsx#4d76d9
keyword.operator.accessor#3866d5
invalid#3866d5underline
constant.numeric#3866d5
constant.language.boolean#4d76d9
constant.language.null.js#3866d5
constant.language.null.jsx#254db0
constant.language.null.ts#3866d5
constant.language.null.tsx#2a58c9
entity.name.class#3866d5underline
entity.name.function#3866d5underline
entity.name.type#5a7fdcunderline
markup.heading.markdown#6689df
punctuation.separator.comma.js#3866d5
punctuation.separator.comma.jsx#3866d5
punctuation.separator.comma.ts#2a58c9
punctuation.separator.comma.tsx#254db0
support.variable.property.js#2a58c9
support.variable.property.jsx#3866d5
support.variable.property.ts#254db0
support.variable.property.tsx#3866d5
support.type.primitive.js#3866d5
support.type.primitive.jsx#254db0
support.type.primitive.ts#4d76d9
support.type.primitive.tsx#5a7fdc
punctuation.definition.parameters.begin.js#89ac55
punctuation.definition.parameters.begin.jsx#afc68c
punctuation.definition.parameters.begin.ts#a8c181
punctuation.definition.parameters.begin.tsx#95b466
punctuation.definition.parameters.end.js#79984a
punctuation.definition.parameters.end.jsx#79984a
punctuation.definition.parameters.end.ts#95b466
punctuation.definition.parameters.end.tsx#a1bc77
punctuation.definition.parameters.end.js#a1bc77
punctuation.definition.parameters.end.jsx#89ac55
punctuation.definition.parameters.end.ts#95b466
punctuation.definition.parameters.end.tsx#89ac55
markup.quote#95b466
meta.tag.js#95b466
meta.tag.jsx#95b466
meta.tag.ts#95b466
meta.tag.tsx#81a24f
meta.parameters.js#a8c181
meta.parameters.jsx#95b466
meta.parameters.ts#a8c181
meta.parameters.tsx#a1bc77
meta.brace.square.js#95b466
meta.brace.square.jsx#95b466
meta.brace.square.ts#89ac55
meta.brace.square.tsx#89ac55
variable.other.class.js#89ac55
variable.other.class.jsx#95b466
variable.other.class.ts#89ac55
variable.other.class.tsx#89ac55
punctuation.separator.key-value.js#89ac55
punctuation.separator.key-value.jsx#95b466
punctuation.separator.key-value.ts#95b466
punctuation.separator.key-value.tsx#89ac55
storage.modifier.async.js#a1bc77
storage.modifier.async.jsx#81a24f
storage.modifier.async.ts#89ac55
storage.modifier.async.tsx#89ac55
meta.brace.round.js#95b466
meta.brace.round.jsx#a8c181
meta.brace.round.ts#81a24f
meta.brace.round.tsx#89ac55
constant.other.object.key.js#a1bc77
constant.other.object.key.jsx#a1bc77
constant.other.object.key.ts#95b466
constant.other.object.key.tsx#89ac55
entity.name.function.method#95b466
string.template#95b466
support.type.property-name.json#89ac55
variable.other.property.js#79984a
variable.other.property.jsx#81a24f
variable.other.property.ts#a1bc77
variable.other.property.tsx#95b466
support.constant#b1336b
punctuation.separator.parameter.js#b1336b
punctuation.separator.parameter.jsx#c9447e
punctuation.separator.parameter.ts#b1336b
punctuation.separator.parameter.tsx#b1336b
constant.character#9d2d5e
constant.language#b1336b
constant.other#b1336b
comment#852650
markup.italic#9d2d5e
meta.object-literal.key.js#b1336b
meta.object-literal.key.jsx#b1336b
meta.object-literal.key.ts#9d2d5e
meta.object-literal.key.tsx#9d2d5e
comment.block.documentation#9d2d5e
comment.line.double-slash#c9447e
punctuation.accessor.js#9d2d5e
punctuation.accessor.jsx#b1336b
punctuation.accessor.ts#b1336b
punctuation.accessor.tsx#b1336b
variable.language#b1336b
variable.other.object.js#852650
variable.other.object.jsx#b1336b
variable.other.object.ts#b1336b
variable.other.object.tsx#c9447e
variable.other.readwrite#912a57
variable.other.readwrite.js#b1336b
variable.other.readwrite.jsx#9d2d5e
variable.other.readwrite.ts#b1336b
variable.other.readwrite.tsx#b1336b
entity.other.inherited-class#cc5086
support.class.builtin.js#b1336b
support.class.builtin.jsx#cc5086
support.class.builtin.ts#b1336b
support.class.builtin.tsx#9d2d5e
meta.tag.attributes.js#c9447e
meta.tag.attributes.jsx#b1336b
meta.tag.attributes.ts#b1336b
meta.tag.attributes.tsx#b1336b

Shiki preview

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

Loading...