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#f1f1f1
  • 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#f1f1f1
  • 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#BD2E63
source.css#BD2E63
source.go#BD2E63
support.constant#2b8fb3
punctuation.separator.parameter.js#2b8fb3
punctuation.separator.parameter.jsx#257C9B
punctuation.separator.parameter.ts#257C9B
punctuation.separator.parameter.tsx#2b8fb3
constant.character#2b8fb3
constant.language#2b8fb3
constant.other#2b8fb3
comment#2b8fb3
markup.italic#2989AB
meta.object-literal.key.js#2989AB
meta.object-literal.key.jsx#2b8fb3
meta.object-literal.key.ts#2989AB
meta.object-literal.key.tsx#2D95BB
comment.block.documentation#2b8fb3
comment.line.double-slash#2b8fb3
punctuation.accessor.js#2D95BB
punctuation.accessor.jsx#2F9CC3
punctuation.accessor.ts#2b8fb3
punctuation.accessor.tsx#2b8fb3
variable.language#2989AB
variable.other.object.js#2b8fb3
variable.other.object.jsx#2b8fb3
variable.other.object.ts#2b8fb3
variable.other.object.tsx#2b8fb3
variable.other.readwrite#2782A3
variable.other.readwrite.js#2b8fb3
variable.other.readwrite.jsx#2b8fb3
variable.other.readwrite.ts#2b8fb3
variable.other.readwrite.tsx#2b8fb3
punctuation.separator.key-value.js#994D2A
punctuation.separator.key-value.jsx#a0512c
punctuation.separator.key-value.ts#A7552E
punctuation.separator.key-value.tsx#A7552E
storage.modifier.async.js#8A4626
storage.modifier.async.jsx#994D2A
storage.modifier.async.ts#a0512c
storage.modifier.async.tsx#a0512c
meta.brace.round.js#a0512c
meta.brace.round.jsx#a0512c
meta.brace.round.ts#B65C32
meta.brace.round.tsx#924A28
entity.other.inherited-class#924A28
support.class.builtin.js#A7552E
support.class.builtin.jsx#a0512c
support.class.builtin.ts#994D2A
support.class.builtin.tsx#a0512c
meta.tag.attributes.js#994D2A
meta.tag.attributes.jsx#A7552E
meta.tag.attributes.ts#994D2A
meta.tag.attributes.tsx#a0512c
keyword.control.module.js#a0512c
keyword.control.module.jsx#a0512c
keyword.control.module.ts#A7552E
keyword.control.module.tsx#a0512c
keyword.operator.accessor#a0512c
invalid#a0512cunderline
constant.numeric#a0512c
keyword#a0512c
meta.var.expr.js#a0512c
meta.var.expr.jsx#A7552E
meta.var.expr.ts#A7552E
meta.var.expr.tsx#994D2A
keyword.control.import.js#B65C32
keyword.control.import.jsx#994D2A
keyword.control.import.ts#B65C32
keyword.control.import.tsx#a0512c
keyword.control.from.js#a0512c
keyword.control.from.jsx#994D2A
keyword.control.from.ts#AE5830
keyword.control.from.tsx#A7552E
keyword.control.export.js#994D2A
keyword.control.export.jsx#8A4626
keyword.control.export.ts#a0512c
keyword.control.export.tsx#B65C32
keyword.control.default.js#a0512c
keyword.control.default.jsx#A7552E
keyword.control.default.ts#B65C32
keyword.control.default.tsx#a0512c
support.type.object.module.js#924A28
support.type.object.module.jsx#994D2A
support.type.object.module.ts#a0512c
support.type.object.module.tsx#994D2A
punctuation.definition.parameters.begin.js#BD2E63
punctuation.definition.parameters.begin.jsx#A32856
punctuation.definition.parameters.begin.ts#BD2E63
punctuation.definition.parameters.begin.tsx#B42C5F
punctuation.definition.parameters.end.js#BD2E63
punctuation.definition.parameters.end.jsx#BD2E63
punctuation.definition.parameters.end.ts#C63067
punctuation.definition.parameters.end.tsx#BD2E63
punctuation.definition.parameters.end.js#CD336C
punctuation.definition.parameters.end.jsx#BD2E63
punctuation.definition.parameters.end.ts#BD2E63
punctuation.definition.parameters.end.tsx#B42C5F
markup.quote#A32856
meta.tag.js#C63067
meta.tag.jsx#CD336C
meta.tag.ts#AC2A5A
meta.tag.tsx#CD336C
meta.parameters.js#BD2E63
meta.parameters.jsx#C63067
meta.parameters.ts#B42C5F
meta.parameters.tsx#BD2E63
meta.brace.square.js#B42C5F
meta.brace.square.jsx#BD2E63
meta.brace.square.ts#BD2E63
meta.brace.square.tsx#BD2E63
variable.other.class.js#CF3B72
variable.other.class.jsx#B42C5F
variable.other.class.ts#AC2A5A
variable.other.class.tsx#BD2E63
constant.other.object.key.js#BD2E63
constant.other.object.key.jsx#CF3B72
constant.other.object.key.ts#BD2E63
constant.other.object.key.tsx#BD2E63
entity.name.function.method#A32856
string.template#BD2E63
support.type.property-name.json#A32856
variable.other.property.js#BD2E63
variable.other.property.jsx#CD336C
variable.other.property.ts#CF3B72
variable.other.property.tsx#BD2E63
entity.name.tag#F2680Funderline
markup.italic#E9630D
punctuation.accessor.js#DF5F0C
punctuation.accessor.jsx#E9630D
punctuation.accessor.ts#DF5F0C
punctuation.accessor.tsx#CA560B
source.js#E9630D
source.jsx#E9630D
source.ts#E9630D
source.tsx#E9630D
storage.modifier.js#E9630D
storage.modifier.jsx#E9630D
storage.modifier.ts#DF5F0C
storage.modifier.tsx#E9630D
storage.type#F37524
string.quoted.single.js#DF5F0C
string.quoted.single.jsx#D45A0C
string.quoted.single.ts#E9630D
string.quoted.single.tsx#E9630D
support.function.dom.js#F37524
support.function.dom.jsx#E9630D
support.function.dom.ts#F26E1A
support.function.dom.tsx#DF5F0C
support.variable.property.js#F2680F
support.variable.property.jsx#E9630D
support.variable.property.ts#E9630D
support.variable.property.tsx#F26E1A
variable.language.constructor#E9630Dunderline
variable.language.this#CA560B
constant.language.boolean#57914C
constant.language.null.js#508546
constant.language.null.jsx#508546
constant.language.null.ts#45733D
constant.language.null.tsx#508546
entity.name.class#508546underline
entity.name.function#4C7F43underline
entity.name.type#4C7F43underline
markup.heading.markdown#4C7F43
punctuation.separator.comma.js#4C7F43
punctuation.separator.comma.jsx#508546
punctuation.separator.comma.ts#57914C
punctuation.separator.comma.tsx#45733D
support.variable.property.js#508546
support.variable.property.jsx#508546
support.variable.property.ts#508546
support.variable.property.tsx#508546
support.type.primitive.js#508546
support.type.primitive.jsx#508546
support.type.primitive.ts#57914C
support.type.primitive.tsx#508546
variable#508546
variable.parameter#820D4B
support.function#820D4B
meta.import.js#880e4f
meta.import.jsx#820D4B
meta.import.ts#880e4f
meta.import.tsx#880e4f
meta.paragraph.markdown#880e4f
entity.other.attribute-name.js#880e4f
entity.other.attribute-name.jsx#880e4f
entity.other.attribute-name.ts#9A105A
entity.other.attribute-name.tsx#880e4f
string.quoted.single.js#7C0D48
string.quoted.single.jsx#880e4f
string.quoted.single.ts#820D4B
string.quoted.single.tsx#820D4B
string.quoted.single.json#7C0D48
support.class.promise.js#7C0D48
support.class.promise.jsx#8E0F53
support.class.promise.ts#7C0D48
support.class.promise.tsx#9A105A
support.type.object.console.js#880e4f
support.type.object.console.jsx#760C44
support.type.object.console.ts#8E0F53
support.type.object.console.tsx#880e4f
support.function.console.js#820D4B
support.function.console.jsx#820D4B
support.function.console.ts#8E0F53
support.function.console.tsx#760C44
punctuation.definition.block.js#880e4f
punctuation.definition.block.jsx#8E0F53
punctuation.definition.block.ts#880e4f
punctuation.definition.block.tsx#8E0F53