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#E0F7FA
- activityBar.foreground#005F73
- activityBarBadge.background#005F73
- activityBarBadge.foreground#FFFFFF
- breadcrumb.activeSelectionForeground#1A1A1A
- breadcrumb.background#FFFFFF
- breadcrumb.foreground#999999
- breadcrumb.separatorForeground#CCCCCC
- button.background#219EBC
- button.foreground#FFFFFF
- button.hoverBackground#8ECAE6
- debugToolBar.background#F8F9FA
- dropdown.background#FFFFFF
- dropdown.border#CCCCCC
- dropdown.foreground#1A1A1A
- editor.background#FFFFFF
- editor.findMatchBackground#FFB70388
- editor.findMatchHighlightBackground#FFD16644
- editor.findRangeHighlightBackground#F0EFEB88
- editor.foreground#1A1A1A
- editor.lineHighlightBackground#F1F1F1
- editor.selectionBackground#BEE9E880
- editor.selectionForeground#1A1A1A
- editor.selectionHighlightBackground#D8F3DC80
- editor.wordHighlightBackground#FCD5CE80
- editor.wordHighlightStrongBackground#FCD5CEAA
- editorBracketHighlight.foreground1#FFB703
- editorBracketHighlight.foreground2#219EBC
- editorBracketHighlight.foreground3#FB8500
- editorBracketHighlight.foreground4#8ECAE6
- editorBracketHighlight.foreground5#CA6702
- editorBracketHighlight.foreground6#3D405B
- editorBracketMatch.background#E0FBFC
- editorBracketMatch.border#005F73
- editorCursor.foreground#005F73
- editorError.foreground#E63946
- editorGroup.border#CCCCCC
- editorGroup.dropBackground#005F7333
- editorGroup.dropIntoPromptBackground#F8F9FA
- editorGroup.dropIntoPromptForeground#1A1A1A
- editorGroupHeader.tabsBackground#F8F9FA
- editorGutter.background#FFFFFF
- editorHoverWidget.background#F8F9FA
- editorHoverWidget.border#CCCCCC
- editorHoverWidget.foreground#1A1A1A
- editorHoverWidget.highlightForeground#005F73
- editorIndentGuide.background#EAEAEA
- editorInfo.foreground#2A9D8F
- editorInlayHint.background#EAEAEA
- editorInlayHint.foreground#666666
- editorLightBulb.foreground#F4A261
- editorLightBulbAutoFix.foreground#2A9D8F
- editorLineNumber.activeForeground#005F73
- editorLineNumber.foreground#A0A0A0
- editorLink.activeForeground#219EBC
- editorOverviewRuler.border#E0E0E0
- editorOverviewRuler.bracketMatchForeground#005F7388
- editorOverviewRuler.errorForeground#E6394688
- editorOverviewRuler.findMatchForeground#FFB70388
- editorOverviewRuler.infoForeground#2A9D8F88
- editorOverviewRuler.warningForeground#F4A26188
- editorOverviewRuler.wordHighlightForeground#FCD5CE80
- editorOverviewRuler.wordHighlightStrongForeground#FCD5CEAA
- editorRuler.foreground#E0E0E0
- editorStickyScroll.background#F8F9FA
- editorStickyScrollHover.background#E0E0E0
- editorSuggestWidget.background#FFFFFF
- editorSuggestWidget.foreground#1A1A1A
- editorSuggestWidget.highlightForeground#005F73
- editorSuggestWidget.selectedBackground#D8F3DC
- editorSymbolHighlightBackground#FCD5CE55
- editorUnicodeHighlight.background#F0EFEB88
- editorUnicodeHighlight.border#E63946
- editorWarning.foreground#F4A261
- editorWhitespace.foreground#E0E0E0
- editorWidget.background#FFFFFF
- editorWidget.foreground#1A1A1A
- focusBorder#005F73
- input.background#FFFFFF
- input.border#CCCCCC
- input.foreground#1A1A1A
- input.placeholderForeground#A0A0A0
- list.activeSelectionBackground#D8F3DC
- list.activeSelectionForeground#1A1A1A
- list.hoverBackground#E8F0F1
- list.hoverForeground#1A1A1A
- list.inactiveSelectionBackground#E0E0E0
- list.inactiveSelectionForeground#333333
- minimap.background#FFFFFF
- minimap.errorHighlight#E6394644
- minimap.findMatchHighlight#FFB70388
- minimap.selectionHighlight#D8F3DC80
- minimap.warningHighlight#F4A26144
- notification.background#FFFFFF
- notification.buttonBackground#219EBC
- notification.buttonForeground#FFFFFF
- notification.foreground#1A1A1A
- panel.background#F8F9FA
- panel.border#CCCCCC
- panelTitle.activeBorder#005F73
- panelTitle.activeForeground#005F73
- panelTitle.inactiveForeground#666666
- peekViewEditor.background#F8F9FA
- peekViewResult.background#FFFFFF
- peekViewTitle.background#F1F1F1
- scrollbarSlider.activeBackground#219EBC
- scrollbarSlider.background#CCCCCC80
- scrollbarSlider.hoverBackground#219EBCAA
- settings.headerForeground#005F73
- settings.modifiedItemIndicator#F77F00
- sideBar.background#FAFAFA
- sideBar.border#CCCCCC
- sideBar.foreground#333333
- sideBarSectionHeader.foreground#005F73
- sideBarTitle.foreground#005F73
- statusBar.background#FAFAFA
- statusBar.debuggingBackground#E63946
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#333333
- statusBar.noFolderBackground#FAFAFA
- tab.activeBackground#FFFFFF
- tab.activeForeground#1A1A1A
- tab.border#CCCCCC
- tab.hoverBackground#FFFFFF
- tab.inactiveBackground#F8F9FA
- tab.inactiveForeground#A0A0A0
- tab.unfocusedActiveForeground#666666
- tab.unfocusedHoverBackground#F1F1F1
- tab.unfocusedInactiveForeground#BBBBBB
- terminal.background#FFFFFF
- terminal.foreground#1A1A1A
- terminalCursor.foreground#005F73
- titleBar.activeBackground#E0F7FA
- titleBar.activeForeground#005F73
- titleBar.border#CCCCCC
- titleBar.inactiveBackground#F8F9FA
- titleBar.inactiveForeground#999999
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.variable | #F77F00 | — |
| constant.language | #FB8500 | bold |
| meta.import, meta.import.ts, meta.import.js | #CA6702 | — |
| entity.name.module.js, entity.name.module.ts | #3D405B | — |
| meta.function | #2A9D8F | — |
| meta.enum | #FFB703 | — |
| keyword.control.flow | #E63946 | bold |
| meta.decorator, meta.decorator punctuation, entity.name.function.decorator | #CA6702 | — |
| meta.return-type | #8ECAE6 | — |
| meta.arrow | #CA6702 | — |
| meta.embedded.block | #1A1A1A | — |
| markup.inline.raw | #FFB703 | italic |
| markup.inserted | #2A9D8F | italic |
| markup.deleted | #E63946 | italic |
| markup.list | #F77F00 | — |
| markup.underline | #219EBC | underline |
| markup.strikethrough | #E63946 | strikethrough |
| constant.character.escape | #2A9D8F | bold |
| meta.annotation | #005F73 | — |
| storage.type.function.arrow | #219EBC | — |
| keyword.other.unit | #FFB703 | — |
| comment, punctuation.definition.comment | #6C757D | italic |
| string, constant.other.symbol | #2A9D8F | — |
| constant.numeric | #FFB703 | bold |
| constant.language.boolean, constant.language | #FB8500 | bold |
| keyword, storage.type, storage.modifier | #CA6702 | — |
| keyword.operator | #219EBC | — |
| variable, identifier, variable.language | #005F73 | — |
| entity.name.function, support.function, meta.function-call | #2A9D8F | bold |
| variable.parameter | #F77F00 | — |
| entity.name.type, support.type, entity.name.class | #8ECAE6 | — |
| punctuation | #495057 | — |
| invalid, invalid.illegal | #FFFFFF | — |
| markup.heading | #FFB703 | bold |
| markup.bold | #FB8500 | bold |
| markup.italic, markup.quote | #6C757D | italic |
| entity.name.tag, support.class.component | #219EBC | — |
| support.constant, constant.other | #F77F00 | — |
| meta.object-literal.key | #CA6702 | — |
| support.type.property-name | #005F73 | — |
| entity.other.attribute-name | #3D405B | — |