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.

  • actionBar.toggledBackground#00000011
  • actionBar.toggledForeground#4B3A45
  • activityBar.activeBorder#4C3F82
  • activityBar.background#B695AA
  • activityBar.foreground#4C3F82
  • activityBar.inactiveForeground#4C3F8288
  • activityBarBadge.background#B63851
  • activityBarBadge.foreground#F6EFF3
  • badge.background#B63851
  • badge.foreground#F6EFF3
  • breadcrumb.activeSelectionForeground#9B8A95
  • breadcrumb.focusForeground#9B8A95
  • breadcrumb.foreground#9B8A95
  • breadcrumb.separatorForeground#7C6472
  • button.background#5D5094
  • button.foreground#F6EFF3
  • button.hoverBackground#7063A5
  • button.secondaryBackground#C9A8BA
  • button.secondaryForeground#4B3A45
  • button.secondaryHoverBackground#D8C1CF
  • commandCenter.activeBorder#00000000
  • commandCenter.activeForeground#F6EFF3
  • commandCenter.border#00000000
  • commandCenter.foreground#F6EFF3
  • commandCenter.hoverBorder#00000000
  • commandCenter.inactiveBorder#00000000
  • commandCenter.inactiveForeground#7C6472
  • descriptionForeground#9B8A95
  • disabledForeground#FFFFFF66
  • dropdown.background#BFA3B5
  • dropdown.border#B08DA3
  • dropdown.foreground#4B3A45
  • editor.background#E9D8E3
  • editor.foldBackground#483E731A
  • editor.foreground#4B3A45
  • editor.inactiveSelectionBackground#EAD8E3
  • editor.lineHighlightBackground#F2E3EC
  • editor.selectionBackground#DCC6D3A8
  • editorCursor.foreground#5D5094
  • editorGroup.border#D5C4CF
  • editorGroupHeader.border#B89CAF55
  • editorGroupHeader.noTabsBackground#E6CFDD
  • editorGroupHeader.tabsBackground#E6CFDD
  • editorGroupHeader.tabsBorder#D5C4CF
  • editorHoverWidget.background#F0E3EA
  • editorHoverWidget.border#F0E3EA
  • editorHoverWidget.foreground#4B3A45
  • editorHoverWidget.statusBarBackground#F0E3EA
  • editorIndentGuide.activeBackground1#7C6472
  • editorIndentGuide.background#B695AA66
  • editorLineNumber.activeForeground#B63851
  • editorLineNumber.foreground#9B8A95
  • editorOverviewRuler.border#00000000
  • editorStickyScroll.shadow#D2BECB
  • editorStickyScrollHover.background#483E731A
  • editorWhitespace.foreground#B695AA66
  • editorWidget.background#E9D8E3
  • editorWidget.foreground#4B3A45
  • explorer.decorations.ignoredForeground#9B8A95
  • extensionButton.background#5D5094
  • extensionButton.foreground#F6EFF3
  • extensionButton.hoverBackground#7063A5
  • extensionButton.prominentBackground#5D5094
  • extensionButton.prominentForeground#F6EFF3
  • extensionButton.prominentHoverBackground#7063A5
  • focusBorder#B695AA99
  • foreground#7A5565
  • gitDecoration.ignoredResourceForeground#9B8A95
  • icon.foreground#5D5094
  • input.background#E9D8E3
  • input.border#E9D8E3
  • input.foreground#4B3A45
  • input.placeholderForeground#9B8A95
  • keybindingTable.rowsBackground#D2BECB
  • list.activeSelectionBackground#E9D8E3
  • list.activeSelectionForeground#7F6A77
  • list.activeSelectionIconForeground#7F6A77
  • list.focusBackground#DCC6D3
  • list.highlightForeground#5D5094
  • list.hoverBackground#EAD8E3
  • list.hoverForeground#7F6A77
  • list.iconForeground#7F6A77
  • list.inactiveSelectionBackground#D8C1CF
  • list.inactiveSelectionForeground#9B8A95
  • list.inactiveSelectionIconForeground#7F6A77
  • menu.selectionBackground#C9A8BA
  • menu.selectionForeground#4B3A45
  • menubar.selectionBackground#C9A8BA
  • menubar.selectionForeground#4B3A45
  • notificationCenterHeader.background#B695AA
  • notifications.background#E9D8E3
  • notifications.border#B08DA3
  • notifications.foreground#302631
  • notificationsErrorIcon.foreground#B63851
  • notificationsInfoIcon.foreground#487AA9
  • notificationsWarningIcon.foreground#B63851
  • panel.background#E9D8E3
  • panel.border#B08DA3
  • panelSectionHeader.background#D2BECB
  • panelTitle.activeForeground#302631
  • panelTitle.inactiveForeground#9B8A95
  • quickInput.background#E9D8E3
  • quickInput.foreground#4B3A45
  • quickInput.list.focusBackground#DCC6D3
  • quickInputList.focusIconForeground#7F6A77
  • scrollbar.shadow#7C647233
  • scrollbarSlider.activeBackground#BFA3B588
  • scrollbarSlider.background#BFA3B566
  • scrollbarSlider.hoverBackground#BFA3B577
  • sideBar.background#E6CFDD
  • sideBar.foreground#7F6A77
  • sideBarSectionHeader.background#E9D8E3
  • sideBarSectionHeader.foreground#7F6A77
  • statusBar.background#B695AA
  • statusBar.debuggingBackground#7063A5
  • statusBar.debuggingForeground#F6EFF3
  • statusBar.foreground#F6EFF3
  • statusBar.noFolderBackground#E9D8E3
  • statusBarItem.errorForeground#F6EFF3
  • statusBarItem.prominentForeground#F6EFF3
  • statusBarItem.remoteBackground#5D5094
  • statusBarItem.remoteForeground#F6EFF3
  • statusBarItem.warningForeground#F6EFF3
  • tab.activeBackground#E9D8E3
  • tab.activeForeground#302631
  • tab.border#B89CAF55
  • tab.editor-group-tab-background#E6CFDD
  • tab.hoverBackground#F2E3EC
  • tab.inactiveBackground#E9D8E3
  • tab.inactiveForeground#9B8A95
  • terminal.ansiBlack#D2BECB
  • terminal.ansiBlue#5D5094
  • terminal.ansiBrightBlack#A58E9D
  • terminal.ansiBrightBlue#7063A5
  • terminal.ansiBrightCyan#8CA4C3
  • terminal.ansiBrightGreen#6793BA
  • terminal.ansiBrightMagenta#D6B9C7
  • terminal.ansiBrightRed#C6728B
  • terminal.ansiBrightWhite#F6EFF3
  • terminal.ansiBrightYellow#F2E3EC
  • terminal.ansiCyan#7063A5
  • terminal.ansiGreen#487AA9
  • terminal.ansiMagenta#C6728B
  • terminal.ansiRed#B63851
  • terminal.ansiWhite#7C6472
  • terminal.ansiYellow#EAD8E3
  • terminal.background#E9D8E3
  • terminal.foreground#5D5094
  • terminalStickyScroll.background#D2BECB
  • textCodeBlock.background#483E731A
  • textLink.foreground#5D5094
  • textLink.hoverForeground#5D5094
  • titleBar.activeBackground#B695AA
  • titleBar.activeForeground#F6EFF3
  • titleBar.inactiveBackground#B695AA
  • titleBar.inactiveForeground#F6EFF3
  • toolbar.activeBackground#00000011
  • toolbar.activeForeground#4B3A45
  • toolbar.hoverBackground#00000011
  • toolbar.hoverForeground#4B3A45
  • tooltip.background#F0E3EA
  • tooltip.border#F0E3EA
  • tooltip.foreground#4B3A45
  • widget.shadow#7C647266

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.line.double-slash, punctuation.definition.comment#9B8A95italic
keyword#5D5094
keyword.control#7063A5
keyword.operator#7C6472
keyword.operator.assignment#8B7A86
storage, storage.type#5D5094
constant, constant.numeric, constant.language, constant.character#B63851
string, string.quoted, string.regexp#B55C77
variable, variable.parameter#4A3540
entity.name.function, support.function#4279A5
entity.name.type, entity.name.class, support.class#3F6A93
entity.other.attribute-name, meta.annotation#7063A5
punctuation, operator#8B7A86
invalid, invalid.deprecated, invalid.illegal#B63851
variable.other.property, variable.other.object.property, support.type.property-name#5D5094
entity.name.tag, support.class.component#5D5094
variable.language, variable.language.this, variable.language.super#487AA9
entity.name.type.module, support.other.module#3F6A93
text.html.derivative#4B3A45
entity.name.tag, meta.tag.sgml, meta.tag.html, meta.tag.xml, meta.tag.other#5D5094
entity.other.attribute-name, meta.tag.attribute, meta.tag.xml.attribute#487AA9
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#C6728B
punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.tag, punctuation.separator.key-value.html#8B7A86
meta.tag.sgml.doctype, comment.block.html#9B8A95italic
entity.name.tag.js, entity.name.tag.tsx, support.class.component#5D5094
entity.other.attribute-name.js, entity.other.attribute-name.tsx#487AA9
markup.heading, markup.heading.markdown, markup.heading.setext, entity.name.section.markdown#5D5094bold
markup.bold, markup.bold.markdown#B63851bold
markup.italic, markup.italic.markdown#B63851italic
string.other.link.title.markdown, markup.underline.link.markdown#487AA9underline
markup.underline.link, markup.underline.link.image.markdown, markup.underline.link.markdown, markup.link.url.markdown#7063A5
markup.inline.raw.string.markdown, markup.raw.inline.markdown#C6728B
markup.fenced_code.block.markdown, markup.raw.block.markdown, fenced_code.block.language, fenced_code.block.markdown#C6728B
markup.quote, markup.quote.markdown#DCC6D3italic
markup.list, markup.list.numbered, markup.list.unnumbered#7C6472
meta.separator.markdown#9B8A95
comment.block.html.markdown#9B8A95italic
punctuation.definition.heading.markdown, heading.1.markdown, markup.heading.markdown, markup.heading.setext.markdown, markup.heading.markdown#5D5094bold
punctuation.definition.list.begin.markdown#7C6472
markup.list.unnumbered.markdown, markup.list.numbered.markdown#7C6472
meta.object-literal.key, meta.object.member, meta.objectliteral, support.type.property-name, support.type.property-name.json#5D5094
variable.other.property, variable.other.property.js, variable.other.object.property, support.variable.property.dom, meta.property.object.js#5D5094
support.function, variable.function, variable.function.js, entity.name.function.member, meta.method-call#4279A5
variable.other.object.js, variable.other.object.js.jsx#4A3540
support.class.promise.js, support.class.promise.ts#487AA9
meta.diff.header.from-file, punctuation.definition.from-file.diff#B63851bold
meta.diff.header.to-file, punctuation.definition.to-file.diff#487AA9bold
meta.diff.range, meta.diff.index#7063A5
markup.inserted.diff#487AA9
markup.deleted.diff#B63851
markup.changed.diff#C6728B
meta.diff.context, meta.diff#7C6472
punctuation.definition.range.diff#7063A5
meta.diff.header, meta.separator.diff#5D5094
punctuation.definition.inserted.diff#487AA9
support.function.misc.css, meta.function.variable.css#4279A5