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#BD4663underline
markup.italic#a83c56
text.html.derivative#99374E
punctuation.accessor.js#a83c56
punctuation.accessor.jsx#a83c56
punctuation.accessor.ts#B03F5A
punctuation.accessor.tsx#a83c56
source.js#B03F5A
source.jsx#a83c56
source.ts#a83c56
source.tsx#A03952
storage.modifier.js#a83c56
storage.modifier.jsx#BD4663
storage.modifier.ts#a83c56
storage.modifier.tsx#B7415E
punctuation.separator.key-value.js#a83c56
punctuation.separator.key-value.jsx#91344A
punctuation.separator.key-value.ts#B03F5A
punctuation.separator.key-value.tsx#A03952
storage.type#a83c56
string.quoted.single.js#BD4663
string.quoted.single.jsx#a83c56
string.quoted.single.ts#99374E
string.quoted.single.tsx#a83c56
support.function.dom.js#BD4663
support.function.dom.jsx#B03F5A
support.function.dom.ts#a83c56
support.function.dom.tsx#A03952
support.variable.property.js#a83c56
support.variable.property.jsx#BD4663
support.variable.property.ts#B03F5A
support.variable.property.tsx#B03F5A
variable.language.constructor#A03952underline
variable.language.this#a83c56
meta.var.expr.js#28305d
meta.var.expr.jsx#2D366A
meta.var.expr.ts#28305d
meta.var.expr.tsx#28305d
keyword#28305d
expression.ng#28305d
meta.brace.round.js#28305d
meta.brace.round.jsx#2C3465
meta.brace.round.ts#28305d
meta.brace.round.tsx#28305d
constant.language.boolean#2D366A
constant.numeric#2D366A
constant.language.null.js#2A3261
constant.language.null.jsx#28305d
constant.language.null.ts#28305d
constant.language.null.tsx#28305d
entity.name.class#28305dunderline
entity.name.function#28305dunderline
entity.name.type#28305dunderline
markup.heading.markdown#28305d
punctuation.separator.comma.js#262E59
punctuation.separator.comma.jsx#28305d
punctuation.separator.comma.ts#262E59
punctuation.separator.comma.tsx#262E59
meta.tag.attributes.js#28305d
meta.tag.attributes.jsx#2A3261
meta.tag.attributes.ts#28305d
meta.tag.attributes.tsx#28305d
support.variable.property.js#28305d
support.variable.property.jsx#28305d
support.variable.property.ts#2A3261
support.variable.property.tsx#28305d
support.type.primitive.js#242C55
support.type.primitive.jsx#262E59
support.type.primitive.ts#262E59
support.type.primitive.tsx#2A3261
variable#232A50
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#d239a0
punctuation.definition.parameters.begin.js#d239a0
punctuation.definition.parameters.begin.jsx#d239a0
punctuation.definition.parameters.begin.ts#D02F9B
punctuation.definition.parameters.begin.tsx#d239a0
punctuation.definition.parameters.end.js#D64DA9
punctuation.definition.parameters.end.jsx#d239a0
punctuation.definition.parameters.end.ts#d239a0
punctuation.definition.parameters.end.tsx#d239a0
punctuation.definition.parameters.end.js#D02F9B
punctuation.definition.parameters.end.jsx#d239a0
punctuation.definition.parameters.end.ts#d239a0
punctuation.definition.parameters.end.tsx#d239a0
keyword.control.export.js#D64DA9
keyword.control.export.jsx#C62D94
keyword.control.export.ts#d239a0
keyword.control.export.tsx#d239a0
keyword.control.from.js#d239a0
keyword.control.from.jsx#D443A5
keyword.control.from.ts#D64DA9
keyword.control.from.tsx#d239a0
markup.quote#D02F9B
meta.tag.js#d239a0
meta.tag.jsx#D02F9B
meta.tag.ts#D02F9B
meta.tag.tsx#d239a0
meta.parameters.js#D443A5
meta.parameters.jsx#d239a0
meta.parameters.ts#D64DA9
meta.parameters.tsx#d239a0
meta.brace.square.js#D02F9B
meta.brace.square.jsx#D02F9B
meta.brace.square.ts#BC2B8D
meta.brace.square.tsx#C62D94
variable.other.class.js#d239a0
variable.other.class.jsx#d239a0
variable.other.class.ts#d239a0
variable.other.class.tsx#C62D94
constant.other.object.key.js#D443A5
constant.other.object.key.jsx#d239a0
constant.other.object.key.ts#d239a0
constant.other.object.key.tsx#D443A5
keyword.operator.accessor#d239a0
keyword.control.default.js#D02F9B
keyword.control.default.jsx#D02F9B
keyword.control.default.ts#d239a0
keyword.control.default.tsx#D956AE
entity.name.function.method#BC2B8D
string.template#d239a0
support.type.property-name.json#D02F9B
variable.other.property.js#BC2B8D
variable.other.property.jsx#D02F9B
variable.other.property.ts#BC2B8D
variable.other.property.tsx#D02F9B
entity.other.ng-binding-name.outputReplEvent.html#b66ae4
entity.other.inherited-class#b66ae4
support.constant#C283E9
punctuation.separator.parameter.js#B05DE2
punctuation.separator.parameter.jsx#b66ae4
punctuation.separator.parameter.ts#BC77E6
punctuation.separator.parameter.tsx#A344DD
constant.character#b66ae4
constant.language#b66ae4
constant.other#B05DE2
support.class.builtin.js#A344DD
support.class.builtin.jsx#B05DE2
support.class.builtin.ts#B05DE2
support.class.builtin.tsx#b66ae4
comment#B05DE2
markup.italic#AA51DF
meta.object-literal.key.js#B05DE2
meta.object-literal.key.jsx#b66ae4
meta.object-literal.key.ts#b66ae4
meta.object-literal.key.tsx#B05DE2
comment.block.documentation#b66ae4
comment.line.double-slash#b66ae4
punctuation.accessor.js#A344DD
punctuation.accessor.jsx#b66ae4
punctuation.accessor.ts#B05DE2
punctuation.accessor.tsx#b66ae4
invalid#B05DE2underline
variable.language#b66ae4
storage.modifier.async.js#b66ae4
storage.modifier.async.jsx#b66ae4
storage.modifier.async.ts#C283E9
storage.modifier.async.tsx#b66ae4
variable.other.object.js#B05DE2
variable.other.object.jsx#b66ae4
variable.other.object.ts#A344DD
variable.other.object.tsx#AA51DF
variable.other.readwrite#b66ae4
variable.other.readwrite.js#b66ae4
variable.other.readwrite.jsx#b66ae4
variable.other.readwrite.ts#C283E9
variable.other.readwrite.tsx#b66ae4
Niketa Theme Light by selfrefactor - VS Code Theme