diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 3a78338e..4088964b 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/apps/www/.vitepress/theme/config/docs.ts @@ -68,6 +68,11 @@ export const docsConfig: DocsConfig = { href: '/docs/theming', items: [], }, + { + title: 'Dark Mode', + href: '/docs/dark-mode', + items: [], + }, { title: 'CLI', href: '/docs/cli', diff --git a/apps/www/src/content/docs/dark-mode.md b/apps/www/src/content/docs/dark-mode.md new file mode 100644 index 00000000..712a92a1 --- /dev/null +++ b/apps/www/src/content/docs/dark-mode.md @@ -0,0 +1,69 @@ +--- +title: Dark Mode +description: Adding dark mode to your site. +--- + +
+ + + Vite + + +

Vite

+
+ + + Nuxt + + +

Nuxt

+
+ + + Astro + + +

Astro

+
+ + + + +

Laravel

+
+ + + + Vite + + +

Vitepress

+
+
diff --git a/apps/www/src/content/docs/dark-mode/nuxt.md b/apps/www/src/content/docs/dark-mode/nuxt.md new file mode 100644 index 00000000..957c72ef --- /dev/null +++ b/apps/www/src/content/docs/dark-mode/nuxt.md @@ -0,0 +1,74 @@ +--- +title: Vite +description: Adding dark mode to your vite app. +--- + +## Dark mode + + + +### Install Dependencies + +```bash +npm install -D @nuxtjs/color-mode +``` + +Then, add `@nuxtjs/color-mode` to the modules section of your `nuxt.config.ts` + +```ts +export default defineNuxtConfig({ + modules: [ + '@nuxtjs/tailwindcss', + '@nuxtjs/color-mode' + ], + colorMode: { + classSuffix: '' + } +}) +``` + +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://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/). + +```vue + + + +``` + + diff --git a/apps/www/src/content/docs/dark-mode/vite.md b/apps/www/src/content/docs/dark-mode/vite.md new file mode 100644 index 00000000..921af076 --- /dev/null +++ b/apps/www/src/content/docs/dark-mode/vite.md @@ -0,0 +1,62 @@ +--- +title: Vite +description: Adding dark mode to your vite app. +--- + +## Dark mode + + + +### 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 + + + +``` + + diff --git a/apps/www/src/content/docs/dark-mode/vitepress.md b/apps/www/src/content/docs/dark-mode/vitepress.md new file mode 100644 index 00000000..366f6cc4 --- /dev/null +++ b/apps/www/src/content/docs/dark-mode/vitepress.md @@ -0,0 +1,47 @@ +--- +title: Vite +description: Adding dark mode to your vite app. +--- + +## Dark mode + + + +### 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 [`useToggle`](https://vueuse.org/shared/useToggle/) from [`@vueuse/core`](https://vueuse.org/core/). +> A boolean switcher with utility functions. + +```vue + + + +``` + +