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#f9f6f2
  • 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#f9f6f2
  • 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#CF6F4B
source.css#CF6F4B
source.go#CF6F4B
comment#480032
constant.language#480032
constant.other#450030
keyword.control.flow.js#3E002B
keyword.control.flow.jsx#480032
keyword.control.flow.ts#4B0034
keyword.control.flow.tsx#480032
keyword.control.module.js#480032
keyword.control.module.jsx#450030
keyword.control.module.ts#4E0037
keyword.control.module.tsx#520039
keyword.operator.accessor#480032
markup.italic#520039
meta.import.js#480032
meta.import.jsx#4B0034
meta.import.ts#480032
meta.import.tsx#480032
meta.object-literal.key.js#4E0037
meta.object-literal.key.jsx#450030
meta.object-literal.key.ts#480032
meta.object-literal.key.tsx#480032
meta.paragraph.markdown#450030
punctuation.definition.block.js#4B0034
punctuation.definition.block.jsx#4E0037
punctuation.definition.block.ts#520039
punctuation.definition.block.tsx#480032
punctuation.separator.parameter.js#480032
punctuation.separator.parameter.jsx#480032
punctuation.separator.parameter.ts#450030
punctuation.separator.parameter.tsx#42002E
string.quoted.single.js#450030
string.quoted.single.jsx#480032
string.quoted.single.ts#450030
string.quoted.single.tsx#480032
string.quoted.single.json#42002E
support.class.promise.js#4B0034
support.class.promise.jsx#480032
support.class.promise.ts#480032
support.class.promise.tsx#480032
support.function#480032
support.function.console.js#4E0037
support.function.console.jsx#480032
support.function.console.ts#480032
support.function.console.tsx#480032
support.type.object.console.js#480032
support.type.object.console.jsx#450030
support.type.object.console.ts#480032
support.type.object.console.tsx#480032
variable.parameter#3E002B
meta.tag.js#2470B0
meta.tag.jsx#20639b
meta.tag.ts#1C5686
meta.tag.tsx#1F5F94
variable.language#1F5F94
invalid#20639bunderline
constant.numeric#20639b
meta.brace.square.js#1F5F94
meta.brace.square.jsx#1C5686
meta.brace.square.ts#20639b
meta.brace.square.tsx#2167A2
meta.var.expr.js#20639b
meta.var.expr.jsx#20639b
meta.var.expr.ts#1D5A8D
meta.var.expr.tsx#20639b
keyword.control.import.js#1F5F94
keyword.control.import.jsx#2470B0
keyword.control.import.ts#1F5F94
keyword.control.import.tsx#20639b
keyword.control.from.js#2470B0
keyword.control.from.jsx#1D5A8D
keyword.control.from.ts#2167A2
keyword.control.from.tsx#20639b
keyword.control.export.js#1D5A8D
keyword.control.export.jsx#236CA9
keyword.control.export.ts#1F5F94
keyword.control.export.tsx#20639b
keyword.control.default.js#1F5F94
keyword.control.default.jsx#20639b
keyword.control.default.ts#20639b
keyword.control.default.tsx#2470B0
support.type.object.module.js#2167A2
support.type.object.module.jsx#2167A2
support.type.object.module.ts#1D5A8D
support.type.object.module.tsx#20639b
punctuation.definition.parameters.begin.js#20639b
punctuation.definition.parameters.begin.jsx#1C5686
punctuation.definition.parameters.begin.ts#20639b
punctuation.definition.parameters.begin.tsx#20639b
punctuation.definition.parameters.end.js#20639b
punctuation.definition.parameters.end.jsx#236CA9
punctuation.definition.parameters.end.ts#2470B0
punctuation.definition.parameters.end.tsx#236CA9
punctuation.definition.parameters.end.js#1F5F94
punctuation.definition.parameters.end.jsx#20639b
punctuation.definition.parameters.end.ts#2470B0
punctuation.definition.parameters.end.tsx#20639b
markup.quote#20639b
entity.other.attribute-name.js#236CA9
entity.other.attribute-name.jsx#20639b
entity.other.attribute-name.ts#1F5F94
entity.other.attribute-name.tsx#20639b
meta.parameters.js#1F5F94
meta.parameters.jsx#20639b
meta.parameters.ts#236CA9
meta.parameters.tsx#20639b
variable.other.class.js#20639b
variable.other.class.jsx#20639b
variable.other.class.ts#20639b
variable.other.class.tsx#20639b
constant.other.object.key.js#1D5A8D
constant.other.object.key.jsx#1D5A8D
constant.other.object.key.ts#236CA9
constant.other.object.key.tsx#1F5F94
entity.name.function.method#20639b
string.quoted.single.js#20639b
string.quoted.single.jsx#2167A2
string.quoted.single.ts#20639b
string.quoted.single.tsx#20639b
support.type.property-name.json#1C5686
variable.other.property.js#20639b
variable.other.property.jsx#2470B0
variable.other.property.ts#1F5F94
variable.other.property.tsx#1F5F94
entity.name.class#20639bunderline
comment.block.documentation#D47F5F
comment.line.double-slash#CF6F4B
constant.language.null.js#CF6F4B
constant.language.null.jsx#D78769
constant.language.null.ts#CF6F4B
constant.language.null.tsx#CC6741
entity.name.type#D47F5F
entity.other.inherited-class#CC6741
markup.heading.markdown#D27755
meta.brace.round.js#CC6741
meta.brace.round.jsx#CC6741
meta.brace.round.ts#CF6F4B
meta.brace.round.tsx#CC6741
entity.name.function#CF6F4Bunderline
meta.tag.attributes.js#D27755
meta.tag.attributes.jsx#CF6F4B
meta.tag.attributes.ts#CC6741
meta.tag.attributes.tsx#CF6F4B
punctuation.accessor.js#CF6F4B
punctuation.accessor.jsx#D47F5F
punctuation.accessor.ts#CF6F4B
punctuation.accessor.tsx#CF6F4B
punctuation.separator.comma.js#CF6F4B
punctuation.separator.comma.jsx#CA5F37
punctuation.separator.comma.ts#CF6F4B
punctuation.separator.comma.tsx#CF6F4B
source.js#CC6741
source.jsx#CF6F4B
source.ts#CC6741
source.tsx#CC6741
storage.modifier.async.js#CC6741
storage.modifier.async.jsx#CF6F4B
storage.modifier.async.ts#CF6F4B
storage.modifier.async.tsx#CC6741
support.class.builtin.js#CA5F37
support.class.builtin.jsx#CF6F4B
support.class.builtin.ts#CF6F4B
support.class.builtin.tsx#CF6F4B
support.type.primitive.js#D27755
support.type.primitive.jsx#D27755
support.type.primitive.ts#CC6741
support.type.primitive.tsx#D47F5F
support.variable.property.js#CC6741
support.variable.property.jsx#CC6741
support.variable.property.ts#CF6F4B
support.variable.property.tsx#D27755
variable#CF6F4B
variable.other.object.js#CF6F4B
variable.other.object.jsx#CC6741
variable.other.object.ts#CF6F4B
variable.other.object.tsx#CF6F4B
variable.other.readwrite#CC6741
variable.other.readwrite.js#D27755
variable.other.readwrite.jsx#CF6F4B
variable.other.readwrite.ts#CA5F37
variable.other.readwrite.tsx#CF6F4B
constant.character#8F1C3D
constant.language.boolean#8F1C3D
entity.name.tag#891B3Aunderline
keyword#891B3A
markup.italic#8F1C3D
punctuation.accessor.js#891B3A
punctuation.accessor.jsx#8F1C3D
punctuation.accessor.ts#8F1C3D
punctuation.accessor.tsx#951D40
punctuation.separator.key-value.js#8F1C3D
punctuation.separator.key-value.jsx#9C1F42
punctuation.separator.key-value.ts#951D40
punctuation.separator.key-value.tsx#8F1C3D
storage.modifier.js#9C1F42
storage.modifier.jsx#8F1C3D
storage.modifier.ts#9C1F42
storage.modifier.tsx#951D40
storage.type#8F1C3D
string.template#951D40
support.constant#8F1C3D
support.function.dom.js#821938
support.function.dom.jsx#8F1C3D
support.function.dom.ts#951D40
support.function.dom.tsx#8F1C3D
support.variable.property.js#8F1C3D
support.variable.property.jsx#8F1C3D
support.variable.property.ts#8F1C3D
support.variable.property.tsx#891B3A
variable.language.constructor#8F1C3Dunderline
variable.language.this#891B3A