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

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#459d72
source.css#459d72
source.go#459d72
support.constant#5482ab
punctuation.separator.parameter.js#5482ab
punctuation.separator.parameter.jsx#497094
punctuation.separator.parameter.ts#497094
punctuation.separator.parameter.tsx#5482ab
constant.character#5482ab
constant.language#5482ab
constant.other#5482ab
comment#5482ab
markup.italic#507CA3
meta.object-literal.key.js#507CA3
meta.object-literal.key.jsx#5482ab
meta.object-literal.key.ts#507CA3
meta.object-literal.key.tsx#5C88AF
comment.block.documentation#5482ab
comment.line.double-slash#5482ab
punctuation.accessor.js#5C88AF
punctuation.accessor.jsx#638DB3
punctuation.accessor.ts#5482ab
punctuation.accessor.tsx#5482ab
variable.language#507CA3
variable.other.object.js#5482ab
variable.other.object.jsx#5482ab
variable.other.object.ts#5482ab
variable.other.object.tsx#5482ab
variable.other.readwrite#4C769C
variable.other.readwrite.js#5482ab
variable.other.readwrite.jsx#5482ab
variable.other.readwrite.ts#5482ab
variable.other.readwrite.tsx#5482ab
punctuation.separator.key-value.js#99555A
punctuation.separator.key-value.jsx#A0595E
punctuation.separator.key-value.ts#A65E64
punctuation.separator.key-value.tsx#A65E64
storage.modifier.async.js#8A4D51
storage.modifier.async.jsx#99555A
storage.modifier.async.ts#A0595E
storage.modifier.async.tsx#A0595E
meta.brace.round.js#A0595E
meta.brace.round.jsx#A0595E
meta.brace.round.ts#AE6D71
meta.brace.round.tsx#925156
entity.other.inherited-class#925156
support.class.builtin.js#A65E64
support.class.builtin.jsx#A0595E
support.class.builtin.ts#99555A
support.class.builtin.tsx#A0595E
meta.tag.attributes.js#99555A
meta.tag.attributes.jsx#A65E64
meta.tag.attributes.ts#99555A
meta.tag.attributes.tsx#A0595E
keyword.control.module.js#A0595E
keyword.control.module.jsx#A0595E
keyword.control.module.ts#A65E64
keyword.control.module.tsx#A0595E
keyword.operator.accessor#A0595E
invalid#A0595Eunderline
constant.numeric#A0595E
keyword#A0595E
meta.var.expr.js#A0595E
meta.var.expr.jsx#A65E64
meta.var.expr.ts#A65E64
meta.var.expr.tsx#99555A
keyword.control.import.js#AE6D71
keyword.control.import.jsx#99555A
keyword.control.import.ts#AE6D71
keyword.control.import.tsx#A0595E
keyword.control.from.js#A0595E
keyword.control.from.jsx#99555A
keyword.control.from.ts#AA666A
keyword.control.from.tsx#A65E64
keyword.control.export.js#99555A
keyword.control.export.jsx#8A4D51
keyword.control.export.ts#A0595E
keyword.control.export.tsx#AE6D71
keyword.control.default.js#A0595E
keyword.control.default.jsx#A65E64
keyword.control.default.ts#AE6D71
keyword.control.default.tsx#A0595E
support.type.object.module.js#925156
support.type.object.module.jsx#99555A
support.type.object.module.ts#A0595E
support.type.object.module.tsx#99555A
punctuation.definition.parameters.begin.js#459d72
punctuation.definition.parameters.begin.jsx#3C8863
punctuation.definition.parameters.begin.ts#459d72
punctuation.definition.parameters.begin.tsx#42966D
punctuation.definition.parameters.end.js#459d72
punctuation.definition.parameters.end.jsx#459d72
punctuation.definition.parameters.end.ts#48A477
punctuation.definition.parameters.end.tsx#459d72
punctuation.definition.parameters.end.js#4BAB7C
punctuation.definition.parameters.end.jsx#459d72
punctuation.definition.parameters.end.ts#459d72
punctuation.definition.parameters.end.tsx#42966D
markup.quote#3C8863
meta.tag.js#48A477
meta.tag.jsx#4BAB7C
meta.tag.ts#3F8F68
meta.tag.tsx#4BAB7C
meta.parameters.js#459d72
meta.parameters.jsx#48A477
meta.parameters.ts#42966D
meta.parameters.tsx#459d72
meta.brace.square.js#42966D
meta.brace.square.jsx#459d72
meta.brace.square.ts#459d72
meta.brace.square.tsx#459d72
variable.other.class.js#4FB281
variable.other.class.jsx#42966D
variable.other.class.ts#3F8F68
variable.other.class.tsx#459d72
constant.other.object.key.js#459d72
constant.other.object.key.jsx#4FB281
constant.other.object.key.ts#459d72
constant.other.object.key.tsx#459d72
entity.name.function.method#3C8863
string.template#459d72
support.type.property-name.json#3C8863
variable.other.property.js#459d72
variable.other.property.jsx#4BAB7C
variable.other.property.ts#4FB281
variable.other.property.tsx#459d72
entity.name.tag#3E6564underline
markup.italic#3b6160
punctuation.accessor.js#385D5C
punctuation.accessor.jsx#3b6160
punctuation.accessor.ts#385D5C
punctuation.accessor.tsx#335453
source.js#3b6160
source.jsx#3b6160
source.ts#3b6160
source.tsx#3b6160
storage.modifier.js#3b6160
storage.modifier.jsx#3b6160
storage.modifier.ts#385D5C
storage.modifier.tsx#3b6160
storage.type#436E6D
string.quoted.single.js#385D5C
string.quoted.single.jsx#365857
string.quoted.single.ts#3b6160
string.quoted.single.tsx#3b6160
support.function.dom.js#436E6D
support.function.dom.jsx#3b6160
support.function.dom.ts#406A69
support.function.dom.tsx#385D5C
support.variable.property.js#3E6564
support.variable.property.jsx#3b6160
support.variable.property.ts#3b6160
support.variable.property.tsx#406A69
variable.language.constructor#3b6160underline
variable.language.this#335453
constant.language.boolean#83076B
constant.language.null.js#780662
constant.language.null.jsx#780662
constant.language.null.ts#680555
constant.language.null.tsx#780662
entity.name.class#780662underline
entity.name.function#73065Eunderline
entity.name.type#73065Eunderline
markup.heading.markdown#73065E
punctuation.separator.comma.js#73065E
punctuation.separator.comma.jsx#780662
punctuation.separator.comma.ts#83076B
punctuation.separator.comma.tsx#680555
support.variable.property.js#780662
support.variable.property.jsx#780662
support.variable.property.ts#780662
support.variable.property.tsx#780662
support.type.primitive.js#780662
support.type.primitive.jsx#780662
support.type.primitive.ts#83076B
support.type.primitive.tsx#780662
variable#780662
variable.parameter#0063A0
support.function#0063A0
meta.import.js#0068a8
meta.import.jsx#0063A0
meta.import.ts#0068a8
meta.import.tsx#0068a8
meta.paragraph.markdown#0068a8
entity.other.attribute-name.js#0068a8
entity.other.attribute-name.jsx#0068a8
entity.other.attribute-name.ts#0076BF
entity.other.attribute-name.tsx#0068a8
string.quoted.single.js#005F99
string.quoted.single.jsx#0068a8
string.quoted.single.ts#0063A0
string.quoted.single.tsx#0063A0
string.quoted.single.json#005F99
support.class.promise.js#005F99
support.class.promise.jsx#006DB0
support.class.promise.ts#005F99
support.class.promise.tsx#0076BF
support.type.object.console.js#0068a8
support.type.object.console.jsx#005A91
support.type.object.console.ts#006DB0
support.type.object.console.tsx#0068a8
support.function.console.js#0063A0
support.function.console.jsx#0063A0
support.function.console.ts#006DB0
support.function.console.tsx#005A91
punctuation.definition.block.js#0068a8
punctuation.definition.block.jsx#006DB0
punctuation.definition.block.ts#0068a8
punctuation.definition.block.tsx#006DB0