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#b2371funderline
source.go#2c91af
source.json#2c91af
source.css#2c91af
markup.italic#9c301b
punctuation.accessor.js#b2371f
punctuation.accessor.jsx#b2371f
punctuation.accessor.ts#8f2c19
punctuation.accessor.tsx#b2371f
source.js#822817
source.jsx#b2371f
source.ts#8f2c19
source.tsx#9c301b
storage.modifier.js#c83e23
storage.modifier.jsx#db4b2e
storage.modifier.ts#b2371f
storage.modifier.tsx#b2371f
storage.type#d54225
string.quoted.single.js#9c301b
string.quoted.single.jsx#b2371f
string.quoted.single.ts#b2371f
string.quoted.single.tsx#d54225
support.function.dom.js#822817
support.function.dom.jsx#b2371f
support.function.dom.ts#b2371f
support.function.dom.tsx#b2371f
support.variable.property.js#8f2c19
support.variable.property.jsx#b2371f
support.variable.property.ts#b2371f
support.variable.property.tsx#b2371f
variable.language.constructor#822817underline
variable.language.this#822817
meta.var.expr.js#db4b2e
meta.var.expr.jsx#c83e23
meta.var.expr.ts#b2371f
meta.var.expr.tsx#b2371f
variable#53234b
keyword.control.import.js#53234b
keyword.control.import.jsx#652b5c
keyword.control.import.ts#3e1a38
keyword.control.import.tsx#77336c
keyword.control.from.js#8c3c7f
keyword.control.from.jsx#652b5c
keyword.control.from.ts#8c3c7f
keyword.control.from.tsx#652b5c
keyword.control.export.js#652b5c
keyword.control.export.jsx#652b5c
keyword.control.export.ts#652b5c
keyword.control.export.tsx#53234b
variable.parameter#652b5c
support.function#652b5c
meta.import.js#77336c
meta.import.jsx#652b5c
meta.import.ts#652b5c
meta.import.tsx#652b5c
meta.paragraph.markdown#652b5c
entity.other.attribute-name.js#652b5c
entity.other.attribute-name.jsx#53234b
entity.other.attribute-name.ts#77336c
entity.other.attribute-name.tsx#53234b
string.quoted.single.js#8c3c7f
string.quoted.single.jsx#652b5c
string.quoted.single.ts#53234b
string.quoted.single.tsx#823776
string.quoted.single.json#652b5c
support.class.promise.js#53234b
support.class.promise.jsx#3e1a38
support.class.promise.ts#652b5c
support.class.promise.tsx#53234b
support.type.object.console.js#823776
support.type.object.console.jsx#652b5c
support.type.object.console.ts#53234b
support.type.object.console.tsx#3e1a38
support.function.console.js#652b5c
support.function.console.jsx#77336c
support.function.console.ts#652b5c
support.function.console.tsx#8c3c7f
punctuation.definition.block.js#77336c
punctuation.definition.block.jsx#823776
punctuation.definition.block.ts#823776
punctuation.definition.block.tsx#3e1a38
keyword#2c91af
keyword.control.default.js#2c91af
keyword.control.default.jsx#2c91af
keyword.control.default.ts#43afd0
keyword.control.default.tsx#2c91af
support.type.object.module.js#2c91af
support.type.object.module.jsx#31a1c3
support.type.object.module.ts#2c91af
support.type.object.module.tsx#2c91af
keyword.control.module.js#24768e
keyword.control.module.jsx#2c91af
keyword.control.module.ts#27809b
keyword.control.module.tsx#31a1c3
keyword.operator.accessor#2c91af
invalid#2c91afunderline
constant.numeric#2c91af
constant.language.boolean#31a1c3
constant.language.null.js#2c91af
constant.language.null.jsx#216b82
constant.language.null.ts#2c91af
constant.language.null.tsx#27809b
entity.name.class#2c91afunderline
entity.name.function#2c91afunderline
entity.name.type#37aacdunderline
markup.heading.markdown#43afd0
punctuation.separator.comma.js#2c91af
punctuation.separator.comma.jsx#2c91af
punctuation.separator.comma.ts#27809b
punctuation.separator.comma.tsx#216b82
support.variable.property.js#27809b
support.variable.property.jsx#2c91af
support.variable.property.ts#216b82
support.variable.property.tsx#2c91af
support.type.primitive.js#2c91af
support.type.primitive.jsx#216b82
support.type.primitive.ts#31a1c3
support.type.primitive.tsx#37aacd
punctuation.definition.parameters.begin.js#16243f
punctuation.definition.parameters.begin.jsx#2a477c
punctuation.definition.parameters.begin.ts#264070
punctuation.definition.parameters.begin.tsx#1c2f52
punctuation.definition.parameters.end.js#0e1728
punctuation.definition.parameters.end.jsx#0e1728
punctuation.definition.parameters.end.ts#1c2f52
punctuation.definition.parameters.end.tsx#223a65
punctuation.definition.parameters.end.js#223a65
punctuation.definition.parameters.end.jsx#16243f
punctuation.definition.parameters.end.ts#1c2f52
punctuation.definition.parameters.end.tsx#16243f
markup.quote#1c2f52
meta.tag.js#1c2f52
meta.tag.jsx#1c2f52
meta.tag.ts#1c2f52
meta.tag.tsx#121d34
meta.parameters.js#264070
meta.parameters.jsx#1c2f52
meta.parameters.ts#264070
meta.parameters.tsx#223a65
meta.brace.square.js#1c2f52
meta.brace.square.jsx#1c2f52
meta.brace.square.ts#16243f
meta.brace.square.tsx#16243f
variable.other.class.js#16243f
variable.other.class.jsx#1c2f52
variable.other.class.ts#16243f
variable.other.class.tsx#16243f
punctuation.separator.key-value.js#16243f
punctuation.separator.key-value.jsx#1c2f52
punctuation.separator.key-value.ts#1c2f52
punctuation.separator.key-value.tsx#16243f
storage.modifier.async.js#223a65
storage.modifier.async.jsx#121d34
storage.modifier.async.ts#16243f
storage.modifier.async.tsx#16243f
meta.brace.round.js#1c2f52
meta.brace.round.jsx#264070
meta.brace.round.ts#121d34
meta.brace.round.tsx#16243f
constant.other.object.key.js#223a65
constant.other.object.key.jsx#223a65
constant.other.object.key.ts#1c2f52
constant.other.object.key.tsx#16243f
entity.name.function.method#1c2f52
string.template#1c2f52
support.type.property-name.json#16243f
variable.other.property.js#0e1728
variable.other.property.jsx#121d34
variable.other.property.ts#223a65
variable.other.property.tsx#1c2f52
support.constant#5e337d
punctuation.separator.parameter.js#5e337d
punctuation.separator.parameter.jsx#743f9a
punctuation.separator.parameter.ts#5e337d
punctuation.separator.parameter.tsx#5e337d
constant.character#502c6b
constant.language#5e337d
constant.other#5e337d
comment#402355
markup.italic#502c6b
meta.object-literal.key.js#5e337d
meta.object-literal.key.jsx#5e337d
meta.object-literal.key.ts#502c6b
meta.object-literal.key.tsx#502c6b
comment.block.documentation#502c6b
comment.line.double-slash#743f9a
punctuation.accessor.js#502c6b
punctuation.accessor.jsx#5e337d
punctuation.accessor.ts#5e337d
punctuation.accessor.tsx#5e337d
variable.language#5e337d
variable.other.object.js#402355
variable.other.object.jsx#5e337d
variable.other.object.ts#5e337d
variable.other.object.tsx#743f9a
variable.other.readwrite#482760
variable.other.readwrite.js#5e337d
variable.other.readwrite.jsx#502c6b
variable.other.readwrite.ts#5e337d
variable.other.readwrite.tsx#5e337d
entity.other.inherited-class#7c43a5
support.class.builtin.js#5e337d
support.class.builtin.jsx#7c43a5
support.class.builtin.ts#5e337d
support.class.builtin.tsx#502c6b
meta.tag.attributes.js#743f9a
meta.tag.attributes.jsx#5e337d
meta.tag.attributes.ts#5e337d
meta.tag.attributes.tsx#5e337d

Shiki preview

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

Loading...

Niketa Future Theme Light by selfrefactor - VS Code Theme