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#a0512c
source.css#a0512c
source.go#a0512c
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#A7552E
constant.language.null.jsx#a0512c
constant.language.null.ts#a0512c
constant.language.null.tsx#994D2A
entity.name.type#994D2A
meta.parameters.js#994D2A
meta.parameters.jsx#a0512c
meta.parameters.ts#a0512c
meta.parameters.tsx#a0512c
variable.other.class.js#a0512c
variable.other.class.jsx#a0512c
variable.other.class.ts#994D2A
variable.other.class.tsx#994D2A
constant.other.object.key.js#a0512c
constant.other.object.key.jsx#a0512c
constant.other.object.key.ts#994D2A
constant.other.object.key.tsx#A7552E
entity.other.inherited-class#A7552E
markup.heading.markdown#B65C32
meta.brace.round.js#a0512c
meta.brace.round.jsx#A7552E
meta.brace.round.ts#a0512c
meta.brace.round.tsx#924A28
entity.name.function#3B9E93underline
meta.tag.attributes.js#924A28
meta.tag.attributes.jsx#a0512c
meta.tag.attributes.ts#994D2A
meta.tag.attributes.tsx#a0512c
punctuation.accessor.js#a0512c
punctuation.accessor.jsx#924A28
punctuation.accessor.ts#924A28
punctuation.accessor.tsx#8A4626
punctuation.separator.comma.js#994D2A
punctuation.separator.comma.jsx#a0512c
punctuation.separator.comma.ts#a0512c
punctuation.separator.comma.tsx#a0512c
source.js#994D2A
source.jsx#a0512c
source.ts#8A4626
source.tsx#8A4626
variable.other.property.js#a0512c
variable.other.property.jsx#B65C32
variable.other.property.ts#a0512c
variable.other.property.tsx#a0512c
storage.modifier.async.js#a0512c
storage.modifier.async.jsx#a0512c
storage.modifier.async.ts#994D2A
storage.modifier.async.tsx#994D2A
support.class.builtin.js#a0512c
support.class.builtin.jsx#a0512c
support.class.builtin.ts#994D2A
support.class.builtin.tsx#a0512c
support.type.primitive.js#A7552E
support.type.primitive.jsx#8A4626
support.type.primitive.ts#a0512c
support.type.primitive.tsx#924A28
support.variable.property.js#a0512c
support.variable.property.jsx#994D2A
support.variable.property.ts#A7552E
support.variable.property.tsx#a0512c
variable#924A28
variable.other.object.js#924A28
variable.other.object.jsx#a0512c
variable.other.object.ts#994D2A
variable.other.object.tsx#a0512c
variable.other.readwrite#994D2A
variable.other.readwrite.js#924A28
variable.other.readwrite.jsx#a0512c
variable.other.readwrite.ts#a0512c
variable.other.readwrite.tsx#a0512c