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#e7e7e7
  • badge.foreground#3f7063
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#F1F1F1
  • editor.findMatchBackground#87a192
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.inactiveSelectionBackground#aaab9c66
  • editor.lineHighlightBackground#F1F1F1
  • editor.lineHighlightBorder#9c824a
  • editor.selectionBackground#cdd0d255
  • editor.selectionHighlightBackground#cdd0d277
  • editor.wordHighlightBackground#aa769b55
  • editor.wordHighlightStrongBackground#410a0b44
  • editorBracketMatch.background#e7e7e7
  • editorBracketMatch.border#fafafa
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#cdd0d2
  • editorHoverWidget.background#d1d3d4
  • editorHoverWidget.border#d78d9f
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#d1d3d4
  • editorSuggestWidget.border#d78d9f
  • editorSuggestWidget.foreground#2a3343
  • editorSuggestWidget.highlightForeground#820014
  • editorSuggestWidget.selectedBackground#2c3d5244
  • editorWidget.background#cdd0d2
  • editorWidget.border#d78d9f
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • foreground#24283b
  • git.color.modified#4d0e0b
  • gitDecoration.addedResourceForeground#53245b
  • gitDecoration.modifiedResourceForeground#034694
  • gitDecoration.untrackedResourceForeground#aa769b
  • list.activeSelectionBackground#d1343822
  • list.activeSelectionForeground#2a3343
  • list.dropBackground#db82d6cc
  • list.errorForeground#a50044
  • list.focusBackground#6d50a188
  • list.highlightForeground#4d0e0b
  • list.hoverBackground#ad680066
  • list.hoverForeground#e7e7e7
  • list.inactiveFocusBackground#885f66cc
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#4d0e0b
  • scrollbar.shadow#cf6f4b
  • scrollbarSlider.background#cdd0d2
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#cdd0d2
  • sideBar.border#8382ae
  • sideBar.foreground#85483d
  • sideBarSectionHeader.background#aebabe
  • sideBarSectionHeader.foreground#2a3343
  • sideBarTitle.foreground#30322e
  • statusBar.background#cdd0d2
  • statusBar.foreground#35495f
  • tab.activeBackground#F1F1F1
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#cdd0d2
  • tab.inactiveBackground#cdd0d2
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#cdd0d2
  • tab.unfocusedActiveBorder#cdd0d2
  • tab.unfocusedActiveForeground#aa769b
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#C541A7underline
markup.italic#b13695
text.html.derivative#A13188
punctuation.accessor.js#b13695
punctuation.accessor.jsx#b13695
punctuation.accessor.ts#B9389C
punctuation.accessor.tsx#b13695
source.js#B9389C
source.jsx#b13695
source.ts#b13695
source.tsx#A9348E
storage.modifier.js#b13695
storage.modifier.jsx#C541A7
storage.modifier.ts#b13695
storage.modifier.tsx#C13BA2
punctuation.separator.key-value.js#b13695
punctuation.separator.key-value.jsx#992F81
punctuation.separator.key-value.ts#B9389C
punctuation.separator.key-value.tsx#A9348E
storage.type#b13695
string.quoted.single.js#C541A7
string.quoted.single.jsx#b13695
string.quoted.single.ts#A13188
string.quoted.single.tsx#b13695
support.function.dom.js#C541A7
support.function.dom.jsx#B9389C
support.function.dom.ts#b13695
support.function.dom.tsx#A9348E
support.variable.property.js#b13695
support.variable.property.jsx#C541A7
support.variable.property.ts#B9389C
support.variable.property.tsx#B9389C
variable.language.constructor#A9348Eunderline
variable.language.this#b13695
meta.var.expr.js#38978D
meta.var.expr.jsx#40ABA0
meta.var.expr.ts#38978D
meta.var.expr.tsx#38978D
keyword#38978D
expression.ng#38978D
meta.brace.round.js#38978D
meta.brace.round.jsx#3DA59A
meta.brace.round.ts#38978D
meta.brace.round.tsx#38978D
constant.language.boolean#40ABA0
constant.numeric#40ABA0
constant.language.null.js#3B9E93
constant.language.null.jsx#38978D
constant.language.null.ts#38978D
constant.language.null.tsx#38978D
entity.name.class#38978Dunderline
entity.name.function#38978Dunderline
entity.name.type#38978Dunderline
markup.heading.markdown#38978D
punctuation.separator.comma.js#359087
punctuation.separator.comma.jsx#38978D
punctuation.separator.comma.ts#359087
punctuation.separator.comma.tsx#359087
meta.tag.attributes.js#38978D
meta.tag.attributes.jsx#3B9E93
meta.tag.attributes.ts#38978D
meta.tag.attributes.tsx#38978D
support.variable.property.js#38978D
support.variable.property.jsx#38978D
support.variable.property.ts#3B9E93
support.variable.property.tsx#38978D
support.type.primitive.js#338980
support.type.primitive.jsx#359087
support.type.primitive.ts#359087
support.type.primitive.tsx#3B9E93
variable#30837A
source.go#735FD8
string.quoted.double.html#614ad3
keyword.control.import.js#614ad3
keyword.control.import.jsx#7C69DB
keyword.control.import.ts#614ad3
keyword.control.import.tsx#614ad3
source.json#614ad3
source.css#614ad3
variable.parameter#614ad3
support.function#614ad3
support.type.object.module.js#5840D0
support.type.object.module.jsx#5840D0
support.type.object.module.ts#5840D0
support.type.object.module.tsx#5840D0
meta.import.js#614ad3
meta.import.jsx#614ad3
meta.import.ts#614ad3
meta.import.tsx#614ad3
meta.paragraph.markdown#614ad3
entity.other.attribute-name.js#6A54D6
entity.other.attribute-name.jsx#4930C6
entity.other.attribute-name.ts#5840D0
entity.other.attribute-name.tsx#614ad3
string.quoted.single.js#5840D0
string.quoted.single.jsx#614ad3
string.quoted.single.ts#614ad3
string.quoted.single.tsx#5840D0
string.quoted.single.json#735FD8
keyword.control.module.js#614ad3
keyword.control.module.jsx#614ad3
keyword.control.module.ts#614ad3
keyword.control.module.tsx#614ad3
support.class.promise.js#735FD8
support.class.promise.jsx#5840D0
support.class.promise.ts#5840D0
support.class.promise.tsx#614ad3
support.type.object.console.js#4F35CE
support.type.object.console.jsx#614ad3
support.type.object.console.ts#7C69DB
support.type.object.console.tsx#614ad3
support.function.console.js#5840D0
support.function.console.jsx#614ad3
support.function.console.ts#5840D0
support.function.console.tsx#614ad3
punctuation.definition.block.js#4F35CE
punctuation.definition.block.jsx#614ad3
punctuation.definition.block.ts#5840D0
punctuation.definition.block.tsx#614ad3
entity.other.ng-binding-name.property.html#083358
punctuation.definition.parameters.begin.js#083358
punctuation.definition.parameters.begin.jsx#083358
punctuation.definition.parameters.begin.ts#083154
punctuation.definition.parameters.begin.tsx#083358
punctuation.definition.parameters.end.js#093860
punctuation.definition.parameters.end.jsx#083358
punctuation.definition.parameters.end.ts#083358
punctuation.definition.parameters.end.tsx#083358
punctuation.definition.parameters.end.js#083154
punctuation.definition.parameters.end.jsx#083358
punctuation.definition.parameters.end.ts#083358
punctuation.definition.parameters.end.tsx#083358
keyword.control.export.js#093860
keyword.control.export.jsx#072E50
keyword.control.export.ts#083358
keyword.control.export.tsx#083358
keyword.control.from.js#083358
keyword.control.from.jsx#08355C
keyword.control.from.ts#093860
keyword.control.from.tsx#083358
markup.quote#083154
meta.tag.js#083358
meta.tag.jsx#083154
meta.tag.ts#083154
meta.tag.tsx#083358
meta.parameters.js#08355C
meta.parameters.jsx#083358
meta.parameters.ts#093860
meta.parameters.tsx#083358
meta.brace.square.js#083154
meta.brace.square.jsx#083154
meta.brace.square.ts#072C4C
meta.brace.square.tsx#072E50
variable.other.class.js#083358
variable.other.class.jsx#083358
variable.other.class.ts#083358
variable.other.class.tsx#072E50
constant.other.object.key.js#08355C
constant.other.object.key.jsx#083358
constant.other.object.key.ts#083358
constant.other.object.key.tsx#08355C
keyword.operator.accessor#083358
keyword.control.default.js#083154
keyword.control.default.jsx#083154
keyword.control.default.ts#083358
keyword.control.default.tsx#093A64
entity.name.function.method#072C4C
string.template#083358
support.type.property-name.json#083154
variable.other.property.js#072C4C
variable.other.property.jsx#083154
variable.other.property.ts#072C4C
variable.other.property.tsx#083154
entity.other.ng-binding-name.outputReplEvent.html#df5831
entity.other.inherited-class#df5831
support.constant#E26946
punctuation.separator.parameter.js#DD4F26
punctuation.separator.parameter.jsx#df5831
punctuation.separator.parameter.ts#E1613C
punctuation.separator.parameter.tsx#CC4620
constant.character#df5831
constant.language#df5831
constant.other#DD4F26
support.class.builtin.js#CC4620
support.class.builtin.jsx#DD4F26
support.class.builtin.ts#DD4F26
support.class.builtin.tsx#df5831
comment#DD4F26
markup.italic#D64A21
meta.object-literal.key.js#DD4F26
meta.object-literal.key.jsx#df5831
meta.object-literal.key.ts#df5831
meta.object-literal.key.tsx#DD4F26
comment.block.documentation#df5831
comment.line.double-slash#df5831
punctuation.accessor.js#CC4620
punctuation.accessor.jsx#df5831
punctuation.accessor.ts#DD4F26
punctuation.accessor.tsx#df5831
invalid#DD4F26underline
variable.language#df5831
storage.modifier.async.js#df5831
storage.modifier.async.jsx#df5831
storage.modifier.async.ts#E26946
storage.modifier.async.tsx#df5831
variable.other.object.js#DD4F26
variable.other.object.jsx#df5831
variable.other.object.ts#CC4620
variable.other.object.tsx#D64A21
variable.other.readwrite#df5831
variable.other.readwrite.js#df5831
variable.other.readwrite.jsx#df5831
variable.other.readwrite.ts#E26946
variable.other.readwrite.tsx#df5831