> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt > Use this file to discover all available pages before exploring further. # Astro > Adding dark mode to your Astro site. Just like in regular Svelte, we use the `class` strategy from Tailwind CSS to support dark mode toggling. See the [Tailwind CSS documentation](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) for more information. How you add the `dark` class to the `html` element is up to you. In this guide, we'll take a look at enabling dark mode toggling with [mode-watcher](https://github.com/svecosystem/mode-watcher). ## Usage This script will, in part, keep and track the dark mode value in `localStorage` and prevent [FUOC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). ```astro title="src/pages/index.astro" {5-27} theme={null} --- import "../styles/global.css"; ---

Astro

``` ```bash theme={null} npm install mode-watcher@0.5.1 ``` Import the `ModeWatcher` component and use it in your page with the `client:load` directive: ```astro title="src/pages/index.astro" {3,9} theme={null} --- import "../styles/global.css"; import { ModeWatcher } from "mode-watcher"; ---

Astro

``` Create a mode toggle on your site to toggle between light and dark mode. You can create either a light switch toggle or a dropdown menu toggle. The implementation details will depend on your specific UI components. Add the mode toggle to the page (also with the `client:load` directive): ```astro title="src/pages/index.astro" {4,12} theme={null} --- import "../styles/global.css"; import { ModeWatcher } from "mode-watcher"; import ModeToggle from "$lib/components/mode-toggle.svelte"; ---

Astro

```