From f528a5ebc0481492c77d3dc32b9fa39d376f1f0c Mon Sep 17 00:00:00 2001 From: Benjamin Canac Date: Tue, 16 May 2023 12:00:33 +0200 Subject: [PATCH] docs: move dark mode in theming --- docs/content/1.getting-started/3.theming.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md index e946a5bb..eec59e89 100644 --- a/docs/content/1.getting-started/3.theming.md +++ b/docs/content/1.getting-started/3.theming.md @@ -29,6 +29,12 @@ Try to change the `primary` and `gray` colors in the navbar and see the colors c Components that have a `color` prop like [Avatar](/elements/avatar), [Badge](/elements/badge) and [Button](/elements/button) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default TailwindCSS colors. +## Dark mode + +All the components are styled with dark mode in mind. + +Thanks to [TailwindCSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do. + ## Components Components are styled with TailwindCSS but classes are all defined in the default [app.config.ts](https://github.com/nuxtlabs/ui/blob/dev/src/runtime/app.config.ts) file. You can override them in your `app.config.ts`. @@ -159,9 +165,3 @@ export default defineAppConfig({ } }) ``` - -## Dark mode - -All the components are styled with dark mode in mind. - -Thanks to [TailwindCSS dark mode](https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually) `class` strategy and the [@nuxtjs/color-mode](https://github.com/nuxt-modules/color-mode) module, you literally have nothing to do.