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—