Skip to main content
Coding Theme

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#F1F1F1
  • editor.findMatchBackground#87a192
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.inactiveSelectionBackground#aaab9c66
  • editor.lineHighlightBackground#F1F1F1
  • 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#F1F1F1
  • 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#C990EBunderline
markup.italic#b66ae4
text.html.derivative#AA51DF
punctuation.accessor.js#b66ae4
punctuation.accessor.jsx#b66ae4
punctuation.accessor.ts#BC77E6
punctuation.accessor.tsx#b66ae4
source.js#BC77E6
source.jsx#b66ae4
source.ts#b66ae4
source.tsx#B05DE2
storage.modifier.js#b66ae4
storage.modifier.jsx#C990EB
storage.modifier.ts#b66ae4
storage.modifier.tsx#C283E9
punctuation.separator.key-value.js#b66ae4
punctuation.separator.key-value.jsx#A344DD
punctuation.separator.key-value.ts#BC77E6
punctuation.separator.key-value.tsx#B05DE2
storage.type#b66ae4
string.quoted.single.js#C990EB
string.quoted.single.jsx#b66ae4
string.quoted.single.ts#AA51DF
string.quoted.single.tsx#b66ae4
support.function.dom.js#C990EB
support.function.dom.jsx#BC77E6
support.function.dom.ts#b66ae4
support.function.dom.tsx#B05DE2
support.variable.property.js#b66ae4
support.variable.property.jsx#C990EB
support.variable.property.ts#BC77E6
support.variable.property.tsx#BC77E6
variable.language.constructor#B05DE2underline
variable.language.this#b66ae4
meta.var.expr.js#480032
meta.var.expr.jsx#520039
meta.var.expr.ts#480032
meta.var.expr.tsx#480032
keyword#480032
expression.ng#480032
meta.brace.round.js#480032
meta.brace.round.jsx#4E0037
meta.brace.round.ts#480032
meta.brace.round.tsx#480032
constant.language.boolean#520039
constant.numeric#520039
constant.language.null.js#4B0034
constant.language.null.jsx#480032
constant.language.null.ts#480032
constant.language.null.tsx#480032
entity.name.class#480032underline
entity.name.function#480032underline
entity.name.type#480032underline
markup.heading.markdown#480032
punctuation.separator.comma.js#450030
punctuation.separator.comma.jsx#480032
punctuation.separator.comma.ts#450030
punctuation.separator.comma.tsx#450030
meta.tag.attributes.js#480032
meta.tag.attributes.jsx#4B0034
meta.tag.attributes.ts#480032
meta.tag.attributes.tsx#480032
support.variable.property.js#480032
support.variable.property.jsx#480032
support.variable.property.ts#4B0034
support.variable.property.tsx#480032
support.type.primitive.js#42002E
support.type.primitive.jsx#450030
support.type.primitive.ts#450030
support.type.primitive.tsx#4B0034
variable#3E002B
source.go#0071B7
string.quoted.double.html#0068a8
keyword.control.import.js#0068a8
keyword.control.import.jsx#0076BF
keyword.control.import.ts#0068a8
keyword.control.import.tsx#0068a8
source.json#0068a8
source.css#0068a8
variable.parameter#0068a8
support.function#0068a8
support.type.object.module.js#0063A0
support.type.object.module.jsx#0063A0
support.type.object.module.ts#0063A0
support.type.object.module.tsx#0063A0
meta.import.js#0068a8
meta.import.jsx#0068a8
meta.import.ts#0068a8
meta.import.tsx#0068a8
meta.paragraph.markdown#0068a8
entity.other.attribute-name.js#006DB0
entity.other.attribute-name.jsx#005A91
entity.other.attribute-name.ts#0063A0
entity.other.attribute-name.tsx#0068a8
string.quoted.single.js#0063A0
string.quoted.single.jsx#0068a8
string.quoted.single.ts#0068a8
string.quoted.single.tsx#0063A0
string.quoted.single.json#0071B7
keyword.control.module.js#0068a8
keyword.control.module.jsx#0068a8
keyword.control.module.ts#0068a8
keyword.control.module.tsx#0068a8
support.class.promise.js#0071B7
support.class.promise.jsx#0063A0
support.class.promise.ts#0063A0
support.class.promise.tsx#0068a8
support.type.object.console.js#005F99
support.type.object.console.jsx#0068a8
support.type.object.console.ts#0076BF
support.type.object.console.tsx#0068a8
support.function.console.js#0063A0
support.function.console.jsx#0068a8
support.function.console.ts#0063A0
support.function.console.tsx#0068a8
punctuation.definition.block.js#005F99
punctuation.definition.block.jsx#0068a8
punctuation.definition.block.ts#0063A0
punctuation.definition.block.tsx#0068a8
entity.other.ng-binding-name.property.html#38978D
punctuation.definition.parameters.begin.js#38978D
punctuation.definition.parameters.begin.jsx#38978D
punctuation.definition.parameters.begin.ts#359087
punctuation.definition.parameters.begin.tsx#38978D
punctuation.definition.parameters.end.js#3DA59A
punctuation.definition.parameters.end.jsx#38978D
punctuation.definition.parameters.end.ts#38978D
punctuation.definition.parameters.end.tsx#38978D
punctuation.definition.parameters.end.js#359087
punctuation.definition.parameters.end.jsx#38978D
punctuation.definition.parameters.end.ts#38978D
punctuation.definition.parameters.end.tsx#38978D
keyword.control.export.js#3DA59A
keyword.control.export.jsx#338980
keyword.control.export.ts#38978D
keyword.control.export.tsx#38978D
keyword.control.from.js#38978D
keyword.control.from.jsx#3B9E93
keyword.control.from.ts#3DA59A
keyword.control.from.tsx#38978D
markup.quote#359087
meta.tag.js#38978D
meta.tag.jsx#359087
meta.tag.ts#359087
meta.tag.tsx#38978D
meta.parameters.js#3B9E93
meta.parameters.jsx#38978D
meta.parameters.ts#3DA59A
meta.parameters.tsx#38978D
meta.brace.square.js#359087
meta.brace.square.jsx#359087
meta.brace.square.ts#30837A
meta.brace.square.tsx#338980
variable.other.class.js#38978D
variable.other.class.jsx#38978D
variable.other.class.ts#38978D
variable.other.class.tsx#338980
constant.other.object.key.js#3B9E93
constant.other.object.key.jsx#38978D
constant.other.object.key.ts#38978D
constant.other.object.key.tsx#3B9E93
keyword.operator.accessor#38978D
keyword.control.default.js#359087
keyword.control.default.jsx#359087
keyword.control.default.ts#38978D
keyword.control.default.tsx#40ABA0
entity.name.function.method#30837A
string.template#38978D
support.type.property-name.json#359087
variable.other.property.js#30837A
variable.other.property.jsx#359087
variable.other.property.ts#30837A
variable.other.property.tsx#359087
entity.other.ng-binding-name.outputReplEvent.html#B1365B
entity.other.inherited-class#B1365B
support.constant#C13B63
punctuation.separator.parameter.js#A93457
punctuation.separator.parameter.jsx#B1365B
punctuation.separator.parameter.ts#B9385F
punctuation.separator.parameter.tsx#992F4F
constant.character#B1365B
constant.language#B1365B
constant.other#A93457
support.class.builtin.js#992F4F
support.class.builtin.jsx#A93457
support.class.builtin.ts#A93457
support.class.builtin.tsx#B1365B
comment#A93457
markup.italic#A13153
meta.object-literal.key.js#A93457
meta.object-literal.key.jsx#B1365B
meta.object-literal.key.ts#B1365B
meta.object-literal.key.tsx#A93457
comment.block.documentation#B1365B
comment.line.double-slash#B1365B
punctuation.accessor.js#992F4F
punctuation.accessor.jsx#B1365B
punctuation.accessor.ts#A93457
punctuation.accessor.tsx#B1365B
invalid#A93457underline
variable.language#B1365B
storage.modifier.async.js#B1365B
storage.modifier.async.jsx#B1365B
storage.modifier.async.ts#C13B63
storage.modifier.async.tsx#B1365B
variable.other.object.js#A93457
variable.other.object.jsx#B1365B
variable.other.object.ts#992F4F
variable.other.object.tsx#A13153
variable.other.readwrite#B1365B
variable.other.readwrite.js#B1365B
variable.other.readwrite.jsx#B1365B
variable.other.readwrite.ts#C13B63
variable.other.readwrite.tsx#B1365B
Niketa Theme Light by selfrefactor - VS Code Theme