From 8818ee6497eb52f87c8d838cf3ef5526cd1cbb8a Mon Sep 17 00:00:00 2001 From: Graham Hall Date: Thu, 6 Nov 2025 10:45:29 -0500 Subject: [PATCH] final toggle style --- .astro/content-assets.mjs | 4 +- src/assets/svg/moon.svg | 3 + src/assets/svg/paintbrush.svg | 3 - src/assets/svg/sun.svg | 3 + src/components/Header/Header.astro | 4 +- src/components/Header/ThemeMenu.astro | 90 ------------------------- src/components/Header/ThemeToggle.astro | 28 ++++++++ src/layouts/Layout.astro | 11 +-- 8 files changed, 40 insertions(+), 106 deletions(-) create mode 100644 src/assets/svg/moon.svg delete mode 100644 src/assets/svg/paintbrush.svg create mode 100644 src/assets/svg/sun.svg delete mode 100644 src/components/Header/ThemeMenu.astro create mode 100644 src/components/Header/ThemeToggle.astro diff --git a/.astro/content-assets.mjs b/.astro/content-assets.mjs index f4a5e5e..99ae6ce 100644 --- a/.astro/content-assets.mjs +++ b/.astro/content-assets.mjs @@ -1,10 +1,10 @@ +import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md"; import __ASTRO_IMAGE_IMPORT_1G57ng from "src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md"; import __ASTRO_IMAGE_IMPORT_Z1ESWoO from "src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md"; import __ASTRO_IMAGE_IMPORT_rrnp from "src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md"; -import __ASTRO_IMAGE_IMPORT_3KcDr from "src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md"; import __ASTRO_IMAGE_IMPORT_Zi2DqH from "src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md"; import __ASTRO_IMAGE_IMPORT_1OkzEl from "src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md"; import __ASTRO_IMAGE_IMPORT_FYQiW from "src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md"; -export default new Map([["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]); +export default new Map([["src/assets/blog/my-ai-portrait.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fcreating-a-dating-profile-with-ai.md", __ASTRO_IMAGE_IMPORT_3KcDr], ["src/assets/blog/ileopard/mac-os-10-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_1G57ng], ["src/assets/blog/ileopard/itunes-7.gif?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_Z1ESWoO], ["src/assets/blog/ileopard/ileopard-2-0-1.png?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2022%2Fileopard-a-retrospective.md", __ASTRO_IMAGE_IMPORT_rrnp], ["src/assets/blog/gunpla/box.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_Zi2DqH], ["src/assets/blog/gunpla/all-the-parts.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_1OkzEl], ["src/assets/blog/gunpla/final.jpg?astroContentImageFlag=&importer=src%2Fcontent%2Fblog%2F2023%2Fmy-gunpla-adventure.md", __ASTRO_IMAGE_IMPORT_FYQiW]]); \ No newline at end of file diff --git a/src/assets/svg/moon.svg b/src/assets/svg/moon.svg new file mode 100644 index 0000000..588b57a --- /dev/null +++ b/src/assets/svg/moon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/paintbrush.svg b/src/assets/svg/paintbrush.svg deleted file mode 100644 index a9518d7..0000000 --- a/src/assets/svg/paintbrush.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/assets/svg/sun.svg b/src/assets/svg/sun.svg new file mode 100644 index 0000000..1a161b8 --- /dev/null +++ b/src/assets/svg/sun.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index d2544fd..0e2e107 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -1,7 +1,7 @@ --- import Drawer from "./Drawer.astro"; import Nav from "./Nav.astro"; -import ThemeMenu from "./ThemeMenu.astro"; +import ThemeToggle from "./ThemeToggle.astro"; ---
@@ -9,7 +9,7 @@ import ThemeMenu from "./ThemeMenu.astro"; ghall.space
diff --git a/src/components/Header/ThemeMenu.astro b/src/components/Header/ThemeMenu.astro deleted file mode 100644 index f1ecd04..0000000 --- a/src/components/Header/ThemeMenu.astro +++ /dev/null @@ -1,90 +0,0 @@ ---- -import BrushIcon from "../../assets/svg/paintbrush.svg"; ---- - -
- -
-
- Select a theme: -
- - - - - - - - -
-
-
- - diff --git a/src/components/Header/ThemeToggle.astro b/src/components/Header/ThemeToggle.astro new file mode 100644 index 0000000..6b1e159 --- /dev/null +++ b/src/components/Header/ThemeToggle.astro @@ -0,0 +1,28 @@ +--- +import BrushIcon from "../../assets/svg/paintbrush.svg"; +--- + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 94159a6..c2fade5 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -37,16 +37,9 @@ const title = Astro.props.title || Astro.props.frontmatter?.title || "Unknown"; class="layout-simple" x-data="{ drawerOpen: false, - theme: $persist('system'), - isDark() { - const osIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches; - - if (this.theme === 'dark' || this.theme === 'system' && osIsDark) return true; - - return false; - } + darkMode: $persist(false) }" - :class="{ 'lock-scroll': drawerOpen, 'theme-dark': isDark()}" + :class="{ 'lock-scroll': drawerOpen, 'theme-dark': darkMode}" >