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#aaa
  • badge.foreground#fafafa
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#f9f6f1
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#b7bcbf25
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#b7bcbf55
  • editor.selectionHighlightBackground#b7bcbf88
  • editor.wordHighlightBackground#b7bcbfaa
  • editor.wordHighlightStrongBackground#b7bcbfdd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#b7bcbf
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#c3c1a9
  • editorSuggestWidget.border#936776
  • editorSuggestWidget.foreground#344250
  • editorSuggestWidget.highlightForeground#4d0e0b
  • editorSuggestWidget.selectedBackground#fafafa
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • git.color.modified#a50044
  • gitDecoration.modifiedResourceForeground#eae3cd
  • gitDecoration.untrackedResourceForeground#a50044
  • list.activeSelectionBackground#eae3cd
  • list.activeSelectionForeground#677d7f
  • list.dropBackground#999a9d
  • list.errorForeground#a50044
  • list.focusBackground#885f66aa
  • list.highlightForeground#89345d
  • list.hoverBackground#b1c1a5
  • list.hoverForeground#30322e
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#95a5a6
  • scrollbarSlider.background#b7bcbf
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#b7bcbf
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#b7bcbf
  • statusBar.foreground#35495f
  • tab.activeBackground#f9f6f1
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#b7bcbf
  • tab.inactiveBackground#b7bcbf
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#b7bcbf
  • tab.unfocusedActiveBorder#b7bcbf
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#9F7E6B
source.css#9F7E6B
source.go#9F7E6B
constant.character#A93457
constant.language.boolean#A93457
entity.name.tag#A93457underline
keyword#B9385F
markup.italic#B1365B
entity.name.function.method#B9385F
string.quoted.single.js#B9385F
string.quoted.single.jsx#B1365B
string.quoted.single.ts#A93457
string.quoted.single.tsx#A93457
support.type.property-name.json#B1365B
punctuation.accessor.js#B1365B
punctuation.accessor.jsx#C13B63
punctuation.accessor.ts#B1365B
punctuation.accessor.tsx#992F4F
punctuation.separator.key-value.js#A93457
punctuation.separator.key-value.jsx#992F4F
punctuation.separator.key-value.ts#B1365B
punctuation.separator.key-value.tsx#B1365B
constant.numeric#B1365B
meta.brace.square.js#992F4F
meta.brace.square.jsx#B1365B
meta.brace.square.ts#C13B63
meta.brace.square.tsx#B1365B
meta.var.expr.js#992F4F
meta.var.expr.jsx#B1365B
meta.var.expr.ts#B1365B
meta.var.expr.tsx#992F4F
storage.modifier.js#A13153
storage.modifier.jsx#B9385F
storage.modifier.ts#B9385F
storage.modifier.tsx#C54169
storage.type#992F4F
string.template#B9385F
support.constant#A93457
support.function.dom.js#B1365B
support.function.dom.jsx#B1365B
support.function.dom.ts#B1365B
support.function.dom.tsx#B1365B
support.variable.property.js#B1365B
support.variable.property.jsx#B9385F
support.variable.property.ts#B1365B
support.variable.property.tsx#B1365B
variable.language.constructor#B1365Bunderline
variable.language.this#B1365B
meta.tag.js#B9385F
meta.tag.jsx#A93457
meta.tag.ts#B1365B
meta.tag.tsx#B1365B
support.type.object.module.js#B1365B
support.type.object.module.jsx#B1365B
support.type.object.module.ts#B1365B
support.type.object.module.tsx#992F4F
punctuation.definition.parameters.begin.js#B9385F
punctuation.definition.parameters.begin.jsx#A13153
punctuation.definition.parameters.begin.ts#B9385F
punctuation.definition.parameters.begin.tsx#B1365B
punctuation.definition.parameters.end.js#C13B63
punctuation.definition.parameters.end.jsx#B1365B
punctuation.definition.parameters.end.ts#A93457
punctuation.definition.parameters.end.tsx#B1365B
punctuation.definition.parameters.end.js#A93457
punctuation.definition.parameters.end.jsx#A93457
punctuation.definition.parameters.end.ts#A13153
punctuation.definition.parameters.end.tsx#B1365B
markup.quote#C13B63
entity.other.attribute-name.js#B1365B
entity.other.attribute-name.jsx#B1365B
entity.other.attribute-name.ts#A13153
entity.other.attribute-name.tsx#B1365B
comment#5F7E97
constant.language#5F7E97
constant.other#5F7E97
keyword.control.flow.js#B1365B
keyword.control.flow.jsx#B1365B
keyword.control.flow.ts#526D83
keyword.control.flow.tsx#5F7E97
keyword.control.module.js#526D83
keyword.control.module.jsx#5F7E97
keyword.control.module.ts#5F7E97
keyword.control.module.tsx#5F7E97
keyword.operator.accessor#567389
markup.italic#5F7E97
meta.import.js#5F7E97
meta.import.jsx#5B7890
meta.import.ts#5F7E97
meta.import.tsx#5F7E97
meta.object-literal.key.js#5F7E97
meta.object-literal.key.jsx#718EA6
meta.object-literal.key.ts#5F7E97
meta.object-literal.key.tsx#5F7E97
meta.paragraph.markdown#64849D
punctuation.definition.block.js#5F7E97
punctuation.definition.block.jsx#64849D
punctuation.definition.block.ts#64849D
punctuation.definition.block.tsx#5F7E97
punctuation.separator.parameter.js#5F7E97
punctuation.separator.parameter.jsx#5F7E97
punctuation.separator.parameter.ts#5F7E97
punctuation.separator.parameter.tsx#64849D
string.quoted.single.js#567389
string.quoted.single.jsx#64849D
string.quoted.single.ts#6B89A2
string.quoted.single.tsx#5B7890
string.quoted.single.json#5B7890
support.class.promise.js#5F7E97
support.class.promise.jsx#5F7E97
support.class.promise.ts#5F7E97
support.class.promise.tsx#64849D
support.function#5F7E97
keyword.control.import.js#6B89A2
keyword.control.import.jsx#5F7E97
keyword.control.import.ts#567389
keyword.control.import.tsx#5F7E97
keyword.control.from.js#5B7890
keyword.control.from.jsx#5B7890
keyword.control.from.ts#5F7E97
keyword.control.from.tsx#64849D
keyword.control.export.js#5F7E97
keyword.control.export.jsx#5F7E97
keyword.control.export.ts#5F7E97
keyword.control.export.tsx#5F7E97
keyword.control.default.js#5F7E97
keyword.control.default.jsx#526D83
keyword.control.default.ts#5F7E97
keyword.control.default.tsx#5F7E97
entity.name.class#5B7890underline
support.function.console.js#526D83
support.function.console.jsx#5F7E97
support.function.console.ts#6B89A2
support.function.console.tsx#64849D
variable.language#5F7E97
invalid#567389underline
support.type.object.console.js#5F7E97
support.type.object.console.jsx#5F7E97
support.type.object.console.ts#64849D
support.type.object.console.tsx#5F7E97
variable.parameter#5F7E97
comment.block.documentation#718EA6
comment.line.double-slash#5B7890
constant.language.null.js#A48472
constant.language.null.jsx#9F7E6B
constant.language.null.ts#9F7E6B
constant.language.null.tsx#9A7864
entity.name.type#9A7864
meta.parameters.js#9A7864
meta.parameters.jsx#9F7E6B
meta.parameters.ts#9F7E6B
meta.parameters.tsx#9F7E6B
variable.other.class.js#9F7E6B
variable.other.class.jsx#9F7E6B
variable.other.class.ts#9A7864
variable.other.class.tsx#9A7864
constant.other.object.key.js#9F7E6B
constant.other.object.key.jsx#9F7E6B
constant.other.object.key.ts#9A7864
constant.other.object.key.tsx#A48472
entity.other.inherited-class#A48472
markup.heading.markdown#AD9181
meta.brace.round.js#9F7E6B
meta.brace.round.jsx#A48472
meta.brace.round.ts#9F7E6B
meta.brace.round.tsx#93725F
entity.name.function#64849Dunderline
meta.tag.attributes.js#93725F
meta.tag.attributes.jsx#9F7E6B
meta.tag.attributes.ts#9A7864
meta.tag.attributes.tsx#9F7E6B
punctuation.accessor.js#9F7E6B
punctuation.accessor.jsx#93725F
punctuation.accessor.ts#93725F
punctuation.accessor.tsx#8C6C5B
punctuation.separator.comma.js#9A7864
punctuation.separator.comma.jsx#9F7E6B
punctuation.separator.comma.ts#9F7E6B
punctuation.separator.comma.tsx#9F7E6B
source.js#9A7864
source.jsx#9F7E6B
source.ts#8C6C5B
source.tsx#8C6C5B
variable.other.property.js#9F7E6B
variable.other.property.jsx#AD9181
variable.other.property.ts#9F7E6B
variable.other.property.tsx#9F7E6B
storage.modifier.async.js#9F7E6B
storage.modifier.async.jsx#9F7E6B
storage.modifier.async.ts#9A7864
storage.modifier.async.tsx#9A7864
support.class.builtin.js#9F7E6B
support.class.builtin.jsx#9F7E6B
support.class.builtin.ts#9A7864
support.class.builtin.tsx#9F7E6B
support.type.primitive.js#A48472
support.type.primitive.jsx#8C6C5B
support.type.primitive.ts#9F7E6B
support.type.primitive.tsx#93725F
support.variable.property.js#9F7E6B
support.variable.property.jsx#9A7864
support.variable.property.ts#A48472
support.variable.property.tsx#9F7E6B
variable#93725F
variable.other.object.js#93725F
variable.other.object.jsx#9F7E6B
variable.other.object.ts#9A7864
variable.other.object.tsx#9F7E6B
variable.other.readwrite#9A7864
variable.other.readwrite.js#93725F
variable.other.readwrite.jsx#9F7E6B
variable.other.readwrite.ts#9F7E6B
variable.other.readwrite.tsx#9F7E6B