dvorakmortonxd/freezmo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

New Aero background (Gemini-made), old credit removed

Browse source 
The scene is the user's own Frutiger Aero image now: green hills, a river,
an eco-city, bubbles and daisies. Re-encoded to public/aero/background.webp
(152 kB) with a fresh 3 kB pre-blurred variant for the glass, and the
WallpaperSafari credit line, its i18n keys and the README credit are gone
(the image is made by the user with Gemini).

Contrast: 0 below-minimum findings and 0 axe violations, all three themes.
Version 0.2.8, SW -> freezmo-v60.
This commit is contained in:
Martin Dvořák 2026-10-13 08:10:05 +00:00
commit ff58fdd71d
14 changed files with 151 additions and 102 deletions
Download patch file Download diff file Expand all files Collapse all files

81
components/ThemeToggle.tsx
View file

@ -1,87 +1,22 @@
"use client";
import { useEffect, useState } from "react";
import { useI18n } from "@/lib/i18n";
import { haptic } from "@/lib/haptics";
import { cn } from "@/lib/utils";
import { MoonIcon, SunIcon } from "@/components/icons";
const STORAGE_KEY = "freezmo.theme";
const THEME_COLORS = { light: "#f4f7fd", dark: "#0e1424", aero: "#2fa7e6" } as const;
/** The three themes. Aero is not a dark/light variant: it replaces the palette
* and the scene, and the light/dark toggles hide while it is on. */
export type Theme = "light" | "dark" | "aero";
import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { useTheme } from "@/lib/theme";
import { cn } from "@/lib/utils";
/**
* Keeps the first `theme-color` meta (the one the app owns) in step with the
* in-app theme. The SSR metas follow the OS preference; this one always wins
* because it is media-less and first in the head.
* The light/dark flip. Frutiger Aero has no such switch (the theme picker in
* Settings owns it), so this renders nothing while aero is on — the state
* comes from the shared store in lib/theme, so a change in Settings hides
* this immediately.
*/
export function syncThemeColor(theme: Theme) {
try {
let meta = document.querySelector<HTMLMetaElement>('meta[name="theme-color"][data-app]');
if (!meta) {
meta = document.createElement("meta");
meta.setAttribute("name", "theme-color");
meta.setAttribute("data-app", "1");
document.head.insertBefore(meta, document.head.firstChild);
}
meta.setAttribute("content", THEME_COLORS[theme]);
} catch {
/* private mode / odd embedded browsers */
}
}
export function applyTheme(next: Theme) {
document.documentElement.classList.toggle("dark", next === "dark");
document.documentElement.classList.toggle("aero", next === "aero");
syncThemeColor(next);
try {
window.localStorage.setItem(STORAGE_KEY, next);
} catch {
/* private mode */
}
}
export function useTheme() {
const [theme, setTheme] = useState<Theme>("light");
useEffect(() => {
const stored = window.localStorage.getItem(STORAGE_KEY);
const next: Theme =
stored === "dark" || stored === "aero"
? stored
: stored === "light"
? "light"
: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
setTheme(next);
syncThemeColor(next);
}, []);
const apply = (next: Theme) => {
setTheme(next);
applyTheme(next);
};
return {
theme,
setTheme: apply,
/** The light/dark flip; aero is chosen in Settings. */
toggle: () => apply(theme === "dark" ? "light" : "dark"),
};
}
export function ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
const { theme, toggle } = useTheme();
const { t } = useI18n();
const dark = theme === "dark";
// Frutiger Aero has no light/dark switch (see the theme picker in Settings).
if (theme === "aero") return null;
return (