Martin Dvorak
f1c4a89adc
The wallpaper is the one from the mockup: "The S Aesthetic That You Definitely Recognize Frutiger Aero" via WallpaperSafari (https://wallpapersafari.com/w/IlWuz7) — the URL in the request pointed at a different (teal abstract) wallpaper, this is the grass/sky/water one that matches the screenshot. Re-encoded to a 237 kB WebP in public/aero/, used as the scene in aero only (light/dark never download it), and credited in Settings next to the theme picker. The drawn CSS scene (rays, reeds, skyline, caustics) is off over the photo; the ten rising bubbles stay, and the orbs became extra bubbles. Buttons and segments are liquid glass now — translucent, glossed top half, bright rim, backdrop blur — instead of the solid aqua fill. Helper lines that sit straight on the wallpaper (the keyboard tip, the AI note) get a small glass chip: dark text on grass measured 2.5:1. Also carries: the underwater scene + bubbles work, the floating cookie notice, the Czech title (Tvůj mrazák) and the review-suite fix that made the last deploy fail its gate. Contrast: 0 below-minimum findings, 0 axe violations across all three themes. Version 0.2.2, SW -> freezmo-v56.
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useTheme, type Theme } from "@/components/ThemeToggle";
|
|
import { haptic } from "@/lib/haptics";
|
|
import { useI18n } from "@/lib/i18n";
|
|
|
|
const OPTIONS: Array<{ id: Theme; labelKey: string }> = [
|
|
{ id: "light", labelKey: "common.lightMode" },
|
|
{ id: "dark", labelKey: "common.darkMode" },
|
|
{ id: "aero", labelKey: "theme.aero" },
|
|
];
|
|
|
|
/**
|
|
* The theme picker: light, dark, or Frutiger Aero. Aero is not a dark/light
|
|
* variant — it swaps the whole palette and scene — which is why the light/dark
|
|
* toggles (header, rail, chat header) disappear while it is on.
|
|
*/
|
|
export function ThemeSection() {
|
|
const { theme, setTheme } = useTheme();
|
|
const { t } = useI18n();
|
|
|
|
return (
|
|
<section className="mb-4 space-y-3 rounded-2xl border border-[var(--hairline)] bg-[var(--surface-sunken)] p-3">
|
|
<h3 className="text-sm font-semibold text-frost-950 dark:text-frost-50">{t("settings.theme")}</h3>
|
|
<div className="segmented" role="group" aria-label={t("settings.theme")}>
|
|
{OPTIONS.map((option) => (
|
|
<button
|
|
key={option.id}
|
|
type="button"
|
|
aria-pressed={theme === option.id}
|
|
onClick={() => {
|
|
haptic("toggle");
|
|
setTheme(option.id);
|
|
}}
|
|
>
|
|
<span className="seg-label">{t(option.labelKey)}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{theme === "aero" ? (
|
|
<>
|
|
<p className="text-[11px] leading-snug text-[var(--text-subtle)]">{t("theme.aeroNote")}</p>
|
|
<p className="text-[11px] leading-snug text-[var(--text-subtle)]">
|
|
{t("theme.aeroCredit")}{" "}
|
|
<a
|
|
href="https://wallpapersafari.com/w/IlWuz7"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="underline decoration-dotted"
|
|
>
|
|
wallpapersafari.com/w/IlWuz7
|
|
</a>
|
|
</p>
|
|
</>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|