From 081c2bffb329182d92cf0534dd42b11826a87c39 Mon Sep 17 00:00:00 2001
From: memdmp <memdmp@estrogen.zone>
Date: Wed, 28 Jan 2026 01:06:31 +0100
Subject: feat: more theme work

---
 src/lib/blog/Post.svelte | 16 ++++++++++++----
 src/lib/storage.ts       |  1 +
 src/lib/theme.svelte.ts  | 49 ++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/theme.svelte.ts

(limited to 'src/lib')

diff --git a/src/lib/blog/Post.svelte b/src/lib/blog/Post.svelte
index 9fcc319..05afa78 100644
--- a/src/lib/blog/Post.svelte
+++ b/src/lib/blog/Post.svelte
@@ -5,6 +5,7 @@
 <script lang="ts">
   import { building, dev } from '$app/environment';
   import { page } from '$app/state';
+  import theme from '../theme.svelte';
 
   import { parsePostMetadata, type Post } from './Post';
 
@@ -43,9 +44,8 @@
     </p>
     {#if !ignorePublishedStatus && dev}
       <p class="mt-1 5">
-        <a
-          href={new URL('?ignore-unpublished=+', page.url).href}
-          class="quicklink">Ignore and read anyway</a
+        <a href="?ignore-unpublished" class="quicklink"
+          >Ignore and read anyway</a
         >
       </p>
     {:else if ignorePublishedStatus}
@@ -73,7 +73,15 @@
           class="quicklink"
           target="_blank"
           rel="noopener noreferrer">src</a
-        >{/if}<span class="select-none">▒</span>ctime: {meta.created
+        >{/if}<span class="select-none">▒</span><a
+        href="?theme={theme.opposite}"
+        class="quicklink theme-selector"
+        onclick={(e) => {
+          theme.flip();
+          e.currentTarget.blur();
+          e.preventDefault();
+        }}>toggle theme</a
+      ><span class="select-none theme-selector">▒</span>ctime: {meta.created
         .toISOString()
         .split('T')[0]}<span class="select-none">▒</span>mtime: {meta.updated
         .toISOString()
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index 0a5334d..48eef3c 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -5,3 +5,4 @@ export const sessionStorage = new StorageManager('session', 'mem.estrogen.zone:'
 export const memoryStorage = new StorageManager('memory', 'mem.estrogen.zone:');
 
 export const blogStorage = new StorageManager(localStorage, 'blog:');
+export const themeStorage = new StorageManager(localStorage, 'theme:');
diff --git a/src/lib/theme.svelte.ts b/src/lib/theme.svelte.ts
new file mode 100644
index 0000000..956738b
--- /dev/null
+++ b/src/lib/theme.svelte.ts
@@ -0,0 +1,49 @@
+import { onDestroy, onMount } from 'svelte';
+import { themeStorage } from './storage';
+import { page } from '$app/state';
+
+export enum Theme {
+  Light = 'light',
+  Dark = 'dark',
+}
+const oppositeThemeMappings: Record<Theme, Theme> = {
+  [Theme.Light]: Theme.Dark,
+  [Theme.Dark]: Theme.Light
+};
+export class CTheme {
+  public rawTheme = $state(null as null | Theme);
+  public theme = $derived(this.rawTheme ?? Theme.Dark);
+  public opposite = $derived(oppositeThemeMappings[this.theme]);
+  /**
+   * Marks the page a component renders on as fully compatible/tested with theming.
+   * 
+   * Call during component init.
+   */
+  public themeCompatible() {
+    onMount(() => {
+      const t =
+        page.url.searchParams.get('theme') ?? themeStorage.getItem('theme');
+      if (theme.isThemeValid(t)) theme.set(t);
+    });
+    $effect(() => {
+      document.documentElement.setAttribute('data-blog-theme', theme.theme);
+      page.url.searchParams.delete('theme');
+    });
+    onDestroy(() => {
+      if (typeof document !== 'undefined')
+        document.documentElement.removeAttribute('data-blog-theme');
+    });
+  }
+  public isThemeValid(theme: string | null): theme is Theme {
+    return Object.values(Theme).includes(theme as unknown as Theme);
+  }
+  public set(theme: Theme) {
+    themeStorage.setItem('theme', theme);
+    this.theme = theme;
+  }
+  public flip() {
+    this.set(this.opposite);
+  }
+};
+export const theme = new CTheme();
+export default theme;
-- 
cgit v1.2.3