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#6a3951
source.css#6a3951
source.go#6a3951
comment#D27837
constant.language#D27837
constant.other#CF722E
keyword.control.flow.js#BB672A
keyword.control.flow.jsx#D27837
keyword.control.flow.ts#D47F41
keyword.control.flow.tsx#D27837
keyword.control.module.js#D27837
keyword.control.module.jsx#CF722E
keyword.control.module.ts#D6854A
keyword.control.module.tsx#D98C54
keyword.operator.accessor#D27837
markup.italic#D98C54
meta.import.js#D27837
meta.import.jsx#D47F41
meta.import.ts#D27837
meta.import.tsx#D27837
meta.object-literal.key.js#D6854A
meta.object-literal.key.jsx#CF722E
meta.object-literal.key.ts#D27837
meta.object-literal.key.tsx#D27837
meta.paragraph.markdown#CF722E
punctuation.definition.block.js#D47F41
punctuation.definition.block.jsx#D6854A
punctuation.definition.block.ts#D98C54
punctuation.definition.block.tsx#D27837
punctuation.separator.parameter.js#D27837
punctuation.separator.parameter.jsx#D27837
punctuation.separator.parameter.ts#CF722E
punctuation.separator.parameter.tsx#C56C2C
string.quoted.single.js#CF722E
string.quoted.single.jsx#D27837
string.quoted.single.ts#CF722E
string.quoted.single.tsx#D27837
string.quoted.single.json#C56C2C
support.class.promise.js#D47F41
support.class.promise.jsx#D27837
support.class.promise.ts#D27837
support.class.promise.tsx#D27837
support.function#D27837
support.function.console.js#D6854A
support.function.console.jsx#D27837
support.function.console.ts#D27837
support.function.console.tsx#D27837
support.type.object.console.js#D27837
support.type.object.console.jsx#CF722E
support.type.object.console.ts#D27837
support.type.object.console.tsx#D27837
variable.parameter#BB672A
meta.tag.js#D76376
meta.tag.jsx#cf455c
meta.tag.ts#BE3148
meta.tag.tsx#CC3B53
variable.language#CC3B53
invalid#cf455cunderline
constant.numeric#cf455c
meta.brace.square.js#CC3B53
meta.brace.square.jsx#BE3148
meta.brace.square.ts#cf455c
meta.brace.square.tsx#D24F65
meta.var.expr.js#cf455c
meta.var.expr.jsx#cf455c
meta.var.expr.ts#C8344C
meta.var.expr.tsx#cf455c
keyword.control.import.js#CC3B53
keyword.control.import.jsx#D76376
keyword.control.import.ts#CC3B53
keyword.control.import.tsx#cf455c
keyword.control.from.js#D76376
keyword.control.from.jsx#C8344C
keyword.control.from.ts#D24F65
keyword.control.from.tsx#cf455c
keyword.control.export.js#C8344C
keyword.control.export.jsx#D4596D
keyword.control.export.ts#CC3B53
keyword.control.export.tsx#cf455c
keyword.control.default.js#CC3B53
keyword.control.default.jsx#cf455c
keyword.control.default.ts#cf455c
keyword.control.default.tsx#D76376
support.type.object.module.js#D24F65
support.type.object.module.jsx#D24F65
support.type.object.module.ts#C8344C
support.type.object.module.tsx#cf455c
punctuation.definition.parameters.begin.js#cf455c
punctuation.definition.parameters.begin.jsx#BE3148
punctuation.definition.parameters.begin.ts#cf455c
punctuation.definition.parameters.begin.tsx#cf455c
punctuation.definition.parameters.end.js#cf455c
punctuation.definition.parameters.end.jsx#D4596D
punctuation.definition.parameters.end.ts#D76376
punctuation.definition.parameters.end.tsx#D4596D
punctuation.definition.parameters.end.js#CC3B53
punctuation.definition.parameters.end.jsx#cf455c
punctuation.definition.parameters.end.ts#D76376
punctuation.definition.parameters.end.tsx#cf455c
markup.quote#cf455c
entity.other.attribute-name.js#D4596D
entity.other.attribute-name.jsx#cf455c
entity.other.attribute-name.ts#CC3B53
entity.other.attribute-name.tsx#cf455c
meta.parameters.js#CC3B53
meta.parameters.jsx#cf455c
meta.parameters.ts#D4596D
meta.parameters.tsx#cf455c
variable.other.class.js#cf455c
variable.other.class.jsx#cf455c
variable.other.class.ts#cf455c
variable.other.class.tsx#cf455c
constant.other.object.key.js#C8344C
constant.other.object.key.jsx#C8344C
constant.other.object.key.ts#D4596D
constant.other.object.key.tsx#CC3B53
entity.name.function.method#cf455c
string.quoted.single.js#cf455c
string.quoted.single.jsx#D24F65
string.quoted.single.ts#cf455c
string.quoted.single.tsx#cf455c
support.type.property-name.json#BE3148
variable.other.property.js#cf455c
variable.other.property.jsx#D76376
variable.other.property.ts#CC3B53
variable.other.property.tsx#CC3B53
entity.name.class#cf455cunderline
comment.block.documentation#743E58
comment.line.double-slash#6a3951
constant.language.null.js#6a3951
constant.language.null.jsx#78415C
constant.language.null.ts#6a3951
constant.language.null.tsx#65364D
entity.name.type#743E58
entity.other.inherited-class#65364D
markup.heading.markdown#6F3C55
meta.brace.round.js#65364D
meta.brace.round.jsx#65364D
meta.brace.round.ts#6a3951
meta.brace.round.tsx#65364D
entity.name.function#6a3951underline
meta.tag.attributes.js#6F3C55
meta.tag.attributes.jsx#6a3951
meta.tag.attributes.ts#65364D
meta.tag.attributes.tsx#6a3951
punctuation.accessor.js#6a3951
punctuation.accessor.jsx#743E58
punctuation.accessor.ts#6a3951
punctuation.accessor.tsx#6a3951
punctuation.separator.comma.js#6a3951
punctuation.separator.comma.jsx#60344A
punctuation.separator.comma.ts#6a3951
punctuation.separator.comma.tsx#6a3951
source.js#65364D
source.jsx#6a3951
source.ts#65364D
source.tsx#65364D
storage.modifier.async.js#65364D
storage.modifier.async.jsx#6a3951
storage.modifier.async.ts#6a3951
storage.modifier.async.tsx#65364D
support.class.builtin.js#60344A
support.class.builtin.jsx#6a3951
support.class.builtin.ts#6a3951
support.class.builtin.tsx#6a3951
support.type.primitive.js#6F3C55
support.type.primitive.jsx#6F3C55
support.type.primitive.ts#65364D
support.type.primitive.tsx#743E58
support.variable.property.js#65364D
support.variable.property.jsx#65364D
support.variable.property.ts#6a3951
support.variable.property.tsx#6F3C55
variable#6a3951
variable.other.object.js#6a3951
variable.other.object.jsx#65364D
variable.other.object.ts#6a3951
variable.other.object.tsx#6a3951
variable.other.readwrite#65364D
variable.other.readwrite.js#6F3C55
variable.other.readwrite.jsx#6a3951
variable.other.readwrite.ts#60344A
variable.other.readwrite.tsx#6a3951
constant.character#3b6160
constant.language.boolean#3b6160
entity.name.tag#385D5Cunderline
keyword#385D5C
markup.italic#3b6160
punctuation.accessor.js#385D5C
punctuation.accessor.jsx#3b6160
punctuation.accessor.ts#3b6160
punctuation.accessor.tsx#3E6564
punctuation.separator.key-value.js#3b6160
punctuation.separator.key-value.jsx#406A69
punctuation.separator.key-value.ts#3E6564
punctuation.separator.key-value.tsx#3b6160
storage.modifier.js#406A69
storage.modifier.jsx#3b6160
storage.modifier.ts#406A69
storage.modifier.tsx#3E6564
storage.type#3b6160
string.template#3E6564
support.constant#3b6160
support.function.dom.js#365857
support.function.dom.jsx#3b6160
support.function.dom.ts#3E6564
support.function.dom.tsx#3b6160
support.variable.property.js#3b6160
support.variable.property.jsx#3b6160
support.variable.property.ts#3b6160
support.variable.property.tsx#385D5C
variable.language.constructor#3b6160underline
variable.language.this#385D5C