Skip to content

feat(ui): add glass theme with native macOS vibrancy blur-through#8009

Draft
jeffa-block wants to merge 1 commit intoblock:mainfrom
jeffa-block:feat/glass-theme
Draft

feat(ui): add glass theme with native macOS vibrancy blur-through#8009
jeffa-block wants to merge 1 commit intoblock:mainfrom
jeffa-block:feat/glass-theme

Conversation

@jeffa-block
Copy link
Contributor

@jeffa-block jeffa-block commented Mar 19, 2026

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 of main.ts — the native NSVisualEffectView frosted 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

File Change
theme-tokens.ts New glassColorTokensrgba() backgrounds, opaque text for readability
ThemeContext.tsx Extended ThemePreference type to include 'glass'
ThemeSelector.tsx Added Glass button (Layers icon from lucide)
main.css .glass class with backdrop-filter, sidebar aliases, scrollbar styles
index.html Handle glass in pre-paint theme initialiser to prevent flash

Design decisions

  • Glass uses dark-mode text conventions — white text on translucent dark backgrounds reads well against any desktop wallpaper
  • Borders are semi-transparent white (rgba(255,255,255,0.1)) — creates subtle frosted-glass panel edges
  • Text stays fully opaque — readability over aesthetics
  • No new Electron config — the native vibrancy was already there

Hardcoded 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

Platform Glass theme result Native blur Notes
macOS ✅ Full frosted glass vibrancy: 'window' + transparent: true already set NSVisualEffectView — every Mac that runs Goose supports this
Windows Dark translucent, no desktop blur transparent: false, no setBackgroundMaterial() rgba() backgrounds render against solid window. Readable, just not glassy. Windows Acrylic (setBackgroundMaterial('acrylic')) via Electron 30+ could enable native blur — separate scope.
Linux Dark translucent, CSS blur only No native vibrancy backdrop-filter blurs 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

Screenshots

Draft PR — screenshots to follow once tested locally.

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
@DOsinga
Copy link
Collaborator

DOsinga commented Mar 19, 2026

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants