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#ede8e1
  • 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#ede8e1
  • 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#431a22
source.css#431a22
source.go#431a22
support.constant#5c8875
punctuation.separator.parameter.js#5c8875
punctuation.separator.parameter.jsx#507665
punctuation.separator.parameter.ts#507665
punctuation.separator.parameter.tsx#5c8875
constant.character#5c8875
constant.language#5c8875
constant.other#5c8875
comment#5c8875
markup.italic#588270
meta.object-literal.key.js#588270
meta.object-literal.key.jsx#5c8875
meta.object-literal.key.ts#588270
meta.object-literal.key.tsx#608E7A
comment.block.documentation#5c8875
comment.line.double-slash#5c8875
punctuation.accessor.js#608E7A
punctuation.accessor.jsx#649480
punctuation.accessor.ts#5c8875
punctuation.accessor.tsx#5c8875
variable.language#588270
variable.other.object.js#5c8875
variable.other.object.jsx#5c8875
variable.other.object.ts#5c8875
variable.other.object.tsx#5c8875
variable.other.readwrite#547C6A
variable.other.readwrite.js#5c8875
variable.other.readwrite.jsx#5c8875
variable.other.readwrite.ts#5c8875
variable.other.readwrite.tsx#5c8875
punctuation.separator.key-value.js#973565
punctuation.separator.key-value.jsx#9e386a
punctuation.separator.key-value.ts#A53B6F
punctuation.separator.key-value.tsx#A53B6F
storage.modifier.async.js#89305C
storage.modifier.async.jsx#973565
storage.modifier.async.ts#9e386a
storage.modifier.async.tsx#9e386a
meta.brace.round.js#9e386a
meta.brace.round.jsx#9e386a
meta.brace.round.ts#B34078
meta.brace.round.tsx#903360
entity.other.inherited-class#903360
support.class.builtin.js#A53B6F
support.class.builtin.jsx#9e386a
support.class.builtin.ts#973565
support.class.builtin.tsx#9e386a
meta.tag.attributes.js#973565
meta.tag.attributes.jsx#A53B6F
meta.tag.attributes.ts#973565
meta.tag.attributes.tsx#9e386a
keyword.control.module.js#9e386a
keyword.control.module.jsx#9e386a
keyword.control.module.ts#A53B6F
keyword.control.module.tsx#9e386a
keyword.operator.accessor#9e386a
invalid#9e386aunderline
constant.numeric#9e386a
keyword#9e386a
meta.var.expr.js#9e386a
meta.var.expr.jsx#A53B6F
meta.var.expr.ts#A53B6F
meta.var.expr.tsx#973565
keyword.control.import.js#B34078
keyword.control.import.jsx#973565
keyword.control.import.ts#B34078
keyword.control.import.tsx#9e386a
keyword.control.from.js#9e386a
keyword.control.from.jsx#973565
keyword.control.from.ts#AC3D74
keyword.control.from.tsx#A53B6F
keyword.control.export.js#973565
keyword.control.export.jsx#89305C
keyword.control.export.ts#9e386a
keyword.control.export.tsx#B34078
keyword.control.default.js#9e386a
keyword.control.default.jsx#A53B6F
keyword.control.default.ts#B34078
keyword.control.default.tsx#9e386a
support.type.object.module.js#903360
support.type.object.module.jsx#973565
support.type.object.module.ts#9e386a
support.type.object.module.tsx#973565
punctuation.definition.parameters.begin.js#431a22
punctuation.definition.parameters.begin.jsx#3A161D
punctuation.definition.parameters.begin.ts#431a22
punctuation.definition.parameters.begin.tsx#401920
punctuation.definition.parameters.end.js#431a22
punctuation.definition.parameters.end.jsx#431a22
punctuation.definition.parameters.end.ts#461B24
punctuation.definition.parameters.end.tsx#431a22
punctuation.definition.parameters.end.js#491C25
punctuation.definition.parameters.end.jsx#431a22
punctuation.definition.parameters.end.ts#431a22
punctuation.definition.parameters.end.tsx#401920
markup.quote#3A161D
meta.tag.js#461B24
meta.tag.jsx#491C25
meta.tag.ts#3D181F
meta.tag.tsx#491C25
meta.parameters.js#431a22
meta.parameters.jsx#461B24
meta.parameters.ts#401920
meta.parameters.tsx#431a22
meta.brace.square.js#401920
meta.brace.square.jsx#431a22
meta.brace.square.ts#431a22
meta.brace.square.tsx#431a22
variable.other.class.js#4C1E27
variable.other.class.jsx#401920
variable.other.class.ts#3D181F
variable.other.class.tsx#431a22
constant.other.object.key.js#431a22
constant.other.object.key.jsx#4C1E27
constant.other.object.key.ts#431a22
constant.other.object.key.tsx#431a22
entity.name.function.method#3A161D
string.template#431a22
support.type.property-name.json#3A161D
variable.other.property.js#431a22
variable.other.property.jsx#491C25
variable.other.property.ts#4C1E27
variable.other.property.tsx#431a22
entity.name.tag#0B032Funderline
markup.italic#0b032d
punctuation.accessor.js#0B032B
punctuation.accessor.jsx#0b032d
punctuation.accessor.ts#0B032B
punctuation.accessor.tsx#0A0327
source.js#0b032d
source.jsx#0b032d
source.ts#0b032d
source.tsx#0b032d
storage.modifier.js#0b032d
storage.modifier.jsx#0b032d
storage.modifier.ts#0B032B
storage.modifier.tsx#0b032d
storage.type#0C0333
string.quoted.single.js#0B032B
string.quoted.single.jsx#0A0329
string.quoted.single.ts#0b032d
string.quoted.single.tsx#0b032d
support.function.dom.js#0C0333
support.function.dom.jsx#0b032d
support.function.dom.ts#0C0331
support.function.dom.tsx#0B032B
support.variable.property.js#0B032F
support.variable.property.jsx#0b032d
support.variable.property.ts#0b032d
support.variable.property.tsx#0C0331
variable.language.constructor#0b032dunderline
variable.language.this#0A0327
constant.language.boolean#3E9D9D
constant.language.null.js#399090
constant.language.null.jsx#399090
constant.language.null.ts#317D7D
constant.language.null.tsx#399090
entity.name.class#399090underline
entity.name.function#368A8Aunderline
entity.name.type#368A8Aunderline
markup.heading.markdown#368A8A
punctuation.separator.comma.js#368A8A
punctuation.separator.comma.jsx#399090
punctuation.separator.comma.ts#3E9D9D
punctuation.separator.comma.tsx#317D7D
support.variable.property.js#399090
support.variable.property.jsx#399090
support.variable.property.ts#399090
support.variable.property.tsx#399090
support.type.primitive.js#399090
support.type.primitive.jsx#399090
support.type.primitive.ts#3E9D9D
support.type.primitive.tsx#399090
variable#399090
variable.parameter#733572
support.function#733572
meta.import.js#783777
meta.import.jsx#733572
meta.import.ts#783777
meta.import.tsx#783777
meta.paragraph.markdown#783777
entity.other.attribute-name.js#783777
entity.other.attribute-name.jsx#783777
entity.other.attribute-name.ts#883E87
entity.other.attribute-name.tsx#783777
string.quoted.single.js#6D326C
string.quoted.single.jsx#783777
string.quoted.single.ts#733572
string.quoted.single.tsx#733572
string.quoted.single.json#6D326C
support.class.promise.js#6D326C
support.class.promise.jsx#7D397C
support.class.promise.ts#6D326C
support.class.promise.tsx#883E87
support.type.object.console.js#783777
support.type.object.console.jsx#683067
support.type.object.console.ts#7D397C
support.type.object.console.tsx#783777
support.function.console.js#733572
support.function.console.jsx#733572
support.function.console.ts#7D397C
support.function.console.tsx#683067
punctuation.definition.block.js#783777
punctuation.definition.block.jsx#7D397C
punctuation.definition.block.ts#783777
punctuation.definition.block.tsx#7D397C