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

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

View file

@ -11,7 +11,7 @@
import { z } from "zod";
import { applyTheme } from "@/components/ThemeToggle";
import { applyTheme } from "./theme";
import { chatHistoryStore, ensureChatsHydrated, replaceChats } from "./chat-store";
import { replaceFolders, folderStore } from "./folders";
import { homeworkStore, replaceHomework } from "./homework";

View file

@ -1004,7 +1004,6 @@ const en: Record<string, string> = {
"settings.theme": "Theme",
"theme.aero": "Frutiger Aero",
"theme.aeroNote": "Aero has no light/dark switch — pick Light or Dark to get it back.",
"theme.aeroCredit": "Background: “The S Aesthetic That You Definitely Recognize Frutiger Aero” via WallpaperSafari.",
"settings.legal": "Legal",
"consent.title": "About cookies",
"consent.body": "Freezmo uses no cookies and no trackers — your decks, homework and settings stay in this browser.",
@ -1960,7 +1959,6 @@ const cs: Record<string, string> = {
"settings.theme": "Téma",
"theme.aero": "Frutiger Aero",
"theme.aeroNote": "Aero nemá přepínač světlý/tmavý — vyber Světlý nebo Tmavý, pokud ho chceš zpět.",
"theme.aeroCredit": "Pozadí: „The S Aesthetic That You Definitely Recognize Frutiger Aero“ přes WallpaperSafari.",
"settings.legal": "Právní informace",
"consent.title": "O cookies",
"consent.body": "Freezmo nepoužívá cookies ani sledování — sady, úkoly a nastavení zůstávají v tomto prohlížeči.",

92
lib/theme.ts Normal file
View file

@ -0,0 +1,92 @@
"use client";
import { useSyncExternalStore } from "react";
/**
* The theme, as a shared store. It used to be component state inside
* `useTheme()`, which meant every caller (header, rail, chat, Settings) had
* its own copy: switching to Aero in Settings left the rail's light/dark row
* on screen until a reload. One store, one snapshot, everyone re-renders.
*/
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";
let cached: Theme | null = null;
const listeners = new Set<() => void>();
function read(): Theme {
try {
const stored = window.localStorage.getItem(STORAGE_KEY);
if (stored === "light" || stored === "dark" || stored === "aero") return stored;
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
} catch {
/* private mode */
return "light";
}
}
function snapshot(): Theme {
cached ??= read();
return cached;
}
function serverSnapshot(): Theme {
return "light";
}
/**
* 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.
*/
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);
cached = next;
try {
window.localStorage.setItem(STORAGE_KEY, next);
} catch {
/* private mode */
}
listeners.forEach((listener) => listener());
}
export function useTheme() {
const theme = useSyncExternalStore(
(listener) => {
listeners.add(listener);
return () => listeners.delete(listener);
},
snapshot,
serverSnapshot,
);
return {
theme,
setTheme: applyTheme,
/** The light/dark flip; aero is chosen in Settings. */
toggle: () => applyTheme(theme === "dark" ? "light" : "dark"),
};
}