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#f9f6f2
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#bdc3c725
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#bdc3c755
  • editor.selectionHighlightBackground#bdc3c788
  • editor.wordHighlightBackground#bdc3c7aa
  • editor.wordHighlightStrongBackground#bdc3c7dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#bdc3c7
  • 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#bdc3c7
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#bdc3c7
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#bdc3c7
  • statusBar.foreground#35495f
  • tab.activeBackground#f9f6f2
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#bdc3c7
  • tab.inactiveBackground#bdc3c7
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#bdc3c7
  • tab.unfocusedActiveBorder#bdc3c7
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#5a6598faunderline
source.go#6E3E53C6
source.json#6E3E53C6
source.css#6E3E53C6
markup.italic#5a6598f3
punctuation.accessor.js#5a6598fa
punctuation.accessor.jsx#5a6598fa
punctuation.accessor.ts#5a6598f3
punctuation.accessor.tsx#5a6598fa
source.js#5a6598f3
source.jsx#5a6598fa
source.ts#5a6598f3
source.tsx#5a6598f3
storage.modifier.js#5a6598DC
storage.modifier.jsx#5a6598B4
storage.modifier.ts#5a6598fa
storage.modifier.tsx#5a6598fa
storage.type#5a6598C8
string.quoted.single.js#5a6598f3
string.quoted.single.jsx#5a6598fa
string.quoted.single.ts#5a6598fa
string.quoted.single.tsx#5a6598C8
support.function.dom.js#5a6598f3
support.function.dom.jsx#5a6598fa
support.function.dom.ts#5a6598fa
support.function.dom.tsx#5a6598fa
support.variable.property.js#5a6598f3
support.variable.property.jsx#5a6598fa
support.variable.property.ts#5a6598fa
support.variable.property.tsx#5a6598fa
variable.language.constructor#5a6598f3underline
variable.language.this#5a6598f3
meta.var.expr.js#5a6598B4
meta.var.expr.jsx#5a6598DC
meta.var.expr.ts#5a6598fa
meta.var.expr.tsx#5a6598fa
variable#B45948f3
keyword.control.import.js#B45948f3
keyword.control.import.jsx#B45948f1
keyword.control.import.ts#B45948f3
keyword.control.import.tsx#B45948D3
keyword.control.from.js#B45948AB
keyword.control.from.jsx#B45948f1
keyword.control.from.ts#B45948AB
keyword.control.from.tsx#B45948f1
keyword.control.export.js#B45948f1
keyword.control.export.jsx#B45948f1
keyword.control.export.ts#B45948f1
keyword.control.export.tsx#B45948f3
variable.parameter#B45948f1
support.function#B45948f1
meta.import.js#B45948D3
meta.import.jsx#B45948f1
meta.import.ts#B45948f1
meta.import.tsx#B45948f1
meta.paragraph.markdown#B45948f1
entity.other.attribute-name.js#B45948f1
entity.other.attribute-name.jsx#B45948f3
entity.other.attribute-name.ts#B45948D3
entity.other.attribute-name.tsx#B45948f3
string.quoted.single.js#B45948AB
string.quoted.single.jsx#B45948f1
string.quoted.single.ts#B45948f3
string.quoted.single.tsx#B45948BF
string.quoted.single.json#B45948f1
support.class.promise.js#B45948f3
support.class.promise.jsx#B45948f3
support.class.promise.ts#B45948f1
support.class.promise.tsx#B45948f3
support.type.object.console.js#B45948BF
support.type.object.console.jsx#B45948f1
support.type.object.console.ts#B45948f3
support.type.object.console.tsx#B45948f3
support.function.console.js#B45948f1
support.function.console.jsx#B45948D3
support.function.console.ts#B45948f1
support.function.console.tsx#B45948AB
punctuation.definition.block.js#B45948D3
punctuation.definition.block.jsx#B45948BF
punctuation.definition.block.ts#B45948BF
punctuation.definition.block.tsx#B45948f3
keyword#6E3E53C6
keyword.control.default.js#6E3E53C6
keyword.control.default.jsx#6E3E53C6
keyword.control.default.ts#6E3E5380
keyword.control.default.tsx#6E3E53C6
support.type.object.module.js#6E3E53C6
support.type.object.module.jsx#6E3E53A8
support.type.object.module.ts#6E3E53C6
support.type.object.module.tsx#6E3E53C6
keyword.control.module.js#6E3E53f3
keyword.control.module.jsx#6E3E53C6
keyword.control.module.ts#6E3E53EE
keyword.control.module.tsx#6E3E53A8
keyword.operator.accessor#6E3E53C6
invalid#6E3E53C6underline
constant.numeric#6E3E53C6
constant.language.boolean#6E3E53A8
constant.language.null.js#6E3E53C6
constant.language.null.jsx#6E3E53f3
constant.language.null.ts#6E3E53C6
constant.language.null.tsx#6E3E53EE
entity.name.class#6E3E53C6underline
entity.name.function#6E3E53C6underline
entity.name.type#6E3E5394underline
markup.heading.markdown#6E3E5380
punctuation.separator.comma.js#6E3E53C6
punctuation.separator.comma.jsx#6E3E53C6
punctuation.separator.comma.ts#6E3E53EE
punctuation.separator.comma.tsx#6E3E53f3
support.variable.property.js#6E3E53EE
support.variable.property.jsx#6E3E53C6
support.variable.property.ts#6E3E53f3
support.variable.property.tsx#6E3E53C6
support.type.primitive.js#6E3E53C6
support.type.primitive.jsx#6E3E53f3
support.type.primitive.ts#6E3E53A8
support.type.primitive.tsx#6E3E5394
punctuation.definition.parameters.begin.js#861D4Ff3
punctuation.definition.parameters.begin.jsx#861D4F89
punctuation.definition.parameters.begin.ts#861D4F9D
punctuation.definition.parameters.begin.tsx#861D4FCF
punctuation.definition.parameters.end.js#861D4Ff3
punctuation.definition.parameters.end.jsx#861D4Ff3
punctuation.definition.parameters.end.ts#861D4FCF
punctuation.definition.parameters.end.tsx#861D4FB1
punctuation.definition.parameters.end.js#861D4FB1
punctuation.definition.parameters.end.jsx#861D4Ff3
punctuation.definition.parameters.end.ts#861D4FCF
punctuation.definition.parameters.end.tsx#861D4Ff3
markup.quote#861D4FCF
meta.tag.js#861D4FCF
meta.tag.jsx#861D4FCF
meta.tag.ts#861D4FCF
meta.tag.tsx#861D4Ff3
meta.parameters.js#861D4F9D
meta.parameters.jsx#861D4FCF
meta.parameters.ts#861D4F9D
meta.parameters.tsx#861D4FB1
meta.brace.square.js#861D4FCF
meta.brace.square.jsx#861D4FCF
meta.brace.square.ts#861D4Ff3
meta.brace.square.tsx#861D4Ff3
variable.other.class.js#861D4Ff3
variable.other.class.jsx#861D4FCF
variable.other.class.ts#861D4Ff3
variable.other.class.tsx#861D4Ff3
punctuation.separator.key-value.js#861D4Ff3
punctuation.separator.key-value.jsx#861D4FCF
punctuation.separator.key-value.ts#861D4FCF
punctuation.separator.key-value.tsx#861D4Ff3
storage.modifier.async.js#861D4FB1
storage.modifier.async.jsx#861D4Ff3
storage.modifier.async.ts#861D4Ff3
storage.modifier.async.tsx#861D4Ff3
meta.brace.round.js#861D4FCF
meta.brace.round.jsx#861D4F9D
meta.brace.round.ts#861D4Ff3
meta.brace.round.tsx#861D4Ff3
constant.other.object.key.js#861D4FB1
constant.other.object.key.jsx#861D4FB1
constant.other.object.key.ts#861D4FCF
constant.other.object.key.tsx#861D4Ff3
entity.name.function.method#861D4FCF
string.template#861D4FCF
support.type.property-name.json#861D4Ff3
variable.other.property.js#861D4Ff3
variable.other.property.jsx#861D4Ff3
variable.other.property.ts#861D4FB1
variable.other.property.tsx#861D4FCF
support.constant#4381A8E9
punctuation.separator.parameter.js#4381A8E9
punctuation.separator.parameter.jsx#4381A8B7
punctuation.separator.parameter.ts#4381A8E9
punctuation.separator.parameter.tsx#4381A8E9
constant.character#4381A8f3
constant.language#4381A8E9
constant.other#4381A8E9
comment#4381A8f3
markup.italic#4381A8f3
meta.object-literal.key.js#4381A8E9
meta.object-literal.key.jsx#4381A8E9
meta.object-literal.key.ts#4381A8f3
meta.object-literal.key.tsx#4381A8f3
comment.block.documentation#4381A8f3
comment.line.double-slash#4381A8B7
punctuation.accessor.js#4381A8f3
punctuation.accessor.jsx#4381A8E9
punctuation.accessor.ts#4381A8E9
punctuation.accessor.tsx#4381A8E9
variable.language#4381A8E9
variable.other.object.js#4381A8f3
variable.other.object.jsx#4381A8E9
variable.other.object.ts#4381A8E9
variable.other.object.tsx#4381A8B7
variable.other.readwrite#4381A8f3
variable.other.readwrite.js#4381A8E9
variable.other.readwrite.jsx#4381A8f3
variable.other.readwrite.ts#4381A8E9
variable.other.readwrite.tsx#4381A8E9
entity.other.inherited-class#4381A8A3
support.class.builtin.js#4381A8E9
support.class.builtin.jsx#4381A8A3
support.class.builtin.ts#4381A8E9
support.class.builtin.tsx#4381A8f3
meta.tag.attributes.js#4381A8B7
meta.tag.attributes.jsx#4381A8E9
meta.tag.attributes.ts#4381A8E9
meta.tag.attributes.tsx#4381A8E9