jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): remember the theme in a cookie for the login pages

Browse Source 
Keycloak's pages are on another origin; a mancala_theme cookie reaches
them on localhost's ports and, set for playmancala.app, on its auth
subdomain.
This commit is contained in:
Halit Aksoy 2026-10-17 02:40:07 +03:00
parent dfdb4b057c
commit 64149320ac
2 changed files with 17 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/frontend/src/theme/themes.ts
View File

@ -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}`;
}

2
docs/specs/theme-polish/tasks.md
View File

@ -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`.