diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index ef576a5..1deb78b 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -44,7 +44,7 @@ const isHomepage = Astro.url.pathname === "/"; diff --git a/src/style/global.css b/src/style/global.css index 781ee6c..90f2fc0 100644 --- a/src/style/global.css +++ b/src/style/global.css @@ -2,6 +2,9 @@ https://tailwindcss.com/docs/detecting-classes-in-source-files#setting-your-base-path */ @import "tailwindcss" source(".."); +/* Dark-only site: enable class-based dark mode */ +@variant dark (&:where(.dark, .dark *)); + /* Tailwind CSS Typography plugin + custom CSS overrides */ @plugin "@tailwindcss/typography"; @config "./plugin-configs/tailwindcss-typography.cjs"; diff --git a/src/utils/theme.ts b/src/utils/theme.ts deleted file mode 100644 index d2a7e6b..0000000 --- a/src/utils/theme.ts +++ /dev/null @@ -1,42 +0,0 @@ -export const getTheme = () => { - if (typeof localStorage !== "undefined" && localStorage.getItem("theme")) { - return localStorage.getItem("theme") as 'light' | 'dark'; - } - return null; -}; - -export function setTheme(theme: 'light' | 'dark') { - /** - * clear the current theme when setting a new theme value - * (essentially always reset to system theme first) - */ - window.localStorage.removeItem('theme'); - document.documentElement.classList.remove("light", "dark"); - // now set the new theme - window.localStorage.setItem('theme', theme); - document.documentElement.classList.add(theme); -} - -export function setUpClientThemeScripts() { - const startViewTransition = (fn: () => void) => document.startViewTransition?.(fn) ?? fn(); - const setUpThemeScripts = () => { - // set the initial theme - setTheme(getTheme()); - // event listener for theme toggling - document.addEventListener("click", (e) => { - const target = e.target as HTMLElement; - if (target?.matches(`button[data-theme-toggle]`)) { - const theme = target.dataset.themeToggle; - if (theme === "light" || theme === "dark") { - startViewTransition(() => setTheme(theme)); - } - } - }); - }; - // set up on first pageload - setUpThemeScripts(); - // run the setup function when the page is swapped (view transitions) - // https://docs.astro.build/en/guides/view-transitions/#astroafter-swap - // see more: https://github.com/withastro/astro/issues/7765 - document.addEventListener("astro:after-swap", setUpThemeScripts); -}