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#C4B9D2
  • activityBar.border#C4B9D2
  • activityBar.foreground#2E1065
  • activityBar.inactiveForeground#7C6C9F
  • activityBarBadge.background#6D28D9
  • activityBarBadge.foreground#E0DBEC
  • badge.background#6D28D9
  • badge.foreground#E0DBEC
  • breadcrumb.activeSelectionForeground#2E1065
  • breadcrumb.focusForeground#2E1065
  • breadcrumb.foreground#2E1065CC
  • breadcrumbPicker.background#D3CBDF
  • button.background#6D28D9
  • button.foreground#E0DBEC
  • button.hoverBackground#5B21B6
  • dropdown.background#E0DBEC
  • dropdown.border#B0A3C5
  • dropdown.foreground#2E1065
  • editor.background#E0DBEC
  • editor.findMatchBackground#DDD6FEE6
  • editor.findMatchHighlightBackground#DDD6FEA0
  • editor.foreground#2E1065
  • editor.inactiveSelectionBackground#A78BFA30
  • editor.lineHighlightBackground#6D28D910
  • editor.selectionBackground#A78BFA60
  • editor.selectionHighlightBackground#A78BFA40
  • editorCursor.foreground#6D28D9
  • editorGroupHeader.tabsBackground#D3CBDF
  • editorHoverWidget.background#D3CBDF
  • editorHoverWidget.border#6D28D980
  • editorHoverWidget.statusBarBackground#C4B9D2
  • editorLineNumber.activeForeground#6D28D9
  • editorLineNumber.foreground#7C6C9F
  • editorWidget.background#D3CBDF
  • editorWidget.border#6D28D980
  • editorWidget.resizeBorder#6D28D9
  • focusBorder#6D28D980
  • foreground#2E1065
  • gitDecoration.addedResourceForeground#047857
  • gitDecoration.deletedResourceForeground#B91C1C
  • gitDecoration.ignoredResourceForeground#7C6C9F
  • gitDecoration.modifiedResourceForeground#B45309
  • gitDecoration.untrackedResourceForeground#0369A1
  • input.background#E0DBEC
  • input.border#B0A3C5
  • input.foreground#2E1065
  • inputOption.activeBorder#6D28D9
  • list.activeSelectionBackground#B0A3C580
  • list.activeSelectionForeground#2E1065
  • list.activeSelectionIconForeground#6D28D9
  • list.errorForeground#B91C1C
  • list.focusAndSelectionOutline#6D28D9
  • list.focusOutline#6D28D980
  • list.hoverBackground#B0A3C550
  • list.hoverForeground#6D28D9
  • list.inactiveSelectionBackground#B0A3C533
  • list.warningForeground#B45309
  • panel.background#D3CBDF
  • panel.border#C4B9D2
  • panelTitle.activeBorder#6D28D9
  • panelTitle.activeForeground#2E1065
  • panelTitle.inactiveForeground#7C6C9F
  • scrollbarSlider.activeBackground#6D28D960
  • scrollbarSlider.background#B0A3C560
  • scrollbarSlider.hoverBackground#7C6C9F60
  • sideBar.background#D3CBDF
  • sideBar.border#C4B9D2
  • sideBar.foreground#2E1065
  • sideBarSectionHeader.background#C4B9D2
  • sideBarSectionHeader.border#B0A3C5
  • sideBarSectionHeader.foreground#2E1065
  • sideBarTitle.foreground#2E1065
  • statusBar.background#C4B9D2
  • statusBar.border#C4B9D2
  • statusBar.foreground#2E1065
  • statusBarItem.activeBackground#6D28D9
  • statusBarItem.hoverBackground#D3CBDF
  • tab.activeBackground#E0DBEC
  • tab.activeBorder#6D28D9
  • tab.activeForeground#2E1065
  • tab.border#C4B9D2
  • tab.inactiveBackground#D3CBDF
  • tab.inactiveForeground#7C6C9F
  • terminal.ansiBlack#D3CBDF
  • terminal.ansiBlue#0369A1
  • terminal.ansiBrightBlack#C4B9D2
  • terminal.ansiBrightBlue#38BDF8
  • terminal.ansiBrightCyan#38BDF8
  • terminal.ansiBrightGreen#059669
  • terminal.ansiBrightMagenta#A78BFA
  • terminal.ansiBrightRed#B91C1C
  • terminal.ansiBrightWhite#2E1065
  • terminal.ansiBrightYellow#D97706
  • terminal.ansiCyan#0369A1
  • terminal.ansiGreen#047857
  • terminal.ansiMagenta#6D28D9
  • terminal.ansiRed#B91C1C
  • terminal.ansiWhite#2E1065
  • terminal.ansiYellow#B45309
  • terminal.background#E0DBEC
  • terminal.foreground#2E1065
  • titleBar.activeBackground#C4B9D2
  • titleBar.activeForeground#2E1065
  • titleBar.inactiveBackground#C4B9D2
  • titleBar.inactiveForeground#7C6C9F
  • tree.activeIndentGuidesStroke#6D28D9
  • tree.indentGuidesStroke#B0A3C5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#047857italic
variable, variable.other, variable.other.readwrite, variable.parameter, meta.block, meta.parameter.type.variable#2E1065
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier, keyword.other.import, keyword.other.export#6D28D9
keyword.operator#2E1065
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.tag#6D28D9
entity.name.function, support.function, meta.function-call, variable.function#B45309
support.function.react, support.function.builtin.react, entity.name.function.react, meta.function-call.react#B45309italic
meta.decorator, entity.name.function.decorator, punctuation.decorator#B45309italic
entity.name.type.class, entity.name.type.interface, entity.name.type, support.class, support.type#4C1D95bold
string, string.quoted, string.quoted.double, string.quoted.single, string.template#0369A1
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#6D28D9
constant.numeric, constant.language, constant.other#B91C1C
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json#6D28D9
string.quoted.double.json, string.quoted.single.json#0369A1
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#6D28D9
entity.other.attribute-name, entity.other.attribute-name.html#B45309
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#0369A1
entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.js#6D28D9
support.class.component.js, support.class.component.ts, support.class.component.tsx, entity.name.tag.open.jsx, entity.name.tag.close.jsx#4C1D95bold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts#312E81
string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#0369A1
support.type.property-name.css, support.type.property-name.media.css#6D28D9
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, constant.numeric.css#0369A1
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, entity.name.tag.css#4C1D95
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#2E1065bold
markup.fenced_code.block, markup.inline.raw, markup.raw.block, punctuation.definition.raw.markdown#0369A1