docs: new structure (#1282)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/content/1.getting-started/3.theming.md

@@ -2,8 +2,6 @@
 description: 'Learn how to customize the look and feel of the components.'
 ---
 
-## Overview
-
 This module relies on Nuxt [App Config](https://nuxt.com/docs/guide/directory-structure/app-config#app-config-file) file to customize the look and feel of the components at runtime with HMR (hot-module-replacement).
 
 ## Colors
@@ -70,7 +68,7 @@ The `primary` color also has a `DEFAULT` shade that changes based on the theme.
 
 ### Smart Safelisting
 
-Components having a `color` prop like [Avatar](/elements/avatar#chip), [Badge](/elements/badge#style), [Button](/elements/button#style), [Input](/forms/input#style) (inherited in [Select](/forms/select) and [SelectMenu](/forms/select-menu)), [RadioGroup](/forms/radio-group), [Checkbox](/forms/checkbox), [Toggle](/forms/toggle), [Range](/forms/range) and [Notification](/overlays/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
+Components having a `color` prop like [Avatar](/components/avatar#chip), [Badge](/components/badge#style), [Button](/components/button#style), [Input](/components/input#style) (inherited in [Select](/components/select) and [SelectMenu](/components/select-menu)), [RadioGroup](/components/radio-group), [Checkbox](/components/checkbox), [Toggle](/components/toggle), [Range](/components/range) and [Notification](/components/notification#timeout) will use the `primary` color by default but will handle all the colors defined in your `tailwind.config.ts` or the default Tailwind CSS colors.
 
 Variant classes of those components are defined with a syntax like `bg-{color}-500 dark:bg-{color}-400` so they can be used with any color. However, this means that Tailwind will not find those classes and therefore will not generate the corresponding CSS.
 
@@ -227,10 +225,6 @@ All the components are styled with dark mode in mind.
 
 Thanks to [Tailwind CSS 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.
 
-::callout{icon="i-heroicons-puzzle-piece"}
-Learn how to build a color mode button in the [Examples](/getting-started/examples#color-mode-button) page.
-::
-
 You can disable dark mode by setting the `preference` to `light` instead of `system` in your `nuxt.config.ts`.
 
 ```ts [nuxt.config.ts]
@@ -245,6 +239,42 @@ export default defineNuxtConfig({
 If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
 ::
 
+You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
+
+::component-example
+#default
+:color-mode-button
+
+#code
+```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>
+    <UButton
+      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+      color="gray"
+      variant="ghost"
+      aria-label="Theme"
+      @click="isDark = !isDark"
+    />
+    <template #fallback>
+      <div class="w-8 h-8" />
+    </template>
+  </ClientOnly>
+</template>
+```
+::
+
 ## Icons
 
 You can use any icon (100,000+) from [Iconify](https://iconify.design/).
@@ -257,7 +287,7 @@ Some components have an `icon` prop that allows you to add an icon to the compon
 </template>
 ```
 
-You can also use the [Icon](/elements/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
+You can also use the [Icon](/components/icon) component to add an icon anywhere in your app by following this pattern: `i-{collection_name}-{icon_name}`.
 
 ```vue
 <template>
@@ -347,7 +377,7 @@ export default defineNuxtConfig({
 
 The `Icon` component also has a `dynamic` prop to use the [nuxt-icon](https://github.com/nuxt-modules/icon/) module instead of the [@egoist/tailwindcss-icons](https://github.com/egoist/tailwindcss-icons#plugin-options) plugin.
 
-Read more about this in the [Icon](/elements/icon#dynamic) component page.
+Read more about this in the [Icon](/components/icon#dynamic) component page.
 
 ### Defaults