ik/rf4-spotter
1
0
Fork 0
Code Issues Pull Requests Actions 9 Packages Projects Releases Wiki Activity

feat: add persistent theme switcher

Browse Source
This commit is contained in:
ik
2026-09-13 15:40:44 +07:00
parent 8ffbd7f9ec
commit 35b00d7fd6
5 changed files with 82 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/layouts/Layout.astro
+31 -2
View File
@@ -25,6 +25,8 @@ const {
errorPage = false,
} = Astro.props;
const path = Astro.url.pathname;
const storedTheme = Astro.cookies.get("rf4-theme")?.value;
const theme = storedTheme === "light" || storedTheme === "dark" ? storedTheme : "system";
const siteUrl = import.meta.env.PUBLIC_SITE_URL || "https://rf4spotter.ru";
const canonical = new URL(path, siteUrl).toString();
const socialImage = new URL(image, siteUrl).toString();
@@ -39,7 +41,7 @@ const jsonLd = JSON.stringify({
}).replaceAll("<", "\\u003c");
---
<!doctype html>
<html lang="ru">
<html lang="ru" data-theme={theme === "system" ? undefined : theme}>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
@@ -75,10 +77,37 @@ const jsonLd = JSON.stringify({
<header class="topbar">
<a href="/" class="brand"><span class="brand-mark" aria-hidden="true"><FishingIcon name="hook" size={24}/></span><span class="brand-name"><strong>RF4 Spotter</strong><span>Ни хвоста, ни чешуи</span></span></a>
<nav aria-label="Разделы сайта"><a class:list={{active:path === "/"}} aria-current={path === "/" ? "page" : undefined} href="/"><FishingIcon name="float"/> <span>Сейчас клюёт</span></a><a class:list={{active:path.startsWith("/waterbodies") || path.startsWith("/fish")}} aria-current={path.startsWith("/waterbodies") || path.startsWith("/fish") ? "page" : undefined} href="/waterbodies"><FishingIcon name="ripple"/> <span>Каталог</span></a><a class:list={{active:path.startsWith("/records")}} aria-current={path.startsWith("/records") ? "page" : undefined} href="/records"><FishingIcon name="trophy"/> <span>Рекорды</span></a><a class:list={{active:path.startsWith("/report")}} aria-current={path.startsWith("/report") ? "page" : undefined} href="/report"><FishingIcon name="plus"/> <span>Добавить улов</span></a></nav>
<p class="live-badge"><span></span> Свежие данные и честная оценка</p>
<div class="header-tools">
<p class="live-badge"><span></span> Свежие данные и честная оценка</p>
<div class="theme-switcher" role="group" aria-label="Цветовая тема">
<button type="button" data-theme-option="system" aria-pressed={theme === "system"} title="Использовать системную тему"><span aria-hidden="true">◐</span><b>Системная</b></button>
<button type="button" data-theme-option="light" aria-pressed={theme === "light"} title="Включить светлую тему"><span aria-hidden="true">☀</span><b>Светлая</b></button>
<button type="button" data-theme-option="dark" aria-pressed={theme === "dark"} title="Включить тёмную тему"><span aria-hidden="true">●</span><b>Тёмная</b></button>
</div>
</div>
</header>
<AlphaBanner />
<main id="main-content" tabindex="-1"><slot /></main>
<footer><a href="/" class="brand"><span class="brand-mark" aria-hidden="true"><FishingIcon name="hook" size={24}/></span><span class="brand-name"><strong>RF4 Spotter</strong><span>Ни хвоста, ни чешуи</span></span></a><p>Неофициальный проект для игроков Russian Fishing 4. <a href="/status">Статус</a> · <a href="/rules">Правила</a> · <a href="/privacy">Конфиденциальность</a></p><span>RF4S · 2026</span></footer>
</body>
</html>
<script>
const root = document.documentElement;
const themeButtons = document.querySelectorAll<HTMLButtonElement>("[data-theme-option]");
const allowedThemes = new Set(["system", "light", "dark"]);
const applyTheme = (value: string) => {
const theme = allowedThemes.has(value) ? value : "system";
if (theme === "system") delete root.dataset.theme;
else root.dataset.theme = theme;
themeButtons.forEach((button) => {
button.setAttribute("aria-pressed", String(button.dataset.themeOption === theme));
});
const secure = location.protocol === "https:" ? "; Secure" : "";
document.cookie = `rf4-theme=${theme}; Max-Age=31536000; Path=/; SameSite=Lax${secure}`;
};
themeButtons.forEach((button) => {
button.addEventListener("click", () => applyTheme(button.dataset.themeOption ?? "system"));
});
</script>