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#d8d5c9
  • 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#d8d5c9
  • 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#2f586f—
source.css#2f586f—
source.go#2f586f—
constant.character#DD4F26—
constant.language.boolean#DD4F26—
entity.name.tag#DD4F26underline
keyword#E1613C—
markup.italic#df5831—
entity.name.function.method#E1613C—
string.quoted.single.js#E1613C—
string.quoted.single.jsx#df5831—
string.quoted.single.ts#DD4F26—
string.quoted.single.tsx#DD4F26—
support.type.property-name.json#df5831—
punctuation.accessor.js#df5831—
punctuation.accessor.jsx#E26946—
punctuation.accessor.ts#df5831—
punctuation.accessor.tsx#CC4620—
punctuation.separator.key-value.js#DD4F26—
punctuation.separator.key-value.jsx#CC4620—
punctuation.separator.key-value.ts#df5831—
punctuation.separator.key-value.tsx#df5831—
constant.numeric#df5831—
meta.brace.square.js#CC4620—
meta.brace.square.jsx#df5831—
meta.brace.square.ts#E26946—
meta.brace.square.tsx#df5831—
meta.var.expr.js#CC4620—
meta.var.expr.jsx#df5831—
meta.var.expr.ts#df5831—
meta.var.expr.tsx#CC4620—
storage.modifier.js#D64A21—
storage.modifier.jsx#E1613C—
storage.modifier.ts#E1613C—
storage.modifier.tsx#E47251—
storage.type#CC4620—
string.template#E1613C—
support.constant#DD4F26—
support.function.dom.js#df5831—
support.function.dom.jsx#df5831—
support.function.dom.ts#df5831—
support.function.dom.tsx#df5831—
support.variable.property.js#df5831—
support.variable.property.jsx#E1613C—
support.variable.property.ts#df5831—
support.variable.property.tsx#df5831—
variable.language.constructor#df5831underline
variable.language.this#df5831—
meta.tag.js#E1613C—
meta.tag.jsx#DD4F26—
meta.tag.ts#df5831—
meta.tag.tsx#df5831—
support.type.object.module.js#df5831—
support.type.object.module.jsx#df5831—
support.type.object.module.ts#df5831—
support.type.object.module.tsx#CC4620—
punctuation.definition.parameters.begin.js#E1613C—
punctuation.definition.parameters.begin.jsx#D64A21—
punctuation.definition.parameters.begin.ts#E1613C—
punctuation.definition.parameters.begin.tsx#df5831—
punctuation.definition.parameters.end.js#E26946—
punctuation.definition.parameters.end.jsx#df5831—
punctuation.definition.parameters.end.ts#DD4F26—
punctuation.definition.parameters.end.tsx#df5831—
punctuation.definition.parameters.end.js#DD4F26—
punctuation.definition.parameters.end.jsx#DD4F26—
punctuation.definition.parameters.end.ts#D64A21—
punctuation.definition.parameters.end.tsx#df5831—
markup.quote#E26946—
entity.other.attribute-name.js#df5831—
entity.other.attribute-name.jsx#df5831—
entity.other.attribute-name.ts#D64A21—
entity.other.attribute-name.tsx#df5831—
comment#8c7647—
constant.language#8c7647—
constant.other#8c7647—
keyword.control.flow.js#df5831—
keyword.control.flow.jsx#df5831—
keyword.control.flow.ts#79663D—
keyword.control.flow.tsx#8c7647—
keyword.control.module.js#79663D—
keyword.control.module.jsx#8c7647—
keyword.control.module.ts#8c7647—
keyword.control.module.tsx#8c7647—
keyword.operator.accessor#7F6B41—
markup.italic#8c7647—
meta.import.js#8c7647—
meta.import.jsx#867144—
meta.import.ts#8c7647—
meta.import.tsx#8c7647—
meta.object-literal.key.js#8c7647—
meta.object-literal.key.jsx#9F8651—
meta.object-literal.key.ts#8c7647—
meta.object-literal.key.tsx#8c7647—
meta.paragraph.markdown#927B4A—
punctuation.definition.block.js#8c7647—
punctuation.definition.block.jsx#927B4A—
punctuation.definition.block.ts#927B4A—
punctuation.definition.block.tsx#8c7647—
punctuation.separator.parameter.js#8c7647—
punctuation.separator.parameter.jsx#8c7647—
punctuation.separator.parameter.ts#8c7647—
punctuation.separator.parameter.tsx#927B4A—
string.quoted.single.js#7F6B41—
string.quoted.single.jsx#927B4A—
string.quoted.single.ts#99814D—
string.quoted.single.tsx#867144—
string.quoted.single.json#867144—
support.class.promise.js#8c7647—
support.class.promise.jsx#8c7647—
support.class.promise.ts#8c7647—
support.class.promise.tsx#927B4A—
support.function#8c7647—
keyword.control.import.js#99814D—
keyword.control.import.jsx#8c7647—
keyword.control.import.ts#7F6B41—
keyword.control.import.tsx#8c7647—
keyword.control.from.js#867144—
keyword.control.from.jsx#867144—
keyword.control.from.ts#8c7647—
keyword.control.from.tsx#927B4A—
keyword.control.export.js#8c7647—
keyword.control.export.jsx#8c7647—
keyword.control.export.ts#8c7647—
keyword.control.export.tsx#8c7647—
keyword.control.default.js#8c7647—
keyword.control.default.jsx#79663D—
keyword.control.default.ts#8c7647—
keyword.control.default.tsx#8c7647—
entity.name.class#867144underline
support.function.console.js#79663D—
support.function.console.jsx#8c7647—
support.function.console.ts#99814D—
support.function.console.tsx#927B4A—
variable.language#8c7647—
invalid#7F6B41underline
support.type.object.console.js#8c7647—
support.type.object.console.jsx#8c7647—
support.type.object.console.ts#927B4A—
support.type.object.console.tsx#8c7647—
variable.parameter#8c7647—
comment.block.documentation#9F8651—
comment.line.double-slash#867144—
constant.language.null.js#315C74—
constant.language.null.jsx#2f586f—
constant.language.null.ts#2f586f—
constant.language.null.tsx#2D546A—
entity.name.type#2D546A—
meta.parameters.js#2D546A—
meta.parameters.jsx#2f586f—
meta.parameters.ts#2f586f—
meta.parameters.tsx#2f586f—
variable.other.class.js#2f586f—
variable.other.class.jsx#2f586f—
variable.other.class.ts#2D546A—
variable.other.class.tsx#2D546A—
constant.other.object.key.js#2f586f—
constant.other.object.key.jsx#2f586f—
constant.other.object.key.ts#2D546A—
constant.other.object.key.tsx#315C74—
entity.other.inherited-class#315C74—
markup.heading.markdown#35647E—
meta.brace.round.js#2f586f—
meta.brace.round.jsx#315C74—
meta.brace.round.ts#2f586f—
meta.brace.round.tsx#2B5065—
entity.name.function#927B4Aunderline
meta.tag.attributes.js#2B5065—
meta.tag.attributes.jsx#2f586f—
meta.tag.attributes.ts#2D546A—
meta.tag.attributes.tsx#2f586f—
punctuation.accessor.js#2f586f—
punctuation.accessor.jsx#2B5065—
punctuation.accessor.ts#2B5065—
punctuation.accessor.tsx#294C60—
punctuation.separator.comma.js#2D546A—
punctuation.separator.comma.jsx#2f586f—
punctuation.separator.comma.ts#2f586f—
punctuation.separator.comma.tsx#2f586f—
source.js#2D546A—
source.jsx#2f586f—
source.ts#294C60—
source.tsx#294C60—
variable.other.property.js#2f586f—
variable.other.property.jsx#35647E—
variable.other.property.ts#2f586f—
variable.other.property.tsx#2f586f—
storage.modifier.async.js#2f586f—
storage.modifier.async.jsx#2f586f—
storage.modifier.async.ts#2D546A—
storage.modifier.async.tsx#2D546A—
support.class.builtin.js#2f586f—
support.class.builtin.jsx#2f586f—
support.class.builtin.ts#2D546A—
support.class.builtin.tsx#2f586f—
support.type.primitive.js#315C74—
support.type.primitive.jsx#294C60—
support.type.primitive.ts#2f586f—
support.type.primitive.tsx#2B5065—
support.variable.property.js#2f586f—
support.variable.property.jsx#2D546A—
support.variable.property.ts#315C74—
support.variable.property.tsx#2f586f—
variable#2B5065—
variable.other.object.js#2B5065—
variable.other.object.jsx#2f586f—
variable.other.object.ts#2D546A—
variable.other.object.tsx#2f586f—
variable.other.readwrite#2D546A—
variable.other.readwrite.js#2B5065—
variable.other.readwrite.jsx#2f586f—
variable.other.readwrite.ts#2f586f—
variable.other.readwrite.tsx#2f586f—