From f2bdce8d4586ae4c4712041a50031ab07b3b4539 Mon Sep 17 00:00:00 2001 From: georgiybza Date: Mon, 29 Jun 2026 15:32:56 -0400 Subject: [PATCH 1/2] Add dark mode #7 --- Notes.txt | 12 +++++++++ src/components/Header.astro | 52 +++++++++++++++++++++++++------------ src/layouts/Base.astro | 10 +++++++ src/styles/global.css | 12 +++++++++ 4 files changed, 70 insertions(+), 16 deletions(-) create mode 100644 Notes.txt diff --git a/Notes.txt b/Notes.txt new file mode 100644 index 0000000..206d024 --- /dev/null +++ b/Notes.txt @@ -0,0 +1,12 @@ +- pnpm dlx @astrojs/upgrade has breaking changes, do we want to upgrade still? +- icon preference for toggle button? is there already an example from previous CCSS websites? (Maybe sun/moon) + + +Tasks: +1. First Visit = OS prefers-color-scheme +2. After User Clicks Toggle = remember choice in localStorage and use it on every later visit, ignoring OS preference + +Files to Modify: +- src/styles/global.css (dark token values) +- src/layouts/Base.astro (one tiny inline script, no-flash init) +- src/components/Header.astro (just the toggle button, on the far right, nothing else) diff --git a/src/components/Header.astro b/src/components/Header.astro index 56c8601..03b5ef0 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -1,4 +1,5 @@ --- +import { Icon } from 'astro-icon/components'; const navLinks = [ { href: '/projects', label: 'Projects' }, { href: '/webring', label: 'Webring' }, @@ -6,26 +7,45 @@ const navLinks = [ const path = Astro.url.pathname; --- +
Carleton Computer Science Showcase - +
+ + +
+ + diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 3977cc9..73a6cc7 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -16,6 +16,16 @@ const { + +