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#030206
  • activityBar.border#030206
  • activityBar.foreground#E2D9F3
  • activityBar.inactiveForeground#4C3A7A
  • activityBarBadge.background#C084FC
  • activityBarBadge.foreground#E2D9F3
  • badge.background#C084FC
  • badge.foreground#E2D9F3
  • breadcrumb.activeSelectionForeground#E2D9F3
  • breadcrumb.focusForeground#E2D9F3
  • breadcrumb.foreground#C4B5FDCC
  • breadcrumbPicker.background#0B0813
  • button.background#C084FC
  • button.foreground#E2D9F3
  • button.hoverBackground#A855F7
  • dropdown.background#150D26
  • dropdown.border#2D1B69
  • dropdown.foreground#E2D9F3
  • editor.background#05040B
  • editor.findMatchBackground#2D1B69EE
  • editor.findMatchHighlightBackground#2D1B6999
  • editor.foreground#E2D9F3
  • editor.inactiveSelectionBackground#2D1B6955
  • editor.lineHighlightBackground#C084FC22
  • editor.selectionBackground#2D1B69B3
  • editor.selectionHighlightBackground#2D1B6988
  • editorCursor.foreground#06B6D4
  • editorGroupHeader.tabsBackground#0B0813
  • editorHoverWidget.background#0B0813
  • editorHoverWidget.border#C084FC80
  • editorHoverWidget.statusBarBackground#150D26
  • editorLineNumber.activeForeground#06B6D4
  • editorLineNumber.foreground#4C3A7A99
  • editorWidget.background#0B0813
  • editorWidget.border#C084FC80
  • editorWidget.resizeBorder#C084FC
  • focusBorder#C084FC80
  • foreground#C4B5FD
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F43F5E
  • gitDecoration.ignoredResourceForeground#4C3A7A
  • gitDecoration.modifiedResourceForeground#C084FC
  • gitDecoration.untrackedResourceForeground#06B6D4
  • input.background#150D26
  • input.border#2D1B69
  • input.foreground#E2D9F3
  • inputOption.activeBorder#C084FC
  • list.activeSelectionBackground#2D1B69CC
  • list.activeSelectionForeground#E2D9F3
  • list.activeSelectionIconForeground#06B6D4
  • list.errorForeground#F43F5E
  • list.focusAndSelectionOutline#C084FC
  • list.focusOutline#C084FC80
  • list.hoverBackground#150D2680
  • list.hoverForeground#06B6D4
  • list.inactiveSelectionBackground#2D1B6940
  • list.warningForeground#FBBF24
  • panel.background#0B0813
  • panel.border#030206
  • panelTitle.activeBorder#C084FC
  • panelTitle.activeForeground#E2D9F3
  • panelTitle.inactiveForeground#4C3A7A
  • scrollbarSlider.activeBackground#C084FC80
  • scrollbarSlider.background#2D1B6980
  • scrollbarSlider.hoverBackground#4C3A7A80
  • sideBar.background#0A0812
  • sideBar.border#2D1B69B3
  • sideBar.foreground#C4B5FD
  • sideBarSectionHeader.background#0B0813
  • sideBarSectionHeader.border#2D1B6980
  • sideBarSectionHeader.foreground#C4B5FD
  • sideBarTitle.foreground#E2D9F3
  • statusBar.background#030206
  • statusBar.border#030206
  • statusBar.debuggingBackground#030206
  • statusBar.foreground#C4B5FD
  • statusBarItem.activeBackground#C084FC
  • statusBarItem.hoverBackground#150D26
  • tab.activeBackground#150D26
  • tab.activeBorder#C084FC
  • tab.activeForeground#E2D9F3
  • tab.border#030206
  • tab.inactiveBackground#0B0813
  • tab.inactiveForeground#C4B5FD80
  • terminal.ansiBlack#030206
  • terminal.ansiBlue#38BDF8
  • terminal.ansiBrightBlack#150D26
  • terminal.ansiBrightBlue#38BDF8
  • terminal.ansiBrightCyan#06B6D4
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#C084FC
  • terminal.ansiBrightRed#E11D48
  • terminal.ansiBrightWhite#E2D9F3
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#06B6D4
  • terminal.ansiGreen#10B981
  • terminal.ansiMagenta#C084FC
  • terminal.ansiRed#E11D48
  • terminal.ansiWhite#C4B5FD
  • terminal.ansiYellow#FBBF24
  • terminal.background#05040B
  • terminal.foreground#E2D9F3
  • titleBar.activeBackground#030206
  • titleBar.activeForeground#E2D9F3
  • titleBar.inactiveBackground#030206
  • titleBar.inactiveForeground#4C3A7A
  • tree.activeIndentGuidesStroke#C084FC
  • tree.indentGuidesStroke#4C3A7A99

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.line, comment.block, punctuation.definition.comment#34D399italic
variable, variable.other, variable.other.readwrite, variable.parameter, meta.block, meta.parameter.type.variable#E2D9F3
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage.type, storage.modifier, keyword.other.import, keyword.other.export#C084FC
keyword.operator#C4B5FD
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.tag#A78BFA
entity.name.function, support.function, meta.function-call, variable.function#38BDF8
support.function.react, support.function.builtin.react, entity.name.function.react, meta.function-call.react#38BDF8italic
meta.decorator, entity.name.function.decorator, punctuation.decorator#38BDF8italic
entity.name.type.class, entity.name.type.interface, entity.name.type, support.class, support.type#C4B5FDbold
string, string.quoted, string.quoted.double, string.quoted.single, string.template#06B6D4
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#A78BFA
constant.numeric, constant.language, constant.other#E11D48
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json#C084FC
string.quoted.double.json, string.quoted.single.json#06B6D4
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#C084FC
entity.other.attribute-name, entity.other.attribute-name.html#38BDF8
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#06B6D4
entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.js#C084FC
support.class.component.js, support.class.component.ts, support.class.component.tsx, entity.name.tag.open.jsx, entity.name.tag.close.jsx#C4B5FDbold
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.js, entity.other.attribute-name.ts#818CF8
string.quoted.double.jsx, string.quoted.single.jsx, string.quoted.double.tsx, string.quoted.single.tsx#06B6D4
support.type.property-name.css, support.type.property-name.media.css#C084FC
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, constant.numeric.css#06B6D4
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#C4B5FD
markup.heading, entity.name.section.markdown, punctuation.definition.heading.markdown#E2D9F3bold
markup.fenced_code.block, markup.inline.raw, markup.raw.block, punctuation.definition.raw.markdown#06B6D4
Shadow Monarch Abyss by PisethLokaa - VS Code Theme