rework to 2000's-ish style site

app/composables/useBgTheme.ts

@@ -0,0 +1,41 @@
+import {
+    BG_THEMES,
+    BG_THEME_STORAGE_KEY,
+    DEFAULT_BG_THEME,
+    isBgThemeId,
+    type BgThemeId,
+} from '~/utils/themes';
+
+export function useBgTheme() {
+    const id = useState<BgThemeId>('bg-theme', () => DEFAULT_BG_THEME);
+    const colorMode = useColorMode();
+
+    const current = computed(
+        () => BG_THEMES.find((theme) => theme.id === id.value) ?? BG_THEMES[0],
+    );
+
+    const applyClass = (next: BgThemeId) => {
+        if (!import.meta.client) return;
+        for (const theme of BG_THEMES) {
+            document.documentElement.classList.remove(`theme-${theme.id}`);
+        }
+        document.documentElement.classList.add(`theme-${next}`);
+        colorMode.preference = next === 'paper' ? 'light' : 'dark';
+    };
+
+    const setTheme = (next: BgThemeId) => {
+        id.value = next;
+        applyClass(next);
+        if (import.meta.client) {
+            localStorage.setItem(BG_THEME_STORAGE_KEY, next);
+        }
+    };
+
+    onMounted(() => {
+        const saved = localStorage.getItem(BG_THEME_STORAGE_KEY);
+        const next = isBgThemeId(saved) ? saved : id.value;
+        setTheme(next);
+    });
+
+    return { id, current, setTheme, themes: BG_THEMES };
+}

app/composables/useBodyFont.ts

@@ -0,0 +1,35 @@
+import {
+    BODY_FONTS,
+    BODY_FONT_STORAGE_KEY,
+    DEFAULT_BODY_FONT,
+    isBodyFontId,
+    type BodyFontId,
+} from '~/utils/fonts';
+
+export function useBodyFont() {
+    const id = useState<BodyFontId>('body-font', () => DEFAULT_BODY_FONT);
+
+    const applyClass = (next: BodyFontId) => {
+        if (!import.meta.client) return;
+        for (const font of BODY_FONTS) {
+            document.documentElement.classList.remove(`font-${font.id}`);
+        }
+        document.documentElement.classList.add(`font-${next}`);
+    };
+
+    const setFont = (next: BodyFontId) => {
+        id.value = next;
+        applyClass(next);
+        if (import.meta.client) {
+            localStorage.setItem(BODY_FONT_STORAGE_KEY, next);
+        }
+    };
+
+    onMounted(() => {
+        const saved = localStorage.getItem(BODY_FONT_STORAGE_KEY);
+        const next = isBodyFontId(saved) ? saved : id.value;
+        setFont(next);
+    });
+
+    return { id, setFont, fonts: BODY_FONTS };
+}