feat(ui): add glass theme with native macOS vibrancy blur-through#8009
Draft
jeffa-block wants to merge 1 commit intoblock:mainfrom
Draft
feat(ui): add glass theme with native macOS vibrancy blur-through#8009jeffa-block wants to merge 1 commit intoblock:mainfrom
jeffa-block wants to merge 1 commit intoblock:mainfrom
Conversation
Adds a 'Glass' theme option alongside Light, Dark, and System. On macOS, Electron's vibrancy: 'window' is already enabled in main.ts — this theme makes the CSS backgrounds semi-transparent so the native NSVisualEffectView blur layer shows through. On other platforms, backdrop-filter provides a CSS-only approximation. Changes: - theme-tokens.ts: add glassColorTokens with rgba() backgrounds - ThemeContext.tsx: extend ThemePreference to include 'glass' - ThemeSelector.tsx: add Glass button (Layers icon) - main.css: glass class with backdrop-filter and sidebar aliases - index.html: handle glass in pre-paint theme initialiser Implements block#8008
Collaborator
|
I don't know. our settings & config is complicated enough as it is. I know @spencrmartin has plans to make colors more configurable, let's wait for that. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a Glass theme option that reveals the native macOS vibrancy blur layer already enabled in
main.ts(vibrancy: 'window').Implements #8008
The key insight
Electron's
vibrancy: 'window'is already set on line 614 ofmain.ts— the nativeNSVisualEffectViewfrosted blur layer is running right now, just hidden behind solid CSS backgrounds. This PR makes those backgrounds semi-transparent so the blur shows through.What changed
theme-tokens.tsglassColorTokens—rgba()backgrounds, opaque text for readabilityThemeContext.tsxThemePreferencetype to include'glass'ThemeSelector.tsxmain.css.glassclass withbackdrop-filter, sidebar aliases, scrollbar stylesindex.htmlglassin pre-paint theme initialiser to prevent flashDesign decisions
rgba(255,255,255,0.1)) — creates subtle frosted-glass panel edgesHardcoded colour audit
The codebase is clean — 343 background usages go through the token system and become transparent automatically. Only 2 hardcoded
bg-[#hex]exist (AlertBox error/warning banners), and those should stay solid.Platform behaviour
vibrancy: 'window'+transparent: truealready settransparent: false, nosetBackgroundMaterial()rgba()backgrounds render against solid window. Readable, just not glassy. Windows Acrylic (setBackgroundMaterial('acrylic')) via Electron 30+ could enable native blur — separate scope.backdrop-filterblurs app content, not desktop. Same as Windows visually.macOS is the full experience. Windows and Linux get a darker, moodier variant of dark mode — functional and readable, just without the desktop showing through. Native blur on those platforms is separate scope with its own platform quirks.
Visual references
vibrancyandsetBackgroundMaterialoptionsScreenshots
Draft PR — screenshots to follow once tested locally.