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#017579underline
markup.italic#01676b
text.html.derivative#015E61
punctuation.accessor.js#01676b
punctuation.accessor.jsx#01676b
punctuation.accessor.ts#016C70
punctuation.accessor.tsx#01676b
source.js#016C70
source.jsx#01676b
source.ts#01676b
source.tsx#016266
storage.modifier.js#01676b
storage.modifier.jsx#017579
storage.modifier.ts#01676b
storage.modifier.tsx#017075
punctuation.separator.key-value.js#01676b
punctuation.separator.key-value.jsx#01595D
punctuation.separator.key-value.ts#016C70
punctuation.separator.key-value.tsx#016266
storage.type#01676b
string.quoted.single.js#017579
string.quoted.single.jsx#01676b
string.quoted.single.ts#015E61
string.quoted.single.tsx#01676b
support.function.dom.js#017579
support.function.dom.jsx#016C70
support.function.dom.ts#01676b
support.function.dom.tsx#016266
support.variable.property.js#01676b
support.variable.property.jsx#017579
support.variable.property.ts#016C70
support.variable.property.tsx#016C70
variable.language.constructor#016266underline
variable.language.this#01676b
meta.var.expr.js#6833b9
meta.var.expr.jsx#7841CB
meta.var.expr.ts#6833b9
meta.var.expr.tsx#6833b9
keyword#6833b9
expression.ng#6833b9
meta.brace.round.js#6833b9
meta.brace.round.jsx#7239C8
meta.brace.round.ts#6833b9
meta.brace.round.tsx#6833b9
constant.language.boolean#7841CB
constant.numeric#7841CB
constant.language.null.js#6D35C1
constant.language.null.jsx#6833b9
constant.language.null.ts#6833b9
constant.language.null.tsx#6833b9
entity.name.class#6833b9underline
entity.name.function#6833b9underline
entity.name.type#6833b9underline
markup.heading.markdown#6833b9
punctuation.separator.comma.js#6331B1
punctuation.separator.comma.jsx#6833b9
punctuation.separator.comma.ts#6331B1
punctuation.separator.comma.tsx#6331B1
meta.tag.attributes.js#6833b9
meta.tag.attributes.jsx#6D35C1
meta.tag.attributes.ts#6833b9
meta.tag.attributes.tsx#6833b9
support.variable.property.js#6833b9
support.variable.property.jsx#6833b9
support.variable.property.ts#6D35C1
support.variable.property.tsx#6833b9
support.type.primitive.js#5F2EA8
support.type.primitive.jsx#6331B1
support.type.primitive.ts#6331B1
support.type.primitive.tsx#6D35C1
variable#5A2CA0
source.go#C13875
string.quoted.double.html#b1336b
keyword.control.import.js#b1336b
keyword.control.import.jsx#C73C7A
keyword.control.import.ts#b1336b
keyword.control.import.tsx#b1336b
source.json#b1336b
source.css#b1336b
variable.parameter#b1336b
support.function#b1336b
support.type.object.module.js#A93166
support.type.object.module.jsx#A93166
support.type.object.module.ts#A93166
support.type.object.module.tsx#A93166
meta.import.js#b1336b
meta.import.jsx#b1336b
meta.import.ts#b1336b
meta.import.tsx#b1336b
meta.paragraph.markdown#b1336b
entity.other.attribute-name.js#B93570
entity.other.attribute-name.jsx#992C5D
entity.other.attribute-name.ts#A93166
entity.other.attribute-name.tsx#b1336b
string.quoted.single.js#A93166
string.quoted.single.jsx#b1336b
string.quoted.single.ts#b1336b
string.quoted.single.tsx#A93166
string.quoted.single.json#C13875
keyword.control.module.js#b1336b
keyword.control.module.jsx#b1336b
keyword.control.module.ts#b1336b
keyword.control.module.tsx#b1336b
support.class.promise.js#C13875
support.class.promise.jsx#A93166
support.class.promise.ts#A93166
support.class.promise.tsx#b1336b
support.type.object.console.js#A12E61
support.type.object.console.jsx#b1336b
support.type.object.console.ts#C73C7A
support.type.object.console.tsx#b1336b
support.function.console.js#A93166
support.function.console.jsx#b1336b
support.function.console.ts#A93166
support.function.console.tsx#b1336b
punctuation.definition.block.js#A12E61
punctuation.definition.block.jsx#b1336b
punctuation.definition.block.ts#A93166
punctuation.definition.block.tsx#b1336b
entity.other.ng-binding-name.property.html#192112
punctuation.definition.parameters.begin.js#192112
punctuation.definition.parameters.begin.jsx#192112
punctuation.definition.parameters.begin.ts#182011
punctuation.definition.parameters.begin.tsx#192112
punctuation.definition.parameters.end.js#1B2414
punctuation.definition.parameters.end.jsx#192112
punctuation.definition.parameters.end.ts#192112
punctuation.definition.parameters.end.tsx#192112
punctuation.definition.parameters.end.js#182011
punctuation.definition.parameters.end.jsx#192112
punctuation.definition.parameters.end.ts#192112
punctuation.definition.parameters.end.tsx#192112
keyword.control.export.js#1B2414
keyword.control.export.jsx#171E10
keyword.control.export.ts#192112
keyword.control.export.tsx#192112
keyword.control.from.js#192112
keyword.control.from.jsx#1A2213
keyword.control.from.ts#1B2414
keyword.control.from.tsx#192112
markup.quote#182011
meta.tag.js#192112
meta.tag.jsx#182011
meta.tag.ts#182011
meta.tag.tsx#192112
meta.parameters.js#1A2213
meta.parameters.jsx#192112
meta.parameters.ts#1B2414
meta.parameters.tsx#192112
meta.brace.square.js#182011
meta.brace.square.jsx#182011
meta.brace.square.ts#161D10
meta.brace.square.tsx#171E10
variable.other.class.js#192112
variable.other.class.jsx#192112
variable.other.class.ts#192112
variable.other.class.tsx#171E10
constant.other.object.key.js#1A2213
constant.other.object.key.jsx#192112
constant.other.object.key.ts#192112
constant.other.object.key.tsx#1A2213
keyword.operator.accessor#192112
keyword.control.default.js#182011
keyword.control.default.jsx#182011
keyword.control.default.ts#192112
keyword.control.default.tsx#1C2514
entity.name.function.method#161D10
string.template#192112
support.type.property-name.json#182011
variable.other.property.js#161D10
variable.other.property.jsx#182011
variable.other.property.ts#161D10
variable.other.property.tsx#182011
entity.other.ng-binding-name.outputReplEvent.html#0031df
entity.other.inherited-class#0031df
support.constant#0035F3
punctuation.separator.parameter.js#002FD5
punctuation.separator.parameter.jsx#0031df
punctuation.separator.parameter.ts#0033E9
punctuation.separator.parameter.tsx#002AC1
constant.character#0031df
constant.language#0031df
constant.other#002FD5
support.class.builtin.js#002AC1
support.class.builtin.jsx#002FD5
support.class.builtin.ts#002FD5
support.class.builtin.tsx#0031df
comment#002FD5
markup.italic#002DCB
meta.object-literal.key.js#002FD5
meta.object-literal.key.jsx#0031df
meta.object-literal.key.ts#0031df
meta.object-literal.key.tsx#002FD5
comment.block.documentation#0031df
comment.line.double-slash#0031df
punctuation.accessor.js#002AC1
punctuation.accessor.jsx#0031df
punctuation.accessor.ts#002FD5
punctuation.accessor.tsx#0031df
invalid#002FD5underline
variable.language#0031df
storage.modifier.async.js#0031df
storage.modifier.async.jsx#0031df
storage.modifier.async.ts#0035F3
storage.modifier.async.tsx#0031df
variable.other.object.js#002FD5
variable.other.object.jsx#0031df
variable.other.object.ts#002AC1
variable.other.object.tsx#002DCB
variable.other.readwrite#0031df
variable.other.readwrite.js#0031df
variable.other.readwrite.jsx#0031df
variable.other.readwrite.ts#0035F3
variable.other.readwrite.tsx#0031df