refactor(module)!: implement design system with CSS variables (#2298)

docs/content/1.getting-started/2.installation.md

@@ -39,9 +39,7 @@ export default defineNuxtConfig({
 })
 ```
 
-3. Import Tailwind and Nuxt UI in your `app.vue`{lang="ts-type"} or in your [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
-
-::code-group
+3. Import Tailwind CSS and Nuxt UI in your `app.vue`{lang="ts-type"} or [CSS](https://nuxt.com/docs/getting-started/styling#the-css-property):
 
 ```vue [app.vue]
 <style>
@@ -50,13 +48,6 @@ export default defineNuxtConfig({
 </style>
 ```
 
-```css [main.css]
-@import "tailwindcss";
-@import "@nuxt/ui";
-```
-
-::
-
 ## Options
 
 You can customize Nuxt UI by providing options in your `nuxt.config.ts`:
@@ -91,25 +82,40 @@ export default defineNuxtConfig({
 })
 ```
 
+### `colorMode`
+
+Use the `colorMode` option to enable or disable the `@nuxt/color-mode` module.
+
+- Default: `true`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    colorMode: false
+  }
+})
+```
+
 ### `theme.colors`
 
 Use the `theme.colors` option to choose which Tailwind CSS colors are used to generate classes for components.
 
-- Default: `['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']`{lang="ts-type" class="inline"}
+- Default: `['primary', 'secondary', 'success', 'info', 'warning', 'error']`{lang="ts-type" class="inline"}
 
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
   ui: {
     theme: {
-      colors: ['blue', 'green', 'red']
+      colors: ['primary', 'error']
     }
   }
 })
 ```
 
-::note{to="/getting-started/colors#build-colors"}
-This can help reduce the number of CSS classes generated in your bundle.
+::tip{to="/getting-started/theme#colors"}
+You can use this option to remove some colors and reduce your CSS bundle or add new dynamic colors.
 ::
 
 ### `theme.transitions`