Glass theme in the style of Apple's Liquid Glass #43

New Issue

rays · 2026-09-19T13:20:07-07:00

rays commented

2026-09-19 13:20:07 -07:00

A new theme, glass, in light and dark, with frosted translucent panels like Apple's Liquid Glass: backdrop-filter blur and saturate on the sidebar, topbar, player, dialogs, toasts, tabs and button groups, a thin bright edge, and a soft coloured gradient behind them.

Plan:

web/src/theme.ts: add glass to THEMES (modes: true). The server already accepts any short theme name (src/web.rs:362).
web/app.css: palette blocks for dark and light, in solid hex so tests/contrast.js still checks them; a Glass chrome section after Classic's, all under :root[data-theme="glass"].
Fall back to solid panels under prefers-reduced-transparency and prefers-contrast: more.
-webkit-backdrop-filter as well, for older Safari.

Left out: SVG feDisplacementMap refraction. It works only in Chromium and only on fixed-size shapes, so Safari and iOS would never show it.

References: https://kube.io/blog/liquid-glass-css-svg/ , https://github.com/nikdelvin/liquid-glass

A new theme, glass, in light and dark, with frosted translucent panels like Apple's Liquid Glass: backdrop-filter blur and saturate on the sidebar, topbar, player, dialogs, toasts, tabs and button groups, a thin bright edge, and a soft coloured gradient behind them. Plan: - web/src/theme.ts: add glass to THEMES (modes: true). The server already accepts any short theme name (src/web.rs:362). - web/app.css: palette blocks for dark and light, in solid hex so tests/contrast.js still checks them; a Glass chrome section after Classic's, all under :root[data-theme="glass"]. - Fall back to solid panels under prefers-reduced-transparency and prefers-contrast: more. - -webkit-backdrop-filter as well, for older Safari. Left out: SVG feDisplacementMap refraction. It works only in Chromium and only on fixed-size shapes, so Safari and iOS would never show it. References: https://kube.io/blog/liquid-glass-css-svg/ , https://github.com/nikdelvin/liquid-glass

rays added the enhancement label 2026-09-19 13:20:07 -07:00

rays referenced this issue

2026-09-19 13:28:25 -07:00

Browser test 'an export from one account imports into another' is flaky #44

rays referenced this issue from a commit

2026-09-19 13:45:04 -07:00

Glass theme, after Apple's Liquid Glass (#43)

rays commented

2026-09-19 13:46:22 -07:00

Done in ad15ae3: a Glass theme, light and dark, with translucent blurred panels over a soft coloured wash, and frosted sticky headers over the episode list. It goes solid when the system asks for less transparency or more contrast. tests/contrast.js now samples the wash, so text over it is held to AA. Refraction was left out, as planned. Deployed to Tower on 2026-09-19.

Done in ad15ae3: a Glass theme, light and dark, with translucent blurred panels over a soft coloured wash, and frosted sticky headers over the episode list. It goes solid when the system asks for less transparency or more contrast. tests/contrast.js now samples the wash, so text over it is held to AA. Refraction was left out, as planned. Deployed to Tower on 2026-09-19.

rays closed this issue

2026-09-19 13:46:22 -07:00

rays referenced this issue from a commit

2026-09-19 16:29:12 -07:00

Release 0.8.4

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: rays/ipodderx-rs#43