Sprinkle Pack
Publisher: Kagan MamakThemes in package: 15
A VS Code extension containing multiple custom color themes, allowing users to choose their preferred 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#181818
- activityBar.foreground#EAEAEA
- activityBarBadge.background#66C2A5
- activityBarBadge.foreground#1A1A1A
- breadcrumb.activeSelectionForeground#EAEAEA
- breadcrumb.background#121212
- breadcrumb.foreground#B0B0B0
- breadcrumb.separatorForeground#999999
- button.background#66C2A5
- button.foreground#1A1A1A
- button.hoverBackground#8ED1C5
- debugToolBar.background#1A1A1A
- dropdown.background#222222
- dropdown.border#444444
- dropdown.foreground#FFFFFF
- editor.background#121212
- editor.findMatchBackground#487A7888
- editor.findMatchHighlightBackground#487A7844
- editor.findRangeHighlightBackground#2F3F4888
- editor.foreground#D6D6D6
- editor.lineHighlightBackground#1E1E1E
- editor.selectionBackground#2D3C4B
- editor.selectionForeground#D6D6D6
- editor.selectionHighlightBackground#3C4B5C88
- editor.wordHighlightBackground#3E576688
- editor.wordHighlightStrongBackground#3E5766BB
- editorBracketHighlight.foreground1#FFB000
- editorBracketHighlight.foreground2#00A2FF
- editorBracketHighlight.foreground3#DDAA33
- editorBracketHighlight.foreground4#66C2A5
- editorBracketHighlight.foreground5#FC8D62
- editorBracketHighlight.foreground6#8DA0CB
- editorBracketMatch.background#3A3A3A
- editorBracketMatch.border#CCCCCC
- editorCursor.foreground#F4BF75
- editorError.foreground#FF6F69
- editorGroup.border#2C2C2C
- editorGroup.dropBackground#66C2A533
- editorGroup.dropIntoPromptBackground#1A1A1A
- editorGroup.dropIntoPromptForeground#CCCCCC
- editorGroupHeader.tabsBackground#1A1A1A
- editorGutter.background#121212
- editorHoverWidget.background#181818
- editorHoverWidget.border#2C2C2C
- editorHoverWidget.foreground#CCCCCC
- editorHoverWidget.highlightForeground#66C2A5
- editorIndentGuide.background#2A2A2A
- editorInfo.foreground#6EC6CA
- editorInlayHint.background#1E1E1E
- editorInlayHint.foreground#AAAAAA
- editorLightBulb.foreground#FFCC5C
- editorLightBulbAutoFix.foreground#66C2A5
- editorLineNumber.activeForeground#EAEAEA
- editorLineNumber.foreground#6B6B6B
- editorLink.activeForeground#66C2A5
- editorOverviewRuler.border#1A1A1A
- editorOverviewRuler.bracketMatchForeground#CCCCCC88
- editorOverviewRuler.errorForeground#FF6F6988
- editorOverviewRuler.findMatchForeground#487A7888
- editorOverviewRuler.infoForeground#6EC6CA88
- editorOverviewRuler.warningForeground#FFCC5C88
- editorOverviewRuler.wordHighlightForeground#3E576688
- editorOverviewRuler.wordHighlightStrongForeground#3E5766BB
- editorRuler.foreground#2A2A2A
- editorStickyScroll.background#181818
- editorStickyScrollHover.background#222222
- editorSuggestWidget.background#181818
- editorSuggestWidget.foreground#CCCCCC
- editorSuggestWidget.highlightForeground#66C2A5
- editorSuggestWidget.selectedBackground#2D3C4B
- editorSymbolHighlightBackground#3E576655
- editorUnicodeHighlight.background#2F3F4888
- editorUnicodeHighlight.border#FF6F69
- editorWarning.foreground#FFCC5C
- editorWhitespace.foreground#2A2A2A
- editorWidget.background#181818
- editorWidget.foreground#CCCCCC
- focusBorder#66C2A5
- input.background#222222
- input.border#444444
- input.foreground#FFFFFF
- input.placeholderForeground#888888
- list.activeSelectionBackground#2D3C4B
- list.activeSelectionForeground#FFFFFF
- list.hoverBackground#3A4B5C
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#1F2B38
- list.inactiveSelectionForeground#CCCCCC
- minimap.background#121212
- minimap.errorHighlight#FF6F6944
- minimap.findMatchHighlight#487A7888
- minimap.selectionHighlight#3D4D5D88
- minimap.warningHighlight#FFCC5C44
- notification.background#181818
- notification.buttonBackground#66C2A5
- notification.buttonForeground#1A1A1A
- notification.foreground#CCCCCC
- panel.background#181818
- panel.border#2C2C2C
- panelTitle.activeBorder#66C2A5
- panelTitle.activeForeground#EAEAEA
- panelTitle.inactiveForeground#999999
- peekViewEditor.background#181818
- peekViewResult.background#222222
- peekViewTitle.background#222222
- scrollbarSlider.activeBackground#66C2A5
- scrollbarSlider.background#44444488
- scrollbarSlider.hoverBackground#66C2A5AA
- settings.headerForeground#FFCC5C
- settings.modifiedItemIndicator#FFA07A
- sideBar.background#1A1A1A
- sideBar.border#2C2C2C
- sideBar.foreground#CCCCCC
- sideBarSectionHeader.foreground#66C2A5
- sideBarTitle.foreground#66C2A5
- statusBar.background#1C1C1C
- statusBar.debuggingBackground#FF6F69
- statusBar.debuggingForeground#121212
- statusBar.foreground#CCCCCC
- statusBar.noFolderBackground#1C1C1C
- tab.activeBackground#121212
- tab.activeForeground#FFFFFF
- tab.border#121212
- tab.hoverBackground#1A1A1A
- tab.inactiveBackground#1A1A1A
- tab.inactiveForeground#999999
- tab.unfocusedActiveForeground#CCCCCC
- tab.unfocusedHoverBackground#1F1F1F
- tab.unfocusedInactiveForeground#666666
- terminal.background#121212
- terminal.foreground#CCCCCC
- terminalCursor.foreground#66C2A5
- titleBar.activeBackground#1A1A1A
- titleBar.activeForeground#EAEAEA
- titleBar.border#2C2C2C
- titleBar.inactiveBackground#1A1A1A
- titleBar.inactiveForeground#999999
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.variable | #FFCC5C | — |
| constant.language | #FFB347 | bold |
| meta.import, meta.import.ts, meta.import.js | #FFA07A | — |
| entity.name.module.js, entity.name.module.ts | #ECA7FF | — |
| meta.function | #A8E6CF | — |
| meta.enum | #FFD56E | — |
| keyword.control.flow | #FF6F69 | bold |
| meta.decorator, meta.decorator punctuation, entity.name.function.decorator | #FFA07A | — |
| meta.return-type | #6EC6CA | — |
| meta.arrow | #FFB347 | — |
| meta.embedded.block | #D6D6D6 | — |
| markup.inline.raw | #FFCC5C | italic |
| markup.inserted | #A8E6CF | italic |
| markup.deleted | #FF6F69 | italic |
| markup.list | #FFD56E | — |
| markup.underline | #FFA07A | underline |
| markup.strikethrough | #FF6F69 | strikethrough |
| constant.character.escape | #6EC6CA | bold |
| meta.annotation | #FFCC5C | — |
| storage.type.function.arrow | #FFB347 | — |
| keyword.other.unit | #FFD56E | — |
| comment, punctuation.definition.comment | #999999 | italic |
| string, constant.other.symbol | #A8E6CF | — |
| constant.numeric | #FFD56E | bold |
| constant.language.boolean, constant.language | #6EC6CA | bold |
| keyword, storage.type, storage.modifier | #FFA07A | — |
| keyword.operator | #FFB347 | — |
| variable, identifier, variable.language | #D6D6D6 | — |
| entity.name.function, support.function, meta.function-call | #A8E6CF | bold |
| variable.parameter | #FFB347 | — |
| entity.name.type, support.type, entity.name.class | #6EC6CA | — |
| punctuation | #BBBBBB | — |
| invalid, invalid.illegal | #FFFFFF | — |
| markup.heading | #FFCC5C | bold |
| markup.bold | #FFA07A | bold |
| markup.italic, markup.quote | #A6A9BB | italic |
| entity.name.tag, support.class.component | #6EC6CA | — |
| support.constant, constant.other | #C3A4FF | — |
| meta.object-literal.key | #FFD56E | — |
| support.type.property-name | #FFA07A | — |
| storage.class.js | #89A4E0 | — |
| entity.other.attribute-name | #ECA7FF | — |