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#FAF8F3
  • 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#FAF8F3
  • 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
source.json#bb4741
source.css#bb4741
source.go#bb4741
support.constant#c03546
punctuation.separator.parameter.js#c03546
punctuation.separator.parameter.jsx#A62E3D
punctuation.separator.parameter.ts#A62E3D
punctuation.separator.parameter.tsx#c03546
constant.character#c03546
constant.language#c03546
constant.other#c03546
comment#c03546
markup.italic#B73343
meta.object-literal.key.js#B73343
meta.object-literal.key.jsx#c03546
meta.object-literal.key.ts#B73343
meta.object-literal.key.tsx#C8384A
comment.block.documentation#c03546
comment.line.double-slash#c03546
punctuation.accessor.js#C8384A
punctuation.accessor.jsx#CA4151
punctuation.accessor.ts#c03546
punctuation.accessor.tsx#c03546
variable.language#B73343
variable.other.object.js#c03546
variable.other.object.jsx#c03546
variable.other.object.ts#c03546
variable.other.object.tsx#c03546
variable.other.readwrite#AF3040
variable.other.readwrite.js#c03546
variable.other.readwrite.jsx#c03546
variable.other.readwrite.ts#c03546
variable.other.readwrite.tsx#c03546
punctuation.separator.key-value.js#7D4C8E
punctuation.separator.key-value.jsx#835095
punctuation.separator.key-value.ts#89549C
punctuation.separator.key-value.tsx#89549C
storage.modifier.async.js#714581
storage.modifier.async.jsx#7D4C8E
storage.modifier.async.ts#835095
storage.modifier.async.tsx#835095
meta.brace.round.js#835095
meta.brace.round.jsx#835095
meta.brace.round.ts#945CA8
meta.brace.round.tsx#774988
entity.other.inherited-class#774988
support.class.builtin.js#89549C
support.class.builtin.jsx#835095
support.class.builtin.ts#7D4C8E
support.class.builtin.tsx#835095
meta.tag.attributes.js#7D4C8E
meta.tag.attributes.jsx#89549C
meta.tag.attributes.ts#7D4C8E
meta.tag.attributes.tsx#835095
keyword.control.module.js#835095
keyword.control.module.jsx#835095
keyword.control.module.ts#89549C
keyword.control.module.tsx#835095
keyword.operator.accessor#835095
invalid#835095underline
constant.numeric#835095
keyword#835095
meta.var.expr.js#835095
meta.var.expr.jsx#89549C
meta.var.expr.ts#89549C
meta.var.expr.tsx#7D4C8E
keyword.control.import.js#945CA8
keyword.control.import.jsx#7D4C8E
keyword.control.import.ts#945CA8
keyword.control.import.tsx#835095
keyword.control.from.js#835095
keyword.control.from.jsx#7D4C8E
keyword.control.from.ts#8F57A2
keyword.control.from.tsx#89549C
keyword.control.export.js#7D4C8E
keyword.control.export.jsx#714581
keyword.control.export.ts#835095
keyword.control.export.tsx#945CA8
keyword.control.default.js#835095
keyword.control.default.jsx#89549C
keyword.control.default.ts#945CA8
keyword.control.default.tsx#835095
support.type.object.module.js#774988
support.type.object.module.jsx#7D4C8E
support.type.object.module.ts#835095
support.type.object.module.tsx#7D4C8E
punctuation.definition.parameters.begin.js#bb4741
punctuation.definition.parameters.begin.jsx#A23D38
punctuation.definition.parameters.begin.ts#bb4741
punctuation.definition.parameters.begin.tsx#B3443E
punctuation.definition.parameters.end.js#bb4741
punctuation.definition.parameters.end.jsx#bb4741
punctuation.definition.parameters.end.ts#BF4E48
punctuation.definition.parameters.end.tsx#bb4741
punctuation.definition.parameters.end.js#C25650
punctuation.definition.parameters.end.jsx#bb4741
punctuation.definition.parameters.end.ts#bb4741
punctuation.definition.parameters.end.tsx#B3443E
markup.quote#A23D38
meta.tag.js#BF4E48
meta.tag.jsx#C25650
meta.tag.ts#AA413B
meta.tag.tsx#C25650
meta.parameters.js#bb4741
meta.parameters.jsx#BF4E48
meta.parameters.ts#B3443E
meta.parameters.tsx#bb4741
meta.brace.square.js#B3443E
meta.brace.square.jsx#bb4741
meta.brace.square.ts#bb4741
meta.brace.square.tsx#bb4741
variable.other.class.js#C55E59
variable.other.class.jsx#B3443E
variable.other.class.ts#AA413B
variable.other.class.tsx#bb4741
constant.other.object.key.js#bb4741
constant.other.object.key.jsx#C55E59
constant.other.object.key.ts#bb4741
constant.other.object.key.tsx#bb4741
entity.name.function.method#A23D38
string.template#bb4741
support.type.property-name.json#A23D38
variable.other.property.js#bb4741
variable.other.property.jsx#C25650
variable.other.property.ts#C55E59
variable.other.property.tsx#bb4741
entity.name.tag#A45E74underline
markup.italic#9e596f
punctuation.accessor.js#97556A
punctuation.accessor.jsx#9e596f
punctuation.accessor.ts#97556A
punctuation.accessor.tsx#894D60
source.js#9e596f
source.jsx#9e596f
source.ts#9e596f
source.tsx#9e596f
storage.modifier.js#9e596f
storage.modifier.jsx#9e596f
storage.modifier.ts#97556A
storage.modifier.tsx#9e596f
storage.type#AC6C81
string.quoted.single.js#97556A
string.quoted.single.jsx#905165
string.quoted.single.ts#9e596f
string.quoted.single.tsx#9e596f
support.function.dom.js#AC6C81
support.function.dom.jsx#9e596f
support.function.dom.ts#A8657A
support.function.dom.tsx#97556A
support.variable.property.js#A45E74
support.variable.property.jsx#9e596f
support.variable.property.ts#9e596f
support.variable.property.tsx#A8657A
variable.language.constructor#9e596funderline
variable.language.this#894D60
constant.language.boolean#9B6E92
constant.language.null.js#906387
constant.language.null.jsx#906387
constant.language.null.ts#7D5675
constant.language.null.tsx#906387
entity.name.class#906387underline
entity.name.function#8A5F81underline
entity.name.type#8A5F81underline
markup.heading.markdown#8A5F81
punctuation.separator.comma.js#8A5F81
punctuation.separator.comma.jsx#906387
punctuation.separator.comma.ts#9B6E92
punctuation.separator.comma.tsx#7D5675
support.variable.property.js#906387
support.variable.property.jsx#906387
support.variable.property.ts#906387
support.variable.property.tsx#906387
support.type.primitive.js#906387
support.type.primitive.jsx#906387
support.type.primitive.ts#9B6E92
support.type.primitive.tsx#906387
variable#906387
variable.parameter#5840D0
support.function#5840D0
meta.import.js#614ad3
meta.import.jsx#5840D0
meta.import.ts#614ad3
meta.import.tsx#614ad3
meta.paragraph.markdown#614ad3
entity.other.attribute-name.js#614ad3
entity.other.attribute-name.jsx#614ad3
entity.other.attribute-name.ts#7C69DB
entity.other.attribute-name.tsx#614ad3
string.quoted.single.js#4F35CE
string.quoted.single.jsx#614ad3
string.quoted.single.ts#5840D0
string.quoted.single.tsx#5840D0
string.quoted.single.json#4F35CE
support.class.promise.js#4F35CE
support.class.promise.jsx#6A54D6
support.class.promise.ts#4F35CE
support.class.promise.tsx#7C69DB
support.type.object.console.js#614ad3
support.type.object.console.jsx#4930C6
support.type.object.console.ts#6A54D6
support.type.object.console.tsx#614ad3
support.function.console.js#5840D0
support.function.console.jsx#5840D0
support.function.console.ts#6A54D6
support.function.console.tsx#4930C6
punctuation.definition.block.js#614ad3
punctuation.definition.block.jsx#6A54D6
punctuation.definition.block.ts#614ad3
punctuation.definition.block.tsx#6A54D6