diff options
| -rw-r--r-- | src/app.css | 9 | ||||
| -rw-r--r-- | src/routes/blog/+layout.svelte | 26 |
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()} |