From dec7ac60c388fb9a2e31d6f2012c10de1683055b Mon Sep 17 00:00:00 2001 From: Saeid Zareie Date: Wed, 6 Mar 2024 15:34:32 +0330 Subject: [PATCH] docs: adding dark-mode setup page, resolves #236 --- apps/www/.vitepress/theme/config/docs.ts | 5 ++ apps/www/src/content/docs/dark-mode.md | 69 +++++++++++++++++ apps/www/src/content/docs/dark-mode/nuxt.md | 74 +++++++++++++++++++ apps/www/src/content/docs/dark-mode/vite.md | 62 ++++++++++++++++ .../src/content/docs/dark-mode/vitepress.md | 47 ++++++++++++ 5 files changed, 257 insertions(+) create mode 100644 apps/www/src/content/docs/dark-mode.md create mode 100644 apps/www/src/content/docs/dark-mode/nuxt.md create mode 100644 apps/www/src/content/docs/dark-mode/vite.md create mode 100644 apps/www/src/content/docs/dark-mode/vitepress.md 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 + + + +``` + +