--- title: Astro description: Adding dark mode to your astro app. --- ## Dark mode ### Create an inline theme script ```astro title="src/pages/index.astro" --- import '../styles/globals.css' ---

Astro

``` ### Install Dependencies ```bash npm install @vueuse/core ``` Optional, to include icons for theme button. ```bash npm install -D @iconify/vue @iconify-json/radix-icons ``` ### Add a mode toggle Place a mode toggle on your site to toggle between light and dark mode. We're using [`useColorMode`](https://vueuse.org/core/usecolormode/) from [`@vueuse/core`](https://vueuse.org/core/). > Reactive color mode (dark / light / customs) with auto data persistence. ```vue ``` ### Display the mode toggle Place a mode toggle on your site to toggle between light and dark mode. ```astro title="src/pages/index.astro" --- import '../styles/globals.css' import ModeToggle from '@/components/ModeToggle.vue'; ---

Astro

```