@import url("/assets/md.css")todo: themes

@import url("/assets/md.css")

2 files changed, 34 insertions, 1 deletions

diff --git a/src/app.css b/src/app.css
index 38fee04..eded38e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -24,7 +24,7 @@
     'PxPlus IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
   --font-genericmono:
     'JetBrainsMono NF', 'Jetbrains Mono', 'JetBrains Mono', monospace;
-  --color-formatted-table-border: var(--color-neutral-900);
+  --color-formatted-table-border: var(--color-neutral-800);
   --color-formatted-table-background: var(--color-neutral-950);
   --color-codeblock-border: var(--color-neutral-900);
   --color-codeblock-background: var(--color-neutral-950);
@@ -213,6 +213,13 @@
 }
 
 /*
+  A Blog Sepia, very TODO
+*/
+[data-blog-theme=sepia] {
+  @apply bg-[#2b261e];
+}
+
+/*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still
   looks the same as it did with Tailwind CSS v3.
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte
new file mode 100644
index 0000000..1006fdd
--- /dev/null
+++ b/src/routes/blog/+layout.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { onDestroy, onMount, type Snippet } from 'svelte';
+
+  const {
+    children,
+  }: {
+    children: Snippet;
+  } = $props();
+
+  onMount(() => {
+    const theme =
+      page.url.searchParams.get('theme') ??
+      localStorage.getItem('mem.estrogen.zone:blog:theme');
+    if (theme) {
+      localStorage.setItem('mem.estrogen.zone:blog:theme', theme);
+      document.documentElement.setAttribute('data-blog-theme', theme);
+    }
+  });
+  onDestroy(() => {
+    if (typeof document !== 'undefined')
+      document.documentElement.removeAttribute('data-blog-theme');
+  });
+</script>
+
+{@render children()}