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#35647Eunderline
markup.italic#2f586f
text.html.derivative#2B5065
punctuation.accessor.js#2f586f
punctuation.accessor.jsx#2f586f
punctuation.accessor.ts#315C74
punctuation.accessor.tsx#2f586f
source.js#315C74
source.jsx#2f586f
source.ts#2f586f
source.tsx#2D546A
storage.modifier.js#2f586f
storage.modifier.jsx#35647E
storage.modifier.ts#2f586f
storage.modifier.tsx#336079
punctuation.separator.key-value.js#2f586f
punctuation.separator.key-value.jsx#294C60
punctuation.separator.key-value.ts#315C74
punctuation.separator.key-value.tsx#2D546A
storage.type#2f586f
string.quoted.single.js#35647E
string.quoted.single.jsx#2f586f
string.quoted.single.ts#2B5065
string.quoted.single.tsx#2f586f
support.function.dom.js#35647E
support.function.dom.jsx#315C74
support.function.dom.ts#2f586f
support.function.dom.tsx#2D546A
support.variable.property.js#2f586f
support.variable.property.jsx#35647E
support.variable.property.ts#315C74
support.variable.property.tsx#315C74
variable.language.constructor#2D546Aunderline
variable.language.this#2f586f
meta.var.expr.js#a83c56
meta.var.expr.jsx#BD4663
meta.var.expr.ts#a83c56
meta.var.expr.tsx#a83c56
keyword#a83c56
expression.ng#a83c56
meta.brace.round.js#a83c56
meta.brace.round.jsx#B7415E
meta.brace.round.ts#a83c56
meta.brace.round.tsx#a83c56
constant.language.boolean#BD4663
constant.numeric#BD4663
constant.language.null.js#B03F5A
constant.language.null.jsx#a83c56
constant.language.null.ts#a83c56
constant.language.null.tsx#a83c56
entity.name.class#a83c56underline
entity.name.function#a83c56underline
entity.name.type#a83c56underline
markup.heading.markdown#a83c56
punctuation.separator.comma.js#A03952
punctuation.separator.comma.jsx#a83c56
punctuation.separator.comma.ts#A03952
punctuation.separator.comma.tsx#A03952
meta.tag.attributes.js#a83c56
meta.tag.attributes.jsx#B03F5A
meta.tag.attributes.ts#a83c56
meta.tag.attributes.tsx#a83c56
support.variable.property.js#a83c56
support.variable.property.jsx#a83c56
support.variable.property.ts#B03F5A
support.variable.property.tsx#a83c56
support.type.primitive.js#99374E
support.type.primitive.jsx#A03952
support.type.primitive.ts#A03952
support.type.primitive.tsx#B03F5A
variable#91344A
source.go#0035F3
string.quoted.double.html#0031df
keyword.control.import.js#0031df
keyword.control.import.jsx#0038FD
keyword.control.import.ts#0031df
keyword.control.import.tsx#0031df
source.json#0031df
source.css#0031df
variable.parameter#0031df
support.function#0031df
support.type.object.module.js#002FD5
support.type.object.module.jsx#002FD5
support.type.object.module.ts#002FD5
support.type.object.module.tsx#002FD5
meta.import.js#0031df
meta.import.jsx#0031df
meta.import.ts#0031df
meta.import.tsx#0031df
meta.paragraph.markdown#0031df
entity.other.attribute-name.js#0033E9
entity.other.attribute-name.jsx#002AC1
entity.other.attribute-name.ts#002FD5
entity.other.attribute-name.tsx#0031df
string.quoted.single.js#002FD5
string.quoted.single.jsx#0031df
string.quoted.single.ts#0031df
string.quoted.single.tsx#002FD5
string.quoted.single.json#0035F3
keyword.control.module.js#0031df
keyword.control.module.jsx#0031df
keyword.control.module.ts#0031df
keyword.control.module.tsx#0031df
support.class.promise.js#0035F3
support.class.promise.jsx#002FD5
support.class.promise.ts#002FD5
support.class.promise.tsx#0031df
support.type.object.console.js#002DCB
support.type.object.console.jsx#0031df
support.type.object.console.ts#0038FD
support.type.object.console.tsx#0031df
support.function.console.js#002FD5
support.function.console.jsx#0031df
support.function.console.ts#002FD5
support.function.console.tsx#0031df
punctuation.definition.block.js#002DCB
punctuation.definition.block.jsx#0031df
punctuation.definition.block.ts#002FD5
punctuation.definition.block.tsx#0031df
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#bb9132
entity.other.inherited-class#bb9132
support.constant#CA9D38
punctuation.separator.parameter.js#B38A30
punctuation.separator.parameter.jsx#bb9132
punctuation.separator.parameter.ts#C39834
punctuation.separator.parameter.tsx#A27D2B
constant.character#bb9132
constant.language#bb9132
constant.other#B38A30
support.class.builtin.js#A27D2B
support.class.builtin.jsx#B38A30
support.class.builtin.ts#B38A30
support.class.builtin.tsx#bb9132
comment#B38A30
markup.italic#AA842E
meta.object-literal.key.js#B38A30
meta.object-literal.key.jsx#bb9132
meta.object-literal.key.ts#bb9132
meta.object-literal.key.tsx#B38A30
comment.block.documentation#bb9132
comment.line.double-slash#bb9132
punctuation.accessor.js#A27D2B
punctuation.accessor.jsx#bb9132
punctuation.accessor.ts#B38A30
punctuation.accessor.tsx#bb9132
invalid#B38A30underline
variable.language#bb9132
storage.modifier.async.js#bb9132
storage.modifier.async.jsx#bb9132
storage.modifier.async.ts#CA9D38
storage.modifier.async.tsx#bb9132
variable.other.object.js#B38A30
variable.other.object.jsx#bb9132
variable.other.object.ts#A27D2B
variable.other.object.tsx#AA842E
variable.other.readwrite#bb9132
variable.other.readwrite.js#bb9132
variable.other.readwrite.jsx#bb9132
variable.other.readwrite.ts#CA9D38
variable.other.readwrite.tsx#bb9132