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#f9f6f1
  • 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#f9f6f1
  • 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#B97444
source.css#B97444
source.go#B97444
constant.character#1D3E69
constant.language.boolean#1D3E69
entity.name.tag#1D3E69underline
keyword#1F4473
markup.italic#1E416E
entity.name.function.method#1F4473
string.quoted.single.js#1F4473
string.quoted.single.jsx#1E416E
string.quoted.single.ts#1D3E69
string.quoted.single.tsx#1D3E69
support.type.property-name.json#1E416E
punctuation.accessor.js#1E416E
punctuation.accessor.jsx#214778
punctuation.accessor.ts#1E416E
punctuation.accessor.tsx#1A385F
punctuation.separator.key-value.js#1D3E69
punctuation.separator.key-value.jsx#1A385F
punctuation.separator.key-value.ts#1E416E
punctuation.separator.key-value.tsx#1E416E
constant.numeric#1E416E
meta.brace.square.js#1A385F
meta.brace.square.jsx#1E416E
meta.brace.square.ts#214778
meta.brace.square.tsx#1E416E
meta.var.expr.js#1A385F
meta.var.expr.jsx#1E416E
meta.var.expr.ts#1E416E
meta.var.expr.tsx#1A385F
storage.modifier.js#1B3B64
storage.modifier.jsx#1F4473
storage.modifier.ts#1F4473
storage.modifier.tsx#224A7D
storage.type#1A385F
string.template#1F4473
support.constant#1D3E69
support.function.dom.js#1E416E
support.function.dom.jsx#1E416E
support.function.dom.ts#1E416E
support.function.dom.tsx#1E416E
support.variable.property.js#1E416E
support.variable.property.jsx#1F4473
support.variable.property.ts#1E416E
support.variable.property.tsx#1E416E
variable.language.constructor#1E416Eunderline
variable.language.this#1E416E
meta.tag.js#1F4473
meta.tag.jsx#1D3E69
meta.tag.ts#1E416E
meta.tag.tsx#1E416E
support.type.object.module.js#1E416E
support.type.object.module.jsx#1E416E
support.type.object.module.ts#1E416E
support.type.object.module.tsx#1A385F
punctuation.definition.parameters.begin.js#1F4473
punctuation.definition.parameters.begin.jsx#1B3B64
punctuation.definition.parameters.begin.ts#1F4473
punctuation.definition.parameters.begin.tsx#1E416E
punctuation.definition.parameters.end.js#214778
punctuation.definition.parameters.end.jsx#1E416E
punctuation.definition.parameters.end.ts#1D3E69
punctuation.definition.parameters.end.tsx#1E416E
punctuation.definition.parameters.end.js#1D3E69
punctuation.definition.parameters.end.jsx#1D3E69
punctuation.definition.parameters.end.ts#1B3B64
punctuation.definition.parameters.end.tsx#1E416E
markup.quote#214778
entity.other.attribute-name.js#1E416E
entity.other.attribute-name.jsx#1E416E
entity.other.attribute-name.ts#1B3B64
entity.other.attribute-name.tsx#1E416E
comment#38978D
constant.language#38978D
constant.other#38978D
keyword.control.flow.js#1E416E
keyword.control.flow.jsx#1E416E
keyword.control.flow.ts#30837A
keyword.control.flow.tsx#38978D
keyword.control.module.js#30837A
keyword.control.module.jsx#38978D
keyword.control.module.ts#38978D
keyword.control.module.tsx#38978D
keyword.operator.accessor#338980
markup.italic#38978D
meta.import.js#38978D
meta.import.jsx#359087
meta.import.ts#38978D
meta.import.tsx#38978D
meta.object-literal.key.js#38978D
meta.object-literal.key.jsx#40ABA0
meta.object-literal.key.ts#38978D
meta.object-literal.key.tsx#38978D
meta.paragraph.markdown#3B9E93
punctuation.definition.block.js#38978D
punctuation.definition.block.jsx#3B9E93
punctuation.definition.block.ts#3B9E93
punctuation.definition.block.tsx#38978D
punctuation.separator.parameter.js#38978D
punctuation.separator.parameter.jsx#38978D
punctuation.separator.parameter.ts#38978D
punctuation.separator.parameter.tsx#3B9E93
string.quoted.single.js#338980
string.quoted.single.jsx#3B9E93
string.quoted.single.ts#3DA59A
string.quoted.single.tsx#359087
string.quoted.single.json#359087
support.class.promise.js#38978D
support.class.promise.jsx#38978D
support.class.promise.ts#38978D
support.class.promise.tsx#3B9E93
support.function#38978D
keyword.control.import.js#3DA59A
keyword.control.import.jsx#38978D
keyword.control.import.ts#338980
keyword.control.import.tsx#38978D
keyword.control.from.js#359087
keyword.control.from.jsx#359087
keyword.control.from.ts#38978D
keyword.control.from.tsx#3B9E93
keyword.control.export.js#38978D
keyword.control.export.jsx#38978D
keyword.control.export.ts#38978D
keyword.control.export.tsx#38978D
keyword.control.default.js#38978D
keyword.control.default.jsx#30837A
keyword.control.default.ts#38978D
keyword.control.default.tsx#38978D
entity.name.class#359087underline
support.function.console.js#30837A
support.function.console.jsx#38978D
support.function.console.ts#3DA59A
support.function.console.tsx#3B9E93
variable.language#38978D
invalid#338980underline
support.type.object.console.js#38978D
support.type.object.console.jsx#38978D
support.type.object.console.ts#3B9E93
support.type.object.console.tsx#38978D
variable.parameter#38978D
comment.block.documentation#40ABA0
comment.line.double-slash#359087
constant.language.null.js#BD7A4B
constant.language.null.jsx#B97444
constant.language.null.ts#B97444
constant.language.null.tsx#B16F41
entity.name.type#B16F41
meta.parameters.js#B16F41
meta.parameters.jsx#B97444
meta.parameters.ts#B97444
meta.parameters.tsx#B97444
variable.other.class.js#B97444
variable.other.class.jsx#B97444
variable.other.class.ts#B16F41
variable.other.class.tsx#B16F41
constant.other.object.key.js#B97444
constant.other.object.key.jsx#B97444
constant.other.object.key.ts#B16F41
constant.other.object.key.tsx#BD7A4B
entity.other.inherited-class#BD7A4B
markup.heading.markdown#C3865C
meta.brace.round.js#B97444
meta.brace.round.jsx#BD7A4B
meta.brace.round.ts#B97444
meta.brace.round.tsx#A86A3E
entity.name.function#3B9E93underline
meta.tag.attributes.js#A86A3E
meta.tag.attributes.jsx#B97444
meta.tag.attributes.ts#B16F41
meta.tag.attributes.tsx#B97444
punctuation.accessor.js#B97444
punctuation.accessor.jsx#A86A3E
punctuation.accessor.ts#A86A3E
punctuation.accessor.tsx#A0643B
punctuation.separator.comma.js#B16F41
punctuation.separator.comma.jsx#B97444
punctuation.separator.comma.ts#B97444
punctuation.separator.comma.tsx#B97444
source.js#B16F41
source.jsx#B97444
source.ts#A0643B
source.tsx#A0643B
variable.other.property.js#B97444
variable.other.property.jsx#C3865C
variable.other.property.ts#B97444
variable.other.property.tsx#B97444
storage.modifier.async.js#B97444
storage.modifier.async.jsx#B97444
storage.modifier.async.ts#B16F41
storage.modifier.async.tsx#B16F41
support.class.builtin.js#B97444
support.class.builtin.jsx#B97444
support.class.builtin.ts#B16F41
support.class.builtin.tsx#B97444
support.type.primitive.js#BD7A4B
support.type.primitive.jsx#A0643B
support.type.primitive.ts#B97444
support.type.primitive.tsx#A86A3E
support.variable.property.js#B97444
support.variable.property.jsx#B16F41
support.variable.property.ts#BD7A4B
support.variable.property.tsx#B97444
variable#A86A3E
variable.other.object.js#A86A3E
variable.other.object.jsx#B97444
variable.other.object.ts#B16F41
variable.other.object.tsx#B97444
variable.other.readwrite#B16F41
variable.other.readwrite.js#A86A3E
variable.other.readwrite.jsx#B97444
variable.other.readwrite.ts#B97444
variable.other.readwrite.tsx#B97444