apps/frontend/src/theme/themes.ts

@@ -87,8 +87,24 @@ export function getWebTheme(theme: Theme): WebTheme {
     return webThemes.find((webTheme) => webTheme.id === theme.id) ?? walnut;
 }
 
+// Puts the theme's class on <html> and remembers the theme for the login pages.
 export function applyThemeClass(theme: Theme) {
     const root = document.documentElement;
     webThemes.forEach((webTheme) => root.classList.remove(webTheme.className));
     root.classList.add(getWebTheme(theme).className);
+    saveThemeCookie(theme);
+}
+
+const THEME_COOKIE = "mancala_theme";
+const COOKIE_MAX_AGE_SECONDS = 365 * 24 * 60 * 60;
+
+// The Keycloak login pages are on another origin and read the theme from this cookie (docs/specs/theme-polish).
+// On localhost a host-only cookie reaches every port; on a domain the cookie is set for its last two labels, so
+// playmancala.app shares it with auth.playmancala.app.
+export function saveThemeCookie(theme: Theme) {
+    const { hostname, protocol } = window.location;
+    const isDomain = hostname.includes(".") && !/^[\d.]+$/.test(hostname);
+    const domain = isDomain ? `; domain=${hostname.split(".").slice(-2).join(".")}` : "";
+    const secure = protocol === "https:" ? "; Secure" : "";
+    document.cookie = `${THEME_COOKIE}=${getWebTheme(theme).id}; path=/; max-age=${COOKIE_MAX_AGE_SECONDS}; SameSite=Lax${domain}${secure}`;
 }

docs/specs/theme-polish/tasks.md

@@ -4,7 +4,7 @@ Work through the tasks in order; each ends with its checks passing and a commit.
 
 - [x] 1. **Spec**: requirements, design and tasks.
 - [x] 2. **Web app messages**: Notyf at the top centre in the theme's colors.
-- [ ] 3. **Theme cookie**: the web app saves the chosen theme for the login pages.
+- [x] 3. **Theme cookie**: the web app saves the chosen theme for the login pages.
 - [ ] 4. **Login theme**: the script, the three themes' styles, logo and board masks; checked in Chrome in all three
       themes, at desktop and phone width, with and without the cookie.
 - [ ] 5. **Docs**: `AGENTS.md` (specs list, the cookie), `apps/keycloak/README.md`, `TODO.md`.