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#c1bcae
  • 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#c1bcae
  • 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#01676b
source.css#01676b
source.go#01676b
constant.character#8A0045
constant.language.boolean#8A0045
entity.name.tag#8A0045underline
keyword#96004B
markup.italic#900048
entity.name.function.method#96004B
string.quoted.single.js#96004B
string.quoted.single.jsx#900048
string.quoted.single.ts#8A0045
string.quoted.single.tsx#8A0045
support.type.property-name.json#900048
punctuation.accessor.js#900048
punctuation.accessor.jsx#9D004E
punctuation.accessor.ts#900048
punctuation.accessor.tsx#7D003E
punctuation.separator.key-value.js#8A0045
punctuation.separator.key-value.jsx#7D003E
punctuation.separator.key-value.ts#900048
punctuation.separator.key-value.tsx#900048
constant.numeric#900048
meta.brace.square.js#7D003E
meta.brace.square.jsx#900048
meta.brace.square.ts#9D004E
meta.brace.square.tsx#900048
meta.var.expr.js#7D003E
meta.var.expr.jsx#900048
meta.var.expr.ts#900048
meta.var.expr.tsx#7D003E
storage.modifier.js#830042
storage.modifier.jsx#96004B
storage.modifier.ts#96004B
storage.modifier.tsx#A30052
storage.type#7D003E
string.template#96004B
support.constant#8A0045
support.function.dom.js#900048
support.function.dom.jsx#900048
support.function.dom.ts#900048
support.function.dom.tsx#900048
support.variable.property.js#900048
support.variable.property.jsx#96004B
support.variable.property.ts#900048
support.variable.property.tsx#900048
variable.language.constructor#900048underline
variable.language.this#900048
meta.tag.js#96004B
meta.tag.jsx#8A0045
meta.tag.ts#900048
meta.tag.tsx#900048
support.type.object.module.js#900048
support.type.object.module.jsx#900048
support.type.object.module.ts#900048
support.type.object.module.tsx#7D003E
punctuation.definition.parameters.begin.js#96004B
punctuation.definition.parameters.begin.jsx#830042
punctuation.definition.parameters.begin.ts#96004B
punctuation.definition.parameters.begin.tsx#900048
punctuation.definition.parameters.end.js#9D004E
punctuation.definition.parameters.end.jsx#900048
punctuation.definition.parameters.end.ts#8A0045
punctuation.definition.parameters.end.tsx#900048
punctuation.definition.parameters.end.js#8A0045
punctuation.definition.parameters.end.jsx#8A0045
punctuation.definition.parameters.end.ts#830042
punctuation.definition.parameters.end.tsx#900048
markup.quote#9D004E
entity.other.attribute-name.js#900048
entity.other.attribute-name.jsx#900048
entity.other.attribute-name.ts#830042
entity.other.attribute-name.tsx#900048
comment#3a0088
constant.language#3a0088
constant.other#3a0088
keyword.control.flow.js#900048
keyword.control.flow.jsx#900048
keyword.control.flow.ts#320076
keyword.control.flow.tsx#3a0088
keyword.control.module.js#320076
keyword.control.module.jsx#3a0088
keyword.control.module.ts#3a0088
keyword.control.module.tsx#3a0088
keyword.operator.accessor#35007C
markup.italic#3a0088
meta.import.js#3a0088
meta.import.jsx#370082
meta.import.ts#3a0088
meta.import.tsx#3a0088
meta.object-literal.key.js#3a0088
meta.object-literal.key.jsx#42009A
meta.object-literal.key.ts#3a0088
meta.object-literal.key.tsx#3a0088
meta.paragraph.markdown#3D008E
punctuation.definition.block.js#3a0088
punctuation.definition.block.jsx#3D008E
punctuation.definition.block.ts#3D008E
punctuation.definition.block.tsx#3a0088
punctuation.separator.parameter.js#3a0088
punctuation.separator.parameter.jsx#3a0088
punctuation.separator.parameter.ts#3a0088
punctuation.separator.parameter.tsx#3D008E
string.quoted.single.js#35007C
string.quoted.single.jsx#3D008E
string.quoted.single.ts#3F0094
string.quoted.single.tsx#370082
string.quoted.single.json#370082
support.class.promise.js#3a0088
support.class.promise.jsx#3a0088
support.class.promise.ts#3a0088
support.class.promise.tsx#3D008E
support.function#3a0088
keyword.control.import.js#3F0094
keyword.control.import.jsx#3a0088
keyword.control.import.ts#35007C
keyword.control.import.tsx#3a0088
keyword.control.from.js#370082
keyword.control.from.jsx#370082
keyword.control.from.ts#3a0088
keyword.control.from.tsx#3D008E
keyword.control.export.js#3a0088
keyword.control.export.jsx#3a0088
keyword.control.export.ts#3a0088
keyword.control.export.tsx#3a0088
keyword.control.default.js#3a0088
keyword.control.default.jsx#320076
keyword.control.default.ts#3a0088
keyword.control.default.tsx#3a0088
entity.name.class#370082underline
support.function.console.js#320076
support.function.console.jsx#3a0088
support.function.console.ts#3F0094
support.function.console.tsx#3D008E
variable.language#3a0088
invalid#35007Cunderline
support.type.object.console.js#3a0088
support.type.object.console.jsx#3a0088
support.type.object.console.ts#3D008E
support.type.object.console.tsx#3a0088
variable.parameter#3a0088
comment.block.documentation#42009A
comment.line.double-slash#370082
constant.language.null.js#016C70
constant.language.null.jsx#01676b
constant.language.null.ts#01676b
constant.language.null.tsx#016266
entity.name.type#016266
meta.parameters.js#016266
meta.parameters.jsx#01676b
meta.parameters.ts#01676b
meta.parameters.tsx#01676b
variable.other.class.js#01676b
variable.other.class.jsx#01676b
variable.other.class.ts#016266
variable.other.class.tsx#016266
constant.other.object.key.js#01676b
constant.other.object.key.jsx#01676b
constant.other.object.key.ts#016266
constant.other.object.key.tsx#016C70
entity.other.inherited-class#016C70
markup.heading.markdown#017579
meta.brace.round.js#01676b
meta.brace.round.jsx#016C70
meta.brace.round.ts#01676b
meta.brace.round.tsx#015E61
entity.name.function#3D008Eunderline
meta.tag.attributes.js#015E61
meta.tag.attributes.jsx#01676b
meta.tag.attributes.ts#016266
meta.tag.attributes.tsx#01676b
punctuation.accessor.js#01676b
punctuation.accessor.jsx#015E61
punctuation.accessor.ts#015E61
punctuation.accessor.tsx#01595D
punctuation.separator.comma.js#016266
punctuation.separator.comma.jsx#01676b
punctuation.separator.comma.ts#01676b
punctuation.separator.comma.tsx#01676b
source.js#016266
source.jsx#01676b
source.ts#01595D
source.tsx#01595D
variable.other.property.js#01676b
variable.other.property.jsx#017579
variable.other.property.ts#01676b
variable.other.property.tsx#01676b
storage.modifier.async.js#01676b
storage.modifier.async.jsx#01676b
storage.modifier.async.ts#016266
storage.modifier.async.tsx#016266
support.class.builtin.js#01676b
support.class.builtin.jsx#01676b
support.class.builtin.ts#016266
support.class.builtin.tsx#01676b
support.type.primitive.js#016C70
support.type.primitive.jsx#01595D
support.type.primitive.ts#01676b
support.type.primitive.tsx#015E61
support.variable.property.js#01676b
support.variable.property.jsx#016266
support.variable.property.ts#016C70
support.variable.property.tsx#01676b
variable#015E61
variable.other.object.js#015E61
variable.other.object.jsx#01676b
variable.other.object.ts#016266
variable.other.object.tsx#01676b
variable.other.readwrite#016266
variable.other.readwrite.js#015E61
variable.other.readwrite.jsx#01676b
variable.other.readwrite.ts#01676b
variable.other.readwrite.tsx#01676b