docs(app): framework select global (#2719)

Co-authored-by: harlan <harlan@harlanzw.com>

docs/content/1.getting-started/6.color-mode/.navigation.yml

@@ -0,0 +1 @@
+shadow: true

docs/content/1.getting-started/6.color-mode/1.nuxt.md

@@ -0,0 +1,58 @@
+---
+title: Color Mode
+description: 'Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.'
+navigation.framework: nuxt
+links:
+  - label: 'nuxtjs/color-mode'
+    to: https://github.com/nuxt-modules/color-mode
+    target: _blank
+    icon: i-simple-icons-github
+---
+
+::callout{to="/getting-started/color-mode/vue" icon="i-logos-vue" class="hidden"}
+Looking for the **Vue** version?
+::
+
+## Usage
+
+Nuxt UI automatically registers the [`@nuxtjs/color-mode`](https://github.com/nuxt-modules/color-mode) module for you, so there's no additional setup required. You can simply use the `useColorMode` composable to switch between light and dark modes:
+
+```vue [ColorModeButton.vue]
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  }
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+      color="neutral"
+      variant="ghost"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="size-8" />
+    </template>
+  </ClientOnly>
+</template>
+```
+
+You can disable the `@nuxtjs/color-mode` module with the `ui.colorMode` option in your `nuxt.config.ts`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  ui: {
+    colorMode: false
+  }
+})
+```

docs/content/1.getting-started/6.color-mode/2.vue.md

@@ -0,0 +1,47 @@
+---
+title: Color Mode
+description: 'Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.'
+navigation.framework: vue
+---
+
+::callout{to="/getting-started/color-mode/nuxt" icon="i-logos-nuxt-icon" class="hidden"}
+Looking for the **Nuxt** version?
+::
+
+## Usage
+
+Nuxt UI automatically registers the [useDark](https://vueuse.org/core/useDark) composable as a Vue plugin, so there's no additional setup required. You can simply use it to switch between light and dark modes:
+
+```vue [ColorModeButton.vue]
+<script setup>
+import { useColorMode } from '@vueuse/core'
+
+const mode = useColorMode()
+</script>
+
+<template>
+  <UButton
+    :icon="mode === 'dark' ? 'i-lucide-moon' : 'i-lucide-sun'"
+    color="neutral"
+    variant="ghost"
+    @click="mode = mode === 'dark' ? 'light' : 'dark'"
+  />
+</template>
+```
+
+You can disable this plugin with the `colorMode` option in your `vite.config.ts`:
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import ui from '@nuxt/ui/vite'
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    ui({
+      colorMode: false
+    })
+  ]
+})
+```