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#0A0812
  • activityBar.border#0A0812
  • activityBar.foreground#E2D9F3
  • activityBar.inactiveForeground#4C3A7A
  • activityBarBadge.background#7C3AED
  • activityBarBadge.foreground#E2D9F3
  • badge.background#7C3AED
  • badge.foreground#E2D9F3
  • breadcrumb.activeSelectionForeground#E2D9F3
  • breadcrumb.focusForeground#E2D9F3
  • breadcrumb.foreground#C4B5FDCC
  • breadcrumbPicker.background#110D22
  • button.background#7C3AED
  • button.foreground#E2D9F3
  • button.hoverBackground#6D28D9
  • dropdown.background#1A1535
  • dropdown.border#2D1B69
  • dropdown.foreground#E2D9F3
  • editor.background#0D0A1A
  • editor.findMatchBackground#2D1B69EE
  • editor.findMatchHighlightBackground#2D1B6999
  • editor.foreground#E2D9F3
  • editor.inactiveSelectionBackground#2D1B6955
  • editor.lineHighlightBackground#6D28D940
  • editor.selectionBackground#2D1B69B3
  • editor.selectionHighlightBackground#2D1B6988
  • editorCursor.foreground#FBBF24
  • editorGroupHeader.tabsBackground#110D22
  • editorHoverWidget.background#110D22
  • editorHoverWidget.border#7C3AED80
  • editorHoverWidget.statusBarBackground#1A1535
  • editorLineNumber.activeForeground#FBBF24
  • editorLineNumber.foreground#C4B5FD4D
  • editorWidget.background#110D22
  • editorWidget.border#7C3AED80
  • editorWidget.resizeBorder#7C3AED
  • focusBorder#7C3AED80
  • foreground#C4B5FD
  • gitDecoration.addedResourceForeground#10B981
  • gitDecoration.deletedResourceForeground#F43F5E
  • gitDecoration.ignoredResourceForeground#4C3A7A
  • gitDecoration.modifiedResourceForeground#FBBF24
  • gitDecoration.untrackedResourceForeground#38BDF8
  • input.background#1A1535
  • input.border#2D1B69
  • input.foreground#E2D9F3
  • inputOption.activeBorder#7C3AED
  • list.activeSelectionBackground#2D1B69CC
  • list.activeSelectionForeground#E2D9F3
  • list.activeSelectionIconForeground#FBBF24
  • list.errorForeground#F43F5E
  • list.focusAndSelectionOutline#7C3AED
  • list.focusOutline#7C3AED80
  • list.hoverBackground#1A153580
  • list.hoverForeground#FBBF24
  • list.inactiveSelectionBackground#2D1B6940
  • list.warningForeground#FBBF24
  • panel.background#110D22
  • panel.border#0A0812
  • panelTitle.activeBorder#7C3AED
  • panelTitle.activeForeground#E2D9F3
  • panelTitle.inactiveForeground#4C3A7A
  • scrollbarSlider.activeBackground#7C3AED80
  • scrollbarSlider.background#2D1B6980
  • scrollbarSlider.hoverBackground#4C3A7A80
  • sideBar.background#0A0812
  • sideBar.border#2D1B69B3
  • sideBar.foreground#C4B5FD
  • sideBarSectionHeader.background#110D22
  • sideBarSectionHeader.border#2D1B6980
  • sideBarSectionHeader.foreground#C4B5FD
  • sideBarTitle.foreground#E2D9F3
  • statusBar.background#0A0812
  • statusBar.border#0A0812
  • statusBar.debuggingBackground#0A0812
  • statusBar.foreground#C4B5FD
  • statusBarItem.activeBackground#7C3AED
  • statusBarItem.hoverBackground#1A1535
  • tab.activeBackground#1A1535
  • tab.activeBorder#7C3AED
  • tab.activeForeground#E2D9F3
  • tab.border#0A0812
  • tab.inactiveBackground#110D22
  • tab.inactiveForeground#C4B5FD80
  • terminal.ansiBlack#0A0812
  • terminal.ansiBlue#60A5FA
  • terminal.ansiBrightBlack#1A1535
  • terminal.ansiBrightBlue#60A5FA
  • terminal.ansiBrightCyan#38BDF8
  • terminal.ansiBrightGreen#34D399
  • terminal.ansiBrightMagenta#A78BFA
  • terminal.ansiBrightRed#F43F5E
  • terminal.ansiBrightWhite#E2D9F3
  • terminal.ansiBrightYellow#FBBF24
  • terminal.ansiCyan#38BDF8
  • terminal.ansiGreen#10B981
  • terminal.ansiMagenta#7C3AED
  • terminal.ansiRed#F43F5E
  • terminal.ansiWhite#C4B5FD
  • terminal.ansiYellow#FBBF24
  • terminal.background#0D0A1A
  • terminal.foreground#E2D9F3
  • titleBar.activeBackground#0A0812
  • titleBar.activeForeground#E2D9F3
  • titleBar.inactiveBackground#0A0812
  • titleBar.inactiveForeground#4C3A7A
  • tree.activeIndentGuidesStroke#7C3AED
  • 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#A78BFA
keyword.operator#C4B5FD
punctuation, punctuation.separator, punctuation.terminator, meta.delimiter, punctuation.section, punctuation.definition.parameters, punctuation.definition.block, punctuation.definition.tag#818CF8
entity.name.function, support.function, meta.function-call, variable.function#FBBF24
support.function.react, support.function.builtin.react, entity.name.function.react, meta.function-call.react#FBBF24italic
meta.decorator, entity.name.function.decorator, punctuation.decorator#FBBF24italic
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#38BDF8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#818CF8
constant.numeric, constant.language, constant.other#F43F5E
support.type.property-name.json, meta.object-key.json, meta.structure.dictionary.key.json#A78BFA
string.quoted.double.json, string.quoted.single.json#38BDF8
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#A78BFA
entity.other.attribute-name, entity.other.attribute-name.html#FBBF24
string.quoted.double.html, string.quoted.single.html, string.unquoted.html#38BDF8
entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.js#A78BFA
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#38BDF8
support.type.property-name.css, support.type.property-name.media.css#A78BFA
support.constant.property-value.css, support.constant.color.w3c-standard-color-name.css, constant.numeric.css#38BDF8
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#38BDF8