feat(themes): add follow-system mode to the theme scheduler (#1163)

* feat(themes): add follow-system mode to the theme scheduler

The theme scheduler can now switch the day/night theme pair by the OS
light/dark preference instead of a clock schedule. A segmented control
picks the trigger; in system mode the time inputs are hidden and the two
theme pickers read as Light/Dark.

The OS theme is read via the native Tauri window theme API (theme() +
onThemeChanged) rather than the Web prefers-color-scheme media query,
which is unreliable through WebKitGTK on Linux. Live updates land
instantly where the platform forwards them; on Linux setups that don't,
a hint notes the change applies after an app restart.

* docs(changelog): add follow-system theme mode entry (#1163)

CHANGELOG Added entry, contributor credit and What's New highlight for the
theme scheduler's new system-theme mode.
This commit is contained in:
Psychotoxical
2026-06-23 12:13:26 +02:00
committed by GitHub
parent 78a177b1bc
commit c7d76af790
20 changed files with 356 additions and 51 deletions
+17 -8
View File
@@ -69,14 +69,23 @@ export function applyThemeAtStartup(): void {
const s = parsed.state;
if (!s) return;
syncInjectedThemes(readInstalledThemes());
const effective = getScheduledTheme({
enableThemeScheduler: !!s.enableThemeScheduler,
theme: String(s.theme ?? 'mocha'),
themeDay: String(s.themeDay ?? 'latte'),
themeNight: String(s.themeNight ?? 'mocha'),
timeDayStart: String(s.timeDayStart ?? '07:00'),
timeNightStart: String(s.timeNightStart ?? '19:00'),
});
// First-frame best effort for the "follow system" mode: the Web media query
// is sync here (the native Tauri theme resolves only after mount, when the
// App effect re-applies the effective theme). Unreliable on Linux WebKitGTK,
// but only affects this initial paint before the effect corrects it.
const systemPrefersDark = window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
const effective = getScheduledTheme(
{
enableThemeScheduler: !!s.enableThemeScheduler,
schedulerMode: s.schedulerMode === 'system' ? 'system' : 'time',
theme: String(s.theme ?? 'mocha'),
themeDay: String(s.themeDay ?? 'latte'),
themeNight: String(s.themeNight ?? 'mocha'),
timeDayStart: String(s.timeDayStart ?? '07:00'),
timeNightStart: String(s.timeNightStart ?? '19:00'),
},
systemPrefersDark,
);
if (effective) document.documentElement.setAttribute('data-theme', effective);
} catch {
// Non-fatal — App's effects apply the theme after mount.