Summary
Evolve Gitify's theming from "pick a color scheme" into "pick a design language". Today a theme is only a set of colors (the Theme enum is 8 color-scheme values) and the UI is welded to GitHub's Primer design system, so a theme can never change typography, spacing, chrome, or materials. This proposes a pluggable design-language architecture where the current Primer look is preserved as Classic, and a new cross-platform Glass language ships as the first alternative, with a real macOS glassmorphism / native feel.
Motivation
This came after I rebuilt Gitify's interface via Glaze and was really happy with the visual result, a translucent, macOS-native "glass" look:
That prototype proved the aesthetic is both desirable and achievable, but it lives outside the app. Nothing in the current architecture lets that look ship as a first-class, selectable theme, and bolting it on as a one-off would leave the same "welded to Primer" problem in place for any future look.
Proposal
A "design language" becomes a first-class concept, distinct from color mode, carrying typography, spacing, radius, shadow, and material/translucency, not just color.
Delivery in two phases:
- Invisible refactor — introduce an app-owned primitive layer (Surface, Button, Text, Stack, Input, etc.) so the renderer stops importing
@primer/react directly; a design language supplies the implementation (Primer backs Classic). Classic must render pixel-identical (regression bar = "no visible change"), and the primitive layer must preserve Primer's accessibility/behavior (focus, ARIA, keyboard for overlays/menus/selects/popovers/tooltips).
- Glass theme (additive) — a cross-platform Glass language using CSS
backdrop-filter, upgrading to real Electron window vibrancy on macOS. Glass offers light/dark/system and gracefully degrades to solid, legible surfaces under Reduce Transparency / Increase Contrast.
Key decisions
- Pluggable design-language architecture over a one-off skin.
- Cross-platform CSS glass, with a native
vibrancy upgrade on macOS. Per-OS native themes (Windows Mica/Fluent, Linux) are a later chapter.
- Each design language owns its color modes; accessibility for Glass is via graceful degradation, not bespoke colorblind/tritanopia glass palettes.
- App-owned primitive layer with the implementation swapped per language (chosen so future themes don't require another app-wide migration).
- Classic stays the default; existing
theme + increaseContrast settings migrate silently so nothing changes on upgrade.
Non-goals (for now)
- Per-OS native design languages (Windows Mica/Fluent, Linux flat).
- User-authored / custom themes or a theme marketplace.
- Any change to Classic's appearance or to the notification data model / feature set.
Notes
- Electron fixes
transparent at window creation, so switching into Glass may need a window recreate or "relaunch to apply" rather than an instant in-place swap.
- A full requirements doc (actors, flows, requirements with IDs, acceptance examples) is being tracked alongside this work.
Summary
Evolve Gitify's theming from "pick a color scheme" into "pick a design language". Today a theme is only a set of colors (the
Themeenum is 8 color-scheme values) and the UI is welded to GitHub's Primer design system, so a theme can never change typography, spacing, chrome, or materials. This proposes a pluggable design-language architecture where the current Primer look is preserved as Classic, and a new cross-platform Glass language ships as the first alternative, with a real macOS glassmorphism / native feel.Motivation
This came after I rebuilt Gitify's interface via Glaze and was really happy with the visual result, a translucent, macOS-native "glass" look:
That prototype proved the aesthetic is both desirable and achievable, but it lives outside the app. Nothing in the current architecture lets that look ship as a first-class, selectable theme, and bolting it on as a one-off would leave the same "welded to Primer" problem in place for any future look.
Proposal
A "design language" becomes a first-class concept, distinct from color mode, carrying typography, spacing, radius, shadow, and material/translucency, not just color.
Delivery in two phases:
@primer/reactdirectly; a design language supplies the implementation (Primer backs Classic). Classic must render pixel-identical (regression bar = "no visible change"), and the primitive layer must preserve Primer's accessibility/behavior (focus, ARIA, keyboard for overlays/menus/selects/popovers/tooltips).backdrop-filter, upgrading to real Electron windowvibrancyon macOS. Glass offers light/dark/system and gracefully degrades to solid, legible surfaces under Reduce Transparency / Increase Contrast.Key decisions
vibrancyupgrade on macOS. Per-OS native themes (Windows Mica/Fluent, Linux) are a later chapter.theme+increaseContrastsettings migrate silently so nothing changes on upgrade.Non-goals (for now)
Notes
transparentat window creation, so switching into Glass may need a window recreate or "relaunch to apply" rather than an instant in-place swap.