Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update Nuxt dark mode

Browse Source
This commit is contained in:
selemondev-triply 2024-08-29 15:19:32 +03:00
parent ba79c79453
commit 35f4ad82f7
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/www/src/content/docs/dark-mode/nuxt.md
View File

@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
<Steps> <Steps>
### Install Dependencies <!-- ### Install Dependencies
```bash ```bash
npm install -D @nuxtjs/color-mode npm install -D @nuxtjs/color-mode
@ -25,19 +25,21 @@ export default defineNuxtConfig({
classSuffix: '' classSuffix: ''
} }
}) })
``` ``` -->
Optional, to include icons for theme button.
```bash
npm install -D @iconify/vue @iconify-json/radix-icons
```
### Add a mode toggle ### Add a mode toggle
Place a mode toggle on your site to toggle between light and dark mode. Place a mode toggle on your site to toggle between light and dark mode.
The `@nuxtjs/color-mode` module is automatically installed and configured during the installation of the `shadcn-nuxt` module, so you literally have nothing to do.
We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/). We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
Optional, to include icons for theme button.
```bash
npm install -D @iconify/vue @iconify-json/radix-icons
```
```vue ```vue
<script setup lang="ts"> <script setup lang="ts">
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'