Martin Dvorak
ff58fdd71d
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.
44 lines
1.7 KiB
TypeScript
44 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { MoonIcon, SunIcon } from "@/components/icons";
|
|
import { haptic } from "@/lib/haptics";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import { useTheme } from "@/lib/theme";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/**
|
|
* 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 ThemeToggle({ className, plain = false }: { className?: string; plain?: boolean }) {
|
|
const { theme, toggle } = useTheme();
|
|
const { t } = useI18n();
|
|
const dark = theme === "dark";
|
|
|
|
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>
|
|
);
|
|
}
|