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#0E1222
- activityBar.foreground#E2F3F1
- activityBar.inactiveForeground#4F5B6E
- activityBarBadge.background#5FEFC4
- activityBarBadge.foreground#0D0A1A
- breadcrumb.activeSelectionForeground#DCEFFF
- breadcrumb.background#0A0F1F
- breadcrumb.focusForeground#DCEFFF
- breadcrumb.foreground#A6A9BB
- breadcrumb.separatorForeground#4F5B6E
- button.background#5FEFC4
- button.border#5FEFC4
- button.foreground#0D0A1A
- button.hoverBackground#7CFFD7
- debugToolBar.background#121728
- dropdown.background#181C2D
- dropdown.border#3A3C4B
- dropdown.foreground#E2F3F1
- editor.background#0A0F1F
- editor.findMatchBackground#4F9B8866
- editor.findMatchHighlightBackground#88C3B455
- editor.findRangeHighlightBackground#24384888
- editor.foreground#DCEFFF
- editor.lineHighlightBackground#151224
- editor.selectionBackground#23344A
- editor.selectionForeground#FFFFFF
- editor.selectionHighlightBackground#2E4C6B88
- editor.wordHighlightBackground#3B586699
- editor.wordHighlightStrongBackground#3B5866CC
- editorBracketHighlight.foreground1#A4FFBB
- editorBracketHighlight.foreground2#B2E76D
- editorBracketHighlight.foreground3#BE8FFF
- editorBracketHighlight.foreground4#A5CCFF
- editorBracketHighlight.foreground5#F3FFB5
- editorBracketHighlight.foreground6#FFB5E5
- editorBracketMatch.background#334455
- editorBracketMatch.border#72F0C9
- editorCodeLens.foreground#4F5B6E
- editorCursor.foreground#A4FFBB
- editorError.foreground#FF6E6E
- editorGroup.border#292B3A
- editorGroup.dropBackground#2F4F6F99
- editorGroup.dropIntoPromptBackground#14182A
- editorGroup.dropIntoPromptForeground#E2F3F1
- editorGroupHeader.tabsBackground#14182A
- editorGroupHeader.tabsBorder#292B3A
- editorGutter.background#0A0F1F
- editorGutter.modifiedBackground#BE8FFF
- editorHoverWidget.background#14182A
- editorHoverWidget.border#2C2F3F
- editorHoverWidget.foreground#DCEFFF
- editorHoverWidget.highlightForeground#5FEFC4
- editorIndentGuide.background#2B2D3C
- editorInfo.foreground#78DCE8
- editorInlayHint.background#1A1E32
- editorInlayHint.foreground#7A8291
- editorLightBulb.foreground#FFD56E
- editorLightBulbAutoFix.foreground#B4FF97
- editorLineNumber.foreground#4F5B6E
- editorLink.activeForeground#78DCE8
- editorOverviewRuler.border#1A1E32
- editorOverviewRuler.bracketMatchForeground#A4FFBB88
- editorOverviewRuler.errorForeground#FF6E6E88
- editorOverviewRuler.findMatchForeground#4F9B8866
- editorOverviewRuler.infoForeground#78DCE888
- editorOverviewRuler.warningForeground#FFD56E88
- editorOverviewRuler.wordHighlightForeground#3B586699
- editorOverviewRuler.wordHighlightStrongForeground#3B5866CC
- editorRuler.foreground#2B2D3C
- editorStickyScroll.background#0B0E1D
- editorStickyScrollHover.background#1A1E32
- editorSuggestWidget.background#14182A
- editorSuggestWidget.foreground#C8CED9
- editorSuggestWidget.highlightForeground#5FEFC4
- editorSuggestWidget.selectedBackground#23344A
- editorSymbolHighlightBackground#3B5A7077
- editorUnicodeHighlight.background#3B586655
- editorUnicodeHighlight.border#FF6E6E
- editorWarning.foreground#FFD56E
- editorWhitespace.background#0A0F1F
- editorWhitespace.foreground#2C2E3E
- editorWidget.background#14182A
- editorWidget.foreground#DCEFFF
- focusBorder#5FEFC4
- input.background#161A2C
- input.border#3A3C4B
- input.foreground#E2F3F1
- input.placeholderForeground#657187
- inputOption.activeBackground#23344A
- inputOption.activeBorder#5FEFC4
- inputOption.activeForeground#E2F3F1
- list.activeSelectionBackground#23344A
- list.activeSelectionForeground#E2F3F1
- list.hoverBackground#2E3B4C
- list.hoverForeground#FFFFFF
- list.inactiveSelectionBackground#1B2534
- list.inactiveSelectionForeground#C8CED9
- merge.currentHeaderBackground#23344A
- merge.incomingHeaderBackground#121728
- minimap.background#0B0E1D
- minimap.errorHighlight#FF6E6E44
- minimap.findMatchHighlight#4F9B8866
- minimap.selectionHighlight#2F4F6F77
- minimap.warningHighlight#FFD56E44
- notification.background#14182A
- notification.foreground#E2F3F1
- panel.background#121728
- panel.border#2F2D3A
- panelTitle.activeBorder#5FEFC4
- panelTitle.activeForeground#B8FAD1
- panelTitle.hoverForeground#E2F3F1
- panelTitle.inactiveForeground#6C7A85
- peekViewEditor.background#0B0E1D
- peekViewResult.background#161A2C
- peekViewTitle.background#161A2C
- scrollbarSlider.activeBackground#5FEFC4
- scrollbarSlider.background#3A3C4B88
- scrollbarSlider.hoverBackground#5FEFC4AA
- sideBar.background#101423
- sideBar.border#262634
- sideBar.foreground#C8CED9
- sideBarSectionHeader.foreground#78DCE8
- sideBarTitle.foreground#78DCE8
- statusBar.background#0A0D1B
- statusBar.debuggingBackground#FF6E6E
- statusBar.debuggingForeground#FFFFFF
- statusBar.foreground#C8CED9
- statusBar.noFolderBackground#101423
- tab.activeBackground#0A0F1F
- tab.activeForeground#E2F3F1
- tab.border#090C1A
- tab.hoverBackground#1C2033
- tab.inactiveBackground#15192C
- tab.inactiveForeground#7A8291
- tab.unfocusedActiveForeground#B6BCCF
- tab.unfocusedHoverBackground#181C2D
- tab.unfocusedInactiveForeground#5E6475
- terminal.ansiBlack#101423
- terminal.ansiBlue#78DCE8
- terminal.ansiBrightBlack#4F5B6E
- terminal.ansiBrightBlue#A5CCFF
- terminal.ansiBrightCyan#8FFFF4
- terminal.ansiBrightGreen#C4FFB4
- terminal.ansiBrightMagenta#D4A8FF
- terminal.ansiBrightRed#FF7A7A
- terminal.ansiBrightWhite#FFFFFF
- terminal.ansiBrightYellow#FFEB9C
- terminal.ansiCyan#5FEFC4
- terminal.ansiGreen#B4FF97
- terminal.ansiMagenta#BE8FFF
- terminal.ansiRed#FF6E6E
- terminal.ansiWhite#E2F3F1
- terminal.ansiYellow#FFD56E
- terminal.background#0A0F1F
- terminal.foreground#C8CED9
- terminalCursor.foreground#5FEFC4
- titleBar.activeBackground#101423
- titleBar.activeForeground#E2F3F1
- titleBar.border#292B3A
- titleBar.inactiveBackground#101423
- titleBar.inactiveForeground#78818F
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| support.type.property-name.json | #A0DFFF | — |
| string.quoted.double.json, string.quoted.single.json, meta.structure.dictionary.json string.quoted.double.json | #A4FFBB | — |
| source.diff | #FFD56E | — |
| markup.list | #A4FFBB | — |
| entity.name.module.js, entity.name.module.ts | #FFD56E | — |
| meta.function | #A4FFBB | — |
| support.variable | #BE8FFF | — |
| meta.import, meta.import.ts, meta.import.js | #78DCE8 | — |
| meta.jsx.children | #B4FF97 | — |
| entity.other.attribute-name.jsx, meta.tag.attributes | #78DCE8 | — |
| storage.type.function.arrow | #78DCE8 | — |
| meta.brace.round, meta.brace.square, meta.brace.curly | #5FEFC4 | — |
| keyword.control.flow | #FF6E6E | bold |
| meta.decorator, meta.decorator punctuation, entity.name.function.decorator | #FFD56E | — |
| meta.enum | #FFD56E | — |
| meta.return-type | #78DCE8 | — |
| meta.arrow | #5FEFC4 | — |
| markup.inserted | #B4FF97 | italic |
| markup.deleted | #FF6E6E | italic |
| markup.inline.raw | #FFD56E | italic |
| markup.underline | #78DCE8 | underline |
| markup.strikethrough | #FF6E6E | strikethrough |
| constant.character.escape | #5FEFC4 | bold |
| meta.annotation | #FFD56E | — |
| meta.type.annotation, meta.type | #BE8FFF | — |
| keyword.other.unit | #FFD56E | — |
| meta.embedded.block | #B4FF97 | — |
| comment, punctuation.definition.comment | #706D87 | italic |
| string, constant.other.symbol | #B4FF97 | — |
| constant.numeric | #FFD56E | bold |
| constant.language.boolean, constant.language | #78DCE8 | bold |
| keyword, storage.type, storage.modifier | #BE8FFF | — |
| keyword.operator | #FFB5E5 | — |
| variable, identifier, variable.language | #E2F3F1 | — |
| entity.name.function, support.function, meta.function-call | #A4FFBB | bold |
| variable.parameter | #FFB5E5 | — |
| entity.name.type, support.type, entity.name.class | #78DCE8 | — |
| punctuation | #9BA3B1 | — |
| invalid, invalid.illegal | #FFFFFF | — |
| markup.heading | #FFD56E | bold |
| markup.bold | #FFB5E5 | bold |
| markup.italic, markup.quote | #A6A9BB | italic |
| entity.name.tag, support.class.component | #78DCE8 | — |
| support.constant, constant.other | #A4FFBB | — |
| meta.object-literal.key | #FFD56E | — |