## Pages ### astro Astro dark mode via Tailwind's class strategy: inline script for FUOC prevention + localStorage sync, mode-watcher for toggling, custom toggle components with setMode/toggleMode/resetMode. ## 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 that: - Reads theme preference from `localStorage` or system preference - Applies the `dark` class to `html` on page load (prevents FUOC) - Observes class changes and syncs to `localStorage` ```astro --- import "../styles/global.css"; ---

Astro

``` ### Mode Watcher Integration Install mode-watcher: ```bash npm i mode-watcher@0.5.1 ``` Add the `ModeWatcher` component with `client:load` directive to enable theme toggling: ```astro --- import { ModeWatcher } from "mode-watcher"; --- ``` ### Mode Toggle Components Create a light switch or dropdown menu to toggle themes: **Light switch:** ```svelte ``` **Dropdown menu:** ```svelte setMode("light")}>Light setMode("dark")}>Dark resetMode()}>System ``` Add the toggle to your page with `client:load`: ```astro ``` ### dark-mode Install mode-watcher, add ModeWatcher component to root layout, use toggleMode()/setMode()/resetMode() for theme control. ## Setup Install `mode-watcher`: ```bash npm i mode-watcher ``` Add `ModeWatcher` component to your root layout: ```svelte // src/routes/+layout.svelte {@render children?.()} ``` ## Mode Toggle Simple button toggle: ```svelte ``` Dropdown menu with light/dark/system options: ```svelte setMode("light")}>Light setMode("dark")}>Dark resetMode()}>System ``` Use `toggleMode()` for simple toggle, `setMode("light"|"dark")` for explicit mode, or `resetMode()` for system preference.