Martin Dvorak
e56653dae1
Frutiger Aero (Settings -> Theme): a third theme, not a dark/light variant. A sky gradient with a strip of grass, the glacier blobs become clouds, the orbs soap bubbles, glass gets the classic horizon gloss and the buttons a glossy aqua. The light/dark toggles (header, rail, chat header) hide while it is on and the picker says why; the pre-paint script applies the class before first paint and the PWA status bar follows (#3fa3e0). Its muted/frost text is darker than Light's because those labels sit directly on the sky. Contrast, measured on real pixels (tests/contrast.mjs, now covering aero): - The light settings sheet was translucent over a dark scrim, so its muted text measured ~2.8:1. Sheets and dialogs now use --glass-sheet-bg (a more opaque surface), and Light's --text-muted is a touch darker. - Result: 0 below-minimum findings and 0 axe violations across every screen, all three themes, phone and desktop. Also: the suites now seed the cookie notice as already dismissed (they run as a returning user); the regression suite opts out to test the notice itself — the previous deploy failed its gate because the notice blocked a chat chip click. The notice also hides during immersive sessions (overlay-open), so it can never cover a study feed. Version 0.1.8, SW -> freezmo-v54.
109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
"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: "#3fa3e0" } 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";
|
|
|
|
/**
|
|
* 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);
|
|
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 (
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
haptic("toggle");
|
|
toggle();
|
|
}}
|
|
aria-label={dark ? t("common.switchToLight") : t("common.switchToDark")}
|
|
title={dark ? t("common.lightMode") : t("common.darkMode")}
|
|
className={cn(
|
|
// A bordered chip with a press affordance: the bare sun/moon glyph was
|
|
// easy to read as decoration rather than a control. `plain` drops the
|
|
// chip chrome so a header can style the button itself (chat header).
|
|
plain
|
|
? "text-[var(--text-muted)] transition hover:text-[var(--text)] active:scale-95"
|
|
: "touch-target inline-flex size-9 items-center justify-center rounded-full border border-[var(--hairline)] bg-[var(--surface-strong)] text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-[var(--text)] active:scale-95",
|
|
className,
|
|
)}
|
|
>
|
|
<span aria-hidden>{dark ? <SunIcon className="size-5" /> : <MoonIcon className="size-5" />}</span>
|
|
</button>
|
|
);
|
|
}
|