Polychrome themes
Publisher: Chad DonohueThemes in package: 2
🎨 Generated light and dark themes for vscode
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#DED5CD
- activityBar.border#00000011
- activityBar.dropBackground#FBFAF9
- activityBar.foreground#666666
- activityBarBadge.background#6B3DF1
- activityBarBadge.foreground#FFFFFF
- badge.background#6B3DF1
- badge.foreground#FFFFFF
- button.background#D1C2F9
- button.foreground#000000
- button.hoverBackground#9E7FF5
- contrastActiveBorder#00000000
- contrastBorder#00000011
- debugToolBar.background#E7E1DB
- descriptionForeground#666666
- diffEditor.insertedTextBackground#2db44826
- diffEditor.removedTextBackground#f42a2a26
- dropdown.background#FBFAF9
- dropdown.border#00000022
- dropdown.foreground#1A1A1A
- editor.background#FBFAF9
- editor.findMatchBackground#351E7855
- editor.findMatchBorder#0000
- editor.findMatchHighlightBackground#351E7822
- editor.findMatchHighlightBorder#0000
- editor.findRangeHighlightBackground#351E7822
- editor.findRangeHighlightBorder#0000
- editor.foreground#502DB4
- editor.hoverHighlightBackground#351E7833
- editor.inactiveSelectionBackground#E7E1DBcc
- editor.lineHighlightBackground#EBE6E177
- editor.lineHighlightBorder#0000
- editor.rangeHighlightBackground#351E7811
- editor.rangeHighlightBorder#0000
- editor.selectionBackground#E7E1DBcc
- editor.selectionHighlightBackground#E7E1DB99
- editor.selectionHighlightBorder#0000
- editor.wordHighlightBackground#E7E1DBcc
- editor.wordHighlightBorder#0000
- editor.wordHighlightStrongBackground#E7E1DB
- editor.wordHighlightStrongBorder#0000
- editorBracketMatch.background#0000
- editorBracketMatch.border#351E7855
- editorCodeLens.foreground#666666
- editorCursor.foreground#A97E50
- editorError.border#0000
- editorError.foreground#f42a2a
- editorGroup.background#F1EDEA
- editorGroup.border#DED5CD
- editorGroup.dropBackground#E7E1DB
- editorGroupHeader.noTabsBackground#F1EDEA
- editorGroupHeader.tabsBackground#F1EDEA
- editorGroupHeader.tabsBorder#FBFAF9
- editorGutter.addedBackground#2db448
- editorGutter.deletedBackground#f42a2a
- editorGutter.modifiedBackground#d5880b
- editorHoverWidget.background#F1EDEA
- editorIndentGuide.activeBackground#D3C8BD
- editorIndentGuide.background#E7E1DB
- editorInfo.border#0000
- editorInfo.foreground#1492ff
- editorLineNumber.activeForeground#9E7FF5
- editorLineNumber.foreground#CEBFF9
- editorLink.activeForeground#351E78
- editorSuggestWidget.background#F1EDEA
- editorSuggestWidget.border#D1C2F9
- editorSuggestWidget.foreground#1A1A1A
- editorSuggestWidget.highlightForeground#502DB4
- editorSuggestWidget.selectedBackground#E7E1DB
- editorWarning.border#0000
- editorWarning.foreground#d5880b
- editorWhitespace.foreground#B29AF5
- editorWidget.background#FFFFFF
- editorWidget.border#9E7FF5
- errorForeground#f42a2a
- extensionButton.prominentBackground#D1C2F9
- extensionButton.prominentForeground#000000
- extensionButton.prominentHoverBackground#9E7FF5
- focusBorder#00000000
- foreground#1A1A1A
- gitDecoration.conflictingResourceForeground#f42a2a
- gitDecoration.deletedResourceForeground#f42a2a
- gitDecoration.ignoredResourceForeground#66666677
- gitDecoration.modifiedResourceForeground#d5880b
- gitDecoration.submoduleResourceForeground#1492ff
- gitDecoration.untrackedResourceForeground#2db448
- input.background#E7E1DB
- input.border#00000022
- input.foreground#000000
- input.placeholderForeground#00000044
- inputOption.activeBorder#9E7FF5
- inputValidation.errorBackground#392A31
- inputValidation.errorBorder#CD5C5C
- list.activeSelectionBackground#FBFAF9
- list.activeSelectionForeground#000000
- list.dropBackground#FBFAF9
- list.focusBackground#E7E1DB
- list.focusForeground#000000
- list.highlightForeground#502DB4
- list.hoverBackground#E7E1DB
- list.hoverForeground#1A1A1A
- list.inactiveSelectionBackground#FBFAF9
- list.inactiveSelectionForeground#000000
- notificationCenter.border#0000
- notificationCenterHeader.background#DED5CD
- notificationCenterHeader.foreground#351E78
- notificationLink.foreground#6B3DF1
- notifications.background#F1EDEA
- notifications.border#DED5CD
- notifications.foreground#351E78
- notificationToast.border#0000
- panel.background#FFFFFF
- panel.border#DED5CD
- panel.dropBackground#FBFAF9
- panelTitle.activeBorder#502DB4
- panelTitle.activeForeground#351E78
- panelTitle.inactiveForeground#666666
- peekView.border#9E7FF5
- peekViewEditor.background#FBFAF9
- peekViewEditor.matchHighlightBackground#BDA58C44
- peekViewEditorGutter.background#FBFAF9
- peekViewResult.background#F1EDEA
- peekViewResult.selectionBackground#E7E1DB
- progressBar.background#6B3DF1
- scrollbar.shadow#00000000
- scrollbarSlider.activeBackground#00000055
- scrollbarSlider.background#00000011
- scrollbarSlider.hoverBackground#00000033
- selection.background#E7E1DB
- sideBar.background#F1EDEA
- sideBar.border#DED5CD
- sideBar.dropBackground#FBFAF9
- sideBar.foreground#666666
- sideBarSectionHeader.background#E7E1DB00
- sideBarSectionHeader.foreground#000000aa
- sideBarTitle.foreground#000000aa
- statusBar.background#D6CBC1
- statusBar.border#00000000
- statusBar.debuggingBackground#A97E50
- statusBar.debuggingForeground#000000
- statusBar.foreground#666666
- statusBar.noFolderBackground#6B3DF1
- statusBar.noFolderForeground#FFFFFF
- tab.activeBackground#FBFAF9
- tab.activeBorder#FBFAF9
- tab.activeForeground#000000
- tab.border#DED5CD
- tab.hoverBackground#FFFFFF
- tab.hoverBorder#FBFAF9
- tab.inactiveBackground#F1EDEA
- tab.inactiveForeground#666666
- tab.unfocusedActiveBorder#FBFAF9
- tab.unfocusedActiveForeground#666666
- tab.unfocusedHoverBackground#FBFAF9
- tab.unfocusedHoverBorder#FBFAF9
- tab.unfocusedInactiveForeground#666666
- terminal.ansiBlack#D1C2F9
- terminal.ansiBlue#502DB4
- terminal.ansiBrightBlack#BDA58C
- terminal.ansiBrightBlue#351E78
- terminal.ansiBrightCyan#351E78
- terminal.ansiBrightGreen#6B3DF1
- terminal.ansiBrightMagenta#BDA58C
- terminal.ansiBrightRed#A97E50
- terminal.ansiBrightWhite#000000
- terminal.ansiBrightYellow#BDA58C
- terminal.ansiCyan#9E7FF5
- terminal.ansiGreen#6B3DF1
- terminal.ansiMagenta#A97E50
- terminal.ansiRed#f42a2a
- terminal.ansiWhite#f5f5f5
- terminal.ansiYellow#A97E50
- textBlockQuote.background#E7E1DB
- textBlockQuote.border#D1C2F9
- textLink.activeForeground#000000
- textLink.foreground#6B3DF1
- textPreformat.foreground#BDA58C
- titleBar.activeBackground#D6CBC1
- titleBar.border#00000000
- widget.shadow#0004
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| entity.name.type, support.type, entity.name.function, entity.name.tag, entity.other.attribute-name.class, entity.other.attribute-name.id, support.function | #351E78 | — |
| support.other.variable, entity.other.attribute-name, support.class | #502DB4 | — |
| variable.other.readwrite.alias, meta.property-name, support.type.property-name, variable.language.this, support.variable.property.dom.js, variable | #6B3DF1 | — |
| support.class.component.js, support.variable.dom, support.variable.object, support.variable.property.process | #9E7FF5 | — |
| meta.brace, punctuation, meta.property-value | #D1C2F9 | — |
| string, constant.numeric, constant.language, constant.character, constant.other, variable.other.constant, support.constant, meta.object-literal.key | #A97E50 | — |
| keyword, storage | #BDA58C | — |
| comment.block.c | #D2CDC8 | — |
| comment | #D1C2F9 | italic |
| meta.parameters comment.block | #D2CDC8 | italic |
| storage.type | #A97E50 | italic |
| entity.name.class | #351E78 | underline |
| entity.other.inherited-class | #351E78 | italic underline |
| variable.parameter | #6B3DF1 | italic |
| invalid | #F8F8F0 | — |
| invalid.deprecated | #F8F8F0 | — |
| token.info-token | #6796e6 | — |
| token.warn-token | #cd9731 | — |
| token.error-token | #f44747 | — |
| token.debug-token | #b267e6 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...