diff --git a/static/theme.ts b/static/theme.ts
index c896fee..ecff721 100644
--- a/static/theme.ts
+++ b/static/theme.ts
@@ -1,74 +1,84 @@
-type Theme = 'light' | 'dark'
+type Theme = "light" | "dark";
-const STORAGE_KEY = 'theme'
+const STORAGE_KEY = "theme";
const getSavedTheme = (): Theme => {
- const raw = localStorage.getItem(STORAGE_KEY)
- if (raw === 'light' || raw === 'dark') return raw
- return 'dark'
-}
+ const raw = localStorage.getItem(STORAGE_KEY);
+ if (raw === "light" || raw === "dark") return raw;
+ return "dark";
+};
const applyTheme = (theme: Theme): void => {
- const html = document.documentElement
- html.setAttribute('data-theme', theme)
- localStorage.setItem(STORAGE_KEY, theme)
- updateToggleButtons(theme)
- }
+ const html = document.documentElement;
+ html.setAttribute("data-theme", theme);
+ localStorage.setItem(STORAGE_KEY, theme);
+ updateToggleButtons(theme);
+};
const cycleTheme = (): void => {
- const current = getSavedTheme()
- const next: Theme = current === 'light' ? 'dark' : 'light'
- applyTheme(next)
-}
+ const current = getSavedTheme();
+ const next: Theme = current === "light" ? "dark" : "light";
+ applyTheme(next);
+};
const updateToggleButtons = (theme: Theme): void => {
- const headerBtn = document.getElementById('theme-toggle')
- const footerBtn = document.getElementById('footer-theme-toggle')
-
- const updateButton = (btn: HTMLButtonElement | null): void => {
- if (!btn) return
+ const headerBtn = document.getElementById(
+ "theme-toggle",
+ ) as HTMLButtonElement | null;
+ const footerBtn = document.getElementById(
+ "footer-theme-toggle",
+ ) as HTMLButtonElement | null;
- const label = btn.querySelector('[data-theme-label]') as HTMLElement | null
- if (label) {
- label.textContent = theme
- }
+ const updateButton = (btn: HTMLButtonElement | null): void => {
+ if (!btn) return;
- const svg = btn.querySelector('svg')
- if (!svg) return
+ const label = btn.querySelector("[data-theme-label]") as HTMLElement | null;
+ if (label) {
+ label.textContent = theme;
+ }
- if (theme === 'light') {
- svg.innerHTML = ''
- svg.setAttribute('stroke', 'currentColor')
- svg.setAttribute('fill', 'none')
- } else {
- svg.innerHTML = ''
- svg.setAttribute('stroke', 'currentColor')
- svg.setAttribute('fill', 'none')
- }
- }
+ const svg = btn.querySelector("svg");
+ if (!svg) return;
- updateButton(headerBtn)
- updateButton(footerBtn)
- }
+ if (theme === "light") {
+ svg.innerHTML =
+ '';
+ svg.setAttribute("stroke", "currentColor");
+ svg.setAttribute("fill", "none");
+ } else {
+ svg.innerHTML =
+ '';
+ svg.setAttribute("stroke", "currentColor");
+ svg.setAttribute("fill", "none");
+ }
+ };
- const initTheme = (): void => {
- const saved = getSavedTheme()
- applyTheme(saved)
+ updateButton(headerBtn);
+ updateButton(footerBtn);
+};
- const headerBtn = document.getElementById('theme-toggle')
- const footerBtn = document.getElementById('footer-theme-toggle')
-
- if (headerBtn) {
- headerBtn.addEventListener('click', cycleTheme)
- }
-
- if (footerBtn) {
- footerBtn.addEventListener('click', cycleTheme)
- }
- }
+const initTheme = (): void => {
+ const saved = getSavedTheme();
+ applyTheme(saved);
-if (document.readyState === 'loading') {
- document.addEventListener('DOMContentLoaded', initTheme)
+ const headerBtn = document.getElementById(
+ "theme-toggle",
+ ) as HTMLButtonElement | null;
+ const footerBtn = document.getElementById(
+ "footer-theme-toggle",
+ ) as HTMLButtonElement | null;
+
+ if (headerBtn) {
+ headerBtn.addEventListener("click", cycleTheme);
+ }
+
+ if (footerBtn) {
+ footerBtn.addEventListener("click", cycleTheme);
+ }
+};
+
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", initTheme);
} else {
- initTheme()
+ initTheme();
}