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
  • chat.avatarBackground#7C3AED
  • chat.avatarForeground#E2D9F3
  • chat.requestBackground#110D22
  • chat.requestBorder#2D1B69B3
  • chat.slashCommandBackground#7C3AED33
  • chat.slashCommandForeground#A78BFA
  • commandCenter.activeBackground#1A1535
  • commandCenter.activeForeground#FFFFFF
  • commandCenter.background#110D22
  • commandCenter.border#2D1B6980
  • commandCenter.foreground#E2E8F0
  • diffEditor.diagonalFill#4755694D
  • diffEditor.insertedLineBackground#10B9811A
  • diffEditor.insertedTextBackground#10B98133
  • diffEditor.removedLineBackground#F43F5E1A
  • diffEditor.removedTextBackground#F43F5E33
  • 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
  • editorBracketHighlight.foreground1#A78BFA
  • editorBracketHighlight.foreground2#FBBF24
  • editorBracketHighlight.foreground3#38BDF8
  • editorBracketHighlight.foreground4#F43F5E
  • editorBracketHighlight.foreground5#34D399
  • editorBracketHighlight.foreground6#818CF8
  • editorBracketHighlight.unexpectedBracket.foreground#EF4444
  • editorBracketPairGuide.activeBackground1#A78BFA66
  • editorBracketPairGuide.activeBackground2#FBBF2466
  • editorBracketPairGuide.activeBackground3#38BDF866
  • editorBracketPairGuide.activeBackground4#F43F5E66
  • editorBracketPairGuide.activeBackground5#34D39966
  • editorBracketPairGuide.activeBackground6#818CF866
  • editorBracketPairGuide.background1#A78BFA1A
  • editorBracketPairGuide.background2#FBBF241A
  • editorBracketPairGuide.background3#38BDF81A
  • editorBracketPairGuide.background4#F43F5E1A
  • editorBracketPairGuide.background5#34D3991A
  • editorBracketPairGuide.background6#818CF81A
  • editorCursor.foreground#FBBF24
  • editorGhostText.background#00000000
  • editorGhostText.foreground#C4B5FD66
  • editorGroupHeader.tabsBackground#110D22
  • editorGuide.activeBackground#E11D48
  • editorGuide.background#47556933
  • editorHoverWidget.background#110D22
  • editorHoverWidget.border#7C3AED80
  • editorHoverWidget.statusBarBackground#1A1535
  • editorIndentGuide.activeBackground#E11D48
  • editorIndentGuide.background#47556933
  • editorLineNumber.activeForeground#FBBF24
  • editorLineNumber.foreground#C4B5FD4D
  • editorStickyScroll.background#110D22
  • editorStickyScroll.border#E11D4833
  • editorStickyScrollHover.background#1A1535
  • 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
  • testing.iconFailed#F43F5E
  • testing.iconPassed#10B981
  • testing.iconQueued#FBBF24
  • testing.iconSkipped#64748B
  • testing.iconUnset#94A3B8
  • testing.peekBorder#E11D48
  • testing.runAction#10B981
  • 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
meta.decorator.python, entity.name.function.decorator.python, punctuation.definition.decorator.python#FBBF24italic
variable.parameter.function.language.special.self.python, variable.parameter.function.language.special.cls.python, variable.language.special.self.python, variable.language.special.cls.python#A78BFAitalic
meta.type.annotation.python, entity.name.type.python, support.type.python#C4B5FDbold
string.quoted.docstring.multi.python, string.quoted.docstring.raw.python, string.quoted.third-party.python#34D399italic
storage.modifier.lifetime.rust, entity.name.type.lifetime.rust, punctuation.definition.lifetime.rust#FBBF24italic
entity.name.function.macro.rust, support.macro.rust, punctuation.definition.macro.rust#FBBF24bold
meta.attribute.rust, entity.name.attribute.rust, punctuation.definition.attribute.rust#818CF8italic
entity.name.type.trait.rust#C4B5FDbold
keyword.operator.channel.go, keyword.channel.go#A78BFAbold
keyword.goroutine.go#A78BFAbold
string.quoted.raw.go#38BDF8
entity.name.tag.script.html, entity.name.tag.style.html, entity.name.tag.template.html, entity.name.tag.vue, entity.name.tag.svelte#A78BFAbold
entity.other.attribute-name.directive.vue, entity.other.attribute-name.directive.svelte, entity.other.attribute-name.vue, entity.other.attribute-name.svelte#FBBF24italic
entity.other.attribute-name.class.tailwindcss#38BDF8
keyword.other.DML.sql, keyword.other.DDL.sql, keyword.other.sql, keyword.other.DML.II.sql#A78BFAbold
support.function.scalar.sql, support.function.aggregate.sql#FBBF24
storage.type.sql, support.type.nullable.sql#C4B5FDbold
keyword.other.special-method.dockerfile, entity.name.instruction.dockerfile#A78BFAbold
entity.name.tag.yaml, meta.attribute.yaml, support.type.property-name.yaml#A78BFA
variable.other.normal.shell, variable.other.positional.shell, variable.other.special.shell, variable.other.bracket.shell, punctuation.definition.variable.shell#E2D9F3
Shadow Monarch Abyss by PisethLokaa - VS Code Theme