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#a24b2bunderline
source.go#192112
source.json#192112
source.css#192112
markup.italic#8e4226
punctuation.accessor.js#a24b2b
punctuation.accessor.jsx#a24b2b
punctuation.accessor.ts#823c22
punctuation.accessor.tsx#a24b2b
source.js#76361f
source.jsx#a24b2b
source.ts#823c22
source.tsx#8e4226
storage.modifier.js#b65430
storage.modifier.jsx#cb613a
storage.modifier.ts#a24b2b
storage.modifier.tsx#a24b2b
storage.type#c25a34
string.quoted.single.js#8e4226
string.quoted.single.jsx#a24b2b
string.quoted.single.ts#a24b2b
string.quoted.single.tsx#c25a34
support.function.dom.js#76361f
support.function.dom.jsx#a24b2b
support.function.dom.ts#a24b2b
support.function.dom.tsx#a24b2b
support.variable.property.js#823c22
support.variable.property.jsx#a24b2b
support.variable.property.ts#a24b2b
support.variable.property.tsx#a24b2b
variable.language.constructor#76361funderline
variable.language.this#76361f
meta.var.expr.js#cb613a
meta.var.expr.jsx#b65430
meta.var.expr.ts#a24b2b
meta.var.expr.tsx#a24b2b
variable#bd356f
keyword.control.import.js#bd356f
keyword.control.import.jsx#ca417d
keyword.control.import.ts#a52e61
keyword.control.import.tsx#d0558a
keyword.control.from.js#d66d9a
keyword.control.from.jsx#ca417d
keyword.control.from.ts#d66d9a
keyword.control.from.tsx#ca417d
keyword.control.export.js#ca417d
keyword.control.export.jsx#ca417d
keyword.control.export.ts#ca417d
keyword.control.export.tsx#bd356f
variable.parameter#ca417d
support.function#ca417d
meta.import.js#d0558a
meta.import.jsx#ca417d
meta.import.ts#ca417d
meta.import.tsx#ca417d
meta.paragraph.markdown#ca417d
entity.other.attribute-name.js#ca417d
entity.other.attribute-name.jsx#bd356f
entity.other.attribute-name.ts#d0558a
entity.other.attribute-name.tsx#bd356f
string.quoted.single.js#d66d9a
string.quoted.single.jsx#ca417d
string.quoted.single.ts#bd356f
string.quoted.single.tsx#d36192
string.quoted.single.json#ca417d
support.class.promise.js#bd356f
support.class.promise.jsx#a52e61
support.class.promise.ts#ca417d
support.class.promise.tsx#bd356f
support.type.object.console.js#d36192
support.type.object.console.jsx#ca417d
support.type.object.console.ts#bd356f
support.type.object.console.tsx#a52e61
support.function.console.js#ca417d
support.function.console.jsx#d0558a
support.function.console.ts#ca417d
support.function.console.tsx#d66d9a
punctuation.definition.block.js#d0558a
punctuation.definition.block.jsx#d36192
punctuation.definition.block.ts#d36192
punctuation.definition.block.tsx#a52e61
keyword#192112
keyword.control.default.js#192112
keyword.control.default.jsx#192112
keyword.control.default.ts#344526
keyword.control.default.tsx#192112
support.type.object.module.js#192112
support.type.object.module.jsx#25321b
support.type.object.module.ts#192112
support.type.object.module.tsx#192112
keyword.control.module.js#050704
keyword.control.module.jsx#192112
keyword.control.module.ts#0c1109
keyword.control.module.tsx#25321b
keyword.operator.accessor#192112
invalid#192112underline
constant.numeric#192112
constant.language.boolean#25321b
constant.language.null.js#192112
constant.language.null.jsx#000000
constant.language.null.ts#192112
constant.language.null.tsx#0c1109
entity.name.class#192112underline
entity.name.function#192112underline
entity.name.type#2d3b20underline
markup.heading.markdown#344526
punctuation.separator.comma.js#192112
punctuation.separator.comma.jsx#192112
punctuation.separator.comma.ts#0c1109
punctuation.separator.comma.tsx#000000
support.variable.property.js#0c1109
support.variable.property.jsx#192112
support.variable.property.ts#000000
support.variable.property.tsx#192112
support.type.primitive.js#192112
support.type.primitive.jsx#000000
support.type.primitive.ts#25321b
support.type.primitive.tsx#2d3b20
punctuation.definition.parameters.begin.js#235291
punctuation.definition.parameters.begin.jsx#3778cf
punctuation.definition.parameters.begin.ts#3070c7
punctuation.definition.parameters.begin.tsx#285ea6
punctuation.definition.parameters.end.js#1d4479
punctuation.definition.parameters.end.jsx#1d4479
punctuation.definition.parameters.end.ts#285ea6
punctuation.definition.parameters.end.tsx#2d69bb
punctuation.definition.parameters.end.js#2d69bb
punctuation.definition.parameters.end.jsx#235291
punctuation.definition.parameters.end.ts#285ea6
punctuation.definition.parameters.end.tsx#235291
markup.quote#285ea6
meta.tag.js#285ea6
meta.tag.jsx#285ea6
meta.tag.ts#285ea6
meta.tag.tsx#204b85
meta.parameters.js#3070c7
meta.parameters.jsx#285ea6
meta.parameters.ts#3070c7
meta.parameters.tsx#2d69bb
meta.brace.square.js#285ea6
meta.brace.square.jsx#285ea6
meta.brace.square.ts#235291
meta.brace.square.tsx#235291
variable.other.class.js#235291
variable.other.class.jsx#285ea6
variable.other.class.ts#235291
variable.other.class.tsx#235291
punctuation.separator.key-value.js#235291
punctuation.separator.key-value.jsx#285ea6
punctuation.separator.key-value.ts#285ea6
punctuation.separator.key-value.tsx#235291
storage.modifier.async.js#2d69bb
storage.modifier.async.jsx#204b85
storage.modifier.async.ts#235291
storage.modifier.async.tsx#235291
meta.brace.round.js#285ea6
meta.brace.round.jsx#3070c7
meta.brace.round.ts#204b85
meta.brace.round.tsx#235291
constant.other.object.key.js#2d69bb
constant.other.object.key.jsx#2d69bb
constant.other.object.key.ts#285ea6
constant.other.object.key.tsx#235291
entity.name.function.method#285ea6
string.template#285ea6
support.type.property-name.json#235291
variable.other.property.js#1d4479
variable.other.property.jsx#204b85
variable.other.property.ts#2d69bb
variable.other.property.tsx#285ea6
support.constant#6d1f36
punctuation.separator.parameter.js#6d1f36
punctuation.separator.parameter.jsx#8d2845
punctuation.separator.parameter.ts#6d1f36
punctuation.separator.parameter.tsx#6d1f36
constant.character#59192c
constant.language#6d1f36
constant.other#6d1f36
comment#411320
markup.italic#59192c
meta.object-literal.key.js#6d1f36
meta.object-literal.key.jsx#6d1f36
meta.object-literal.key.ts#59192c
meta.object-literal.key.tsx#59192c
comment.block.documentation#59192c
comment.line.double-slash#8d2845
punctuation.accessor.js#59192c
punctuation.accessor.jsx#6d1f36
punctuation.accessor.ts#6d1f36
punctuation.accessor.tsx#6d1f36
variable.language#6d1f36
variable.other.object.js#411320
variable.other.object.jsx#6d1f36
variable.other.object.ts#6d1f36
variable.other.object.tsx#8d2845
variable.other.readwrite#4d1626
variable.other.readwrite.js#6d1f36
variable.other.readwrite.jsx#59192c
variable.other.readwrite.ts#6d1f36
variable.other.readwrite.tsx#6d1f36
entity.other.inherited-class#992b4b
support.class.builtin.js#6d1f36
support.class.builtin.jsx#992b4b
support.class.builtin.ts#6d1f36
support.class.builtin.tsx#59192c
meta.tag.attributes.js#8d2845
meta.tag.attributes.jsx#6d1f36
meta.tag.attributes.ts#6d1f36
meta.tag.attributes.tsx#6d1f36

Shiki preview

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

Loading...

Niketa Future Theme Light by selfrefactor - VS Code Theme