## Pages ### dark-mode-astro Astro dark mode via Tailwind's class strategy: inline script for theme persistence + mode-watcher library + toggle components (light switch or dropdown menu) ## Dark Mode in Astro Astro uses Tailwind CSS's `class` strategy for dark mode toggling by adding/removing the `dark` class on the `html` element. ### Inline Theme Script Create a script in your Astro page that: - Reads theme preference from `localStorage` or system preference via `prefers-color-scheme` media query - Applies the `dark` class to `document.documentElement` on initial load (prevents FUOC) - Observes class changes on the html element and syncs them to `localStorage` ```astro --- import "$lib/styles/app.css"; ---

Astro

``` ### Using mode-watcher Install mode-watcher: ```bash npm i mode-watcher@0.5.1 ``` Add the `ModeWatcher` component with `client:load` directive to enable theme tracking: ```astro --- import { ModeWatcher } from "mode-watcher"; --- ``` ### Mode Toggle Components Create a light switch toggle: ```svelte ``` Or create a dropdown menu with light/dark/system options: ```svelte setMode("light")}>Light setMode("dark")}>Dark resetMode()}>System ``` Add the toggle to your page with `client:load`: ```astro --- import { ModeWatcher } from "mode-watcher"; import ModeToggle from "$lib/components/mode-toggle.svelte"; --- ``` ### dark-mode Install mode-watcher, add ModeWatcher to root layout, create toggles with toggleMode/setMode/resetMode functions. ## Setup Install `mode-watcher`: ```bash npm i mode-watcher ``` Add the `ModeWatcher` component to your root layout (src/routes/+layout.svelte): ```svelte {@render children?.()} ``` ## Mode Toggle Create a simple toggle button: ```svelte ``` Or create a dropdown menu with light/dark/system options: ```svelte setMode("light")}>Light setMode("dark")}>Dark resetMode()}>System ``` Use `toggleMode()` to switch modes, `setMode(mode)` to set a specific mode, and `resetMode()` to use system preference.