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#d8d5c9
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#b0b4b425
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#b0b4b455
  • editor.selectionHighlightBackground#b0b4b488
  • editor.wordHighlightBackground#b0b4b4aa
  • editor.wordHighlightStrongBackground#b0b4b4dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#b0b4b4
  • 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#cacacc
  • list.activeSelectionForeground#445a63
  • list.dropBackground#999a9d
  • list.errorForeground#a50044
  • list.focusBackground#978373d2
  • list.highlightForeground#861d4f
  • list.hoverBackground#b1c1a5
  • list.hoverForeground#30322e
  • list.inactiveSelectionBackground#d1d3d4aa
  • list.inactiveSelectionForeground#95a5a6
  • scrollbarSlider.background#b0b4b4
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#b0b4b4
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#b0b4b4
  • statusBar.foreground#35495f
  • tab.activeBackground#d8d5c9
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#b0b4b4
  • tab.inactiveBackground#b0b4b4
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#b0b4b4
  • tab.unfocusedActiveBorder#b0b4b4
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#532053
source.css#532053
source.go#532053
constant.character#1B41A4
constant.language.boolean#1B41A4
entity.name.tag#1B41A4underline
keyword#1D47B4
markup.italic#1c44ac
entity.name.function.method#1D47B4
string.quoted.single.js#1D47B4
string.quoted.single.jsx#1c44ac
string.quoted.single.ts#1B41A4
string.quoted.single.tsx#1B41A4
support.type.property-name.json#1c44ac
punctuation.accessor.js#1c44ac
punctuation.accessor.jsx#1F4ABB
punctuation.accessor.ts#1c44ac
punctuation.accessor.tsx#183B95
punctuation.separator.key-value.js#1B41A4
punctuation.separator.key-value.jsx#183B95
punctuation.separator.key-value.ts#1c44ac
punctuation.separator.key-value.tsx#1c44ac
constant.numeric#1c44ac
meta.brace.square.js#183B95
meta.brace.square.jsx#1c44ac
meta.brace.square.ts#1F4ABB
meta.brace.square.tsx#1c44ac
meta.var.expr.js#183B95
meta.var.expr.jsx#1c44ac
meta.var.expr.ts#1c44ac
meta.var.expr.tsx#183B95
storage.modifier.js#193E9D
storage.modifier.jsx#1D47B4
storage.modifier.ts#1D47B4
storage.modifier.tsx#204DC3
storage.type#183B95
string.template#1D47B4
support.constant#1B41A4
support.function.dom.js#1c44ac
support.function.dom.jsx#1c44ac
support.function.dom.ts#1c44ac
support.function.dom.tsx#1c44ac
support.variable.property.js#1c44ac
support.variable.property.jsx#1D47B4
support.variable.property.ts#1c44ac
support.variable.property.tsx#1c44ac
variable.language.constructor#1c44acunderline
variable.language.this#1c44ac
meta.tag.js#1D47B4
meta.tag.jsx#1B41A4
meta.tag.ts#1c44ac
meta.tag.tsx#1c44ac
support.type.object.module.js#1c44ac
support.type.object.module.jsx#1c44ac
support.type.object.module.ts#1c44ac
support.type.object.module.tsx#183B95
punctuation.definition.parameters.begin.js#1D47B4
punctuation.definition.parameters.begin.jsx#193E9D
punctuation.definition.parameters.begin.ts#1D47B4
punctuation.definition.parameters.begin.tsx#1c44ac
punctuation.definition.parameters.end.js#1F4ABB
punctuation.definition.parameters.end.jsx#1c44ac
punctuation.definition.parameters.end.ts#1B41A4
punctuation.definition.parameters.end.tsx#1c44ac
punctuation.definition.parameters.end.js#1B41A4
punctuation.definition.parameters.end.jsx#1B41A4
punctuation.definition.parameters.end.ts#193E9D
punctuation.definition.parameters.end.tsx#1c44ac
markup.quote#1F4ABB
entity.other.attribute-name.js#1c44ac
entity.other.attribute-name.jsx#1c44ac
entity.other.attribute-name.ts#193E9D
entity.other.attribute-name.tsx#1c44ac
comment#98414f
constant.language#98414f
constant.other#98414f
keyword.control.flow.js#1c44ac
keyword.control.flow.jsx#1c44ac
keyword.control.flow.ts#833844
keyword.control.flow.tsx#98414f
keyword.control.module.js#833844
keyword.control.module.jsx#98414f
keyword.control.module.ts#98414f
keyword.control.module.tsx#98414f
keyword.operator.accessor#8A3B48
markup.italic#98414f
meta.import.js#98414f
meta.import.jsx#913E4B
meta.import.ts#98414f
meta.import.tsx#98414f
meta.object-literal.key.js#98414f
meta.object-literal.key.jsx#AD4A5A
meta.object-literal.key.ts#98414f
meta.object-literal.key.tsx#98414f
meta.paragraph.markdown#9F4453
punctuation.definition.block.js#98414f
punctuation.definition.block.jsx#9F4453
punctuation.definition.block.ts#9F4453
punctuation.definition.block.tsx#98414f
punctuation.separator.parameter.js#98414f
punctuation.separator.parameter.jsx#98414f
punctuation.separator.parameter.ts#98414f
punctuation.separator.parameter.tsx#9F4453
string.quoted.single.js#8A3B48
string.quoted.single.jsx#9F4453
string.quoted.single.ts#A64756
string.quoted.single.tsx#913E4B
string.quoted.single.json#913E4B
support.class.promise.js#98414f
support.class.promise.jsx#98414f
support.class.promise.ts#98414f
support.class.promise.tsx#9F4453
support.function#98414f
keyword.control.import.js#A64756
keyword.control.import.jsx#98414f
keyword.control.import.ts#8A3B48
keyword.control.import.tsx#98414f
keyword.control.from.js#913E4B
keyword.control.from.jsx#913E4B
keyword.control.from.ts#98414f
keyword.control.from.tsx#9F4453
keyword.control.export.js#98414f
keyword.control.export.jsx#98414f
keyword.control.export.ts#98414f
keyword.control.export.tsx#98414f
keyword.control.default.js#98414f
keyword.control.default.jsx#833844
keyword.control.default.ts#98414f
keyword.control.default.tsx#98414f
entity.name.class#913E4Bunderline
support.function.console.js#833844
support.function.console.jsx#98414f
support.function.console.ts#A64756
support.function.console.tsx#9F4453
variable.language#98414f
invalid#8A3B48underline
support.type.object.console.js#98414f
support.type.object.console.jsx#98414f
support.type.object.console.ts#9F4453
support.type.object.console.tsx#98414f
variable.parameter#98414f
comment.block.documentation#AD4A5A
comment.line.double-slash#913E4B
constant.language.null.js#572157
constant.language.null.jsx#532053
constant.language.null.ts#532053
constant.language.null.tsx#4F1F4F
entity.name.type#4F1F4F
meta.parameters.js#4F1F4F
meta.parameters.jsx#532053
meta.parameters.ts#532053
meta.parameters.tsx#532053
variable.other.class.js#532053
variable.other.class.jsx#532053
variable.other.class.ts#4F1F4F
variable.other.class.tsx#4F1F4F
constant.other.object.key.js#532053
constant.other.object.key.jsx#532053
constant.other.object.key.ts#4F1F4F
constant.other.object.key.tsx#572157
entity.other.inherited-class#572157
markup.heading.markdown#5E245E
meta.brace.round.js#532053
meta.brace.round.jsx#572157
meta.brace.round.ts#532053
meta.brace.round.tsx#4C1D4C
entity.name.function#9F4453underline
meta.tag.attributes.js#4C1D4C
meta.tag.attributes.jsx#532053
meta.tag.attributes.ts#4F1F4F
meta.tag.attributes.tsx#532053
punctuation.accessor.js#532053
punctuation.accessor.jsx#4C1D4C
punctuation.accessor.ts#4C1D4C
punctuation.accessor.tsx#481C48
punctuation.separator.comma.js#4F1F4F
punctuation.separator.comma.jsx#532053
punctuation.separator.comma.ts#532053
punctuation.separator.comma.tsx#532053
source.js#4F1F4F
source.jsx#532053
source.ts#481C48
source.tsx#481C48
variable.other.property.js#532053
variable.other.property.jsx#5E245E
variable.other.property.ts#532053
variable.other.property.tsx#532053
storage.modifier.async.js#532053
storage.modifier.async.jsx#532053
storage.modifier.async.ts#4F1F4F
storage.modifier.async.tsx#4F1F4F
support.class.builtin.js#532053
support.class.builtin.jsx#532053
support.class.builtin.ts#4F1F4F
support.class.builtin.tsx#532053
support.type.primitive.js#572157
support.type.primitive.jsx#481C48
support.type.primitive.ts#532053
support.type.primitive.tsx#4C1D4C
support.variable.property.js#532053
support.variable.property.jsx#4F1F4F
support.variable.property.ts#572157
support.variable.property.tsx#532053
variable#4C1D4C
variable.other.object.js#4C1D4C
variable.other.object.jsx#532053
variable.other.object.ts#4F1F4F
variable.other.object.tsx#532053
variable.other.readwrite#4F1F4F
variable.other.readwrite.js#4C1D4C
variable.other.readwrite.jsx#532053
variable.other.readwrite.ts#532053
variable.other.readwrite.tsx#532053