Pop Theme
Publisher: Nathaniel WebbThemes in package: 2
A VSCode theme based on the design language of @System76's Pop! 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.activeBackground#d4c9c5
- activityBar.activeBorder#FAA41A
- activityBar.background#DDD
- activityBar.foreground#403C3A
- activityBarBadge.background#CF3B00
- activityBarBadge.foreground#FFF
- badge.background#F15D22
- badge.foreground#FFF
- button.background#F6F6F6
- button.foreground#403C3A
- debugExceptionWidget.background#DEDEDE
- debugExceptionWidget.border#FF793E
- debugToolBar.background#e7e7e7
- dropdown.background#F6F6F6
- dropdown.border#63524b00
- dropdown.foreground#403C3A
- editor.background#FFF
- editor.foreground#403C3A
- editor.lineHighlightBackground#EDEDED
- editor.selectionBackground#48B9C744
- editorCursor.foreground#2B2928
- editorGroup.border#DEDEDE22
- editorGroup.dropBackground#FAA41AAA
- editorGroup.emptyBackground#EDEDED
- editorGroupHeader.noTabsBackground#EDEDED
- editorGroupHeader.tabsBackground#EDEDED
- editorHoverWidget.background#F6F6F6
- editorLineNumber.activeForeground#403C3A
- editorLineNumber.foreground#403C3A66
- editorWhitespace.foreground#DEDEDE11
- editorWidget.background#DEDEDE
- extensionButton.prominentBackground#faa41a
- extensionButton.prominentHoverBackground#584c27aa
- focusBorder#574F4A
- input.background#FFFFFF
- input.border#0008
- input.foreground#403C3A
- input.placeholderForeground#403C3A88
- inputOption.activeBorder#FAA41A
- list.activeSelectionBackground#574F4A33
- list.activeSelectionForeground#403C3A
- list.focusBackground#48B9C7
- list.focusForeground#FCFCFC
- list.highlightForeground#FAA41A
- list.hoverBackground#FCFCFC44
- list.inactiveSelectionBackground#48B9C7AA
- panel.background#E6E6E6
- panel.border#403C3A11
- panelTitle.activeBorder#FAA41A
- panelTitle.activeForeground#C26C00
- panelTitle.inactiveForeground#403C3A
- peekView.border#FAA41A
- peekViewEditor.background#EDEDED
- peekViewEditor.matchHighlightBackground#FFCE5199
- peekViewResult.background#EDEDED
- peekViewTitle.background#FCFCFC
- pickerGroup.border#2AA19899
- pickerGroup.foreground#2AA19899
- progressBar.background#48B9C7
- selection.background#1C8D9B
- sideBar.background#F6F6F6
- sideBar.foreground#403C3A
- sideBarSectionHeader.background#DEDEDE
- sideBarSectionHeader.foreground#403C3A
- sideBarTitle.foreground#403C3AAA
- statusBar.background#403C3A
- statusBar.debuggingBackground#f7f7f7
- statusBar.debuggingForeground#403C3A
- statusBar.foreground#F6F6F6
- statusBar.noFolderBackground#403C3A
- statusBarItem.prominentBackground#403C3A
- statusBarItem.prominentHoverBackground#DEDEDE22
- tab.activeBackground#0000
- tab.activeBorder#FAA41A
- tab.activeForeground#C26C00
- tab.border#0000
- tab.inactiveBackground#00000000
- tab.inactiveForeground#403C3A
- terminal.ansiBlack#111
- terminal.ansiBlue#3F51B5
- terminal.ansiBrightBlack#574F4A
- terminal.ansiBrightBlue#839496
- terminal.ansiBrightCyan#93a1a1
- terminal.ansiBrightGreen#574e4a
- terminal.ansiBrightMagenta#6c71c4
- terminal.ansiBrightRed#cb4b16
- terminal.ansiBrightWhite#d3d0d0
- terminal.ansiBrightYellow#657b83
- terminal.ansiCyan#48B9C7
- terminal.ansiGreen#73C48F
- terminal.ansiMagenta#9C27B0
- terminal.ansiRed#F15D22
- terminal.ansiWhite#DEDEDE
- terminal.ansiYellow#faa41a
- textLink.activeForeground#DE8800
- textLink.foreground#C26C00
- titleBar.activeBackground#574F4A
- titleBar.activeForeground#F6F6F6
- titleBar.inactiveBackground#655C56
- titleBar.inactiveForeground#F6F6F699
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| meta.embedded, source.groovy.embedded | #657B83 | — |
| comment | #93A1A1 | italic |
| string | #175541 | — |
| string.regexp | #f15d22 | — |
| constant.numeric | #f15d22 | — |
| variable.language, variable.other | #3d5d6b | — |
| keyword | #b94c4c | — |
| storage | #073642 | — |
| entity.name.class, entity.name.type | #607D8B | — |
| entity.name.function, support.function | #5e4825 | — |
| punctuation.definition.variable | #34a357 | — |
| punctuation.section.embedded.begin, punctuation.section.embedded.end | #f15d22 | — |
| constant.language, meta.preprocessor | #d37f00 | — |
| support.function.construct, keyword.other.new | #f15d22 | — |
| constant.character, constant.other | #CB4B16 | — |
| entity.other.inherited-class | — | — |
| variable.parameter | — | — |
| entity.name.tag | #607D8B | — |
| punctuation.definition.tag.begin, punctuation.definition.tag.end | #376161 | — |
| entity.other.attribute-name | #439b9b | — |
| support.function | #376161 | — |
| punctuation.separator.continuation | #f15d22 | — |
| support.constant | — | — |
| support.type, support.class | #6e8b34 | — |
| support.type.exception | #CB4B16 | — |
| support.other.variable | — | — |
| invalid | — | — |
| meta.diff, meta.diff.header | #E0EDDD | italic |
| markup.deleted | #f15d22 | |
| markup.changed | #cb4b16 | |
| markup.inserted | #219186 | — |
| markup.quote | #488d5e | — |
| markup.list | #faa41a | — |
| markup.bold, markup.italic | #f15d22 | — |
| markup.inline.raw | #2AA198 | |
| markup.heading | #607D8B | — |
| markup.heading.setext | #607D8B |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...