docs: improve with examples

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

@@ -20,7 +20,7 @@ export default defineAppConfig({
 ```
 
 ::alert{icon="i-heroicons-light-bulb"}
-Try to change the `primary` and `gray` colors in the navbar and see the documentation change live.
+Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
 As this module uses Tailwind CSS under the hood, you can use any of the [Tailwind CSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `green` and the `gray` color is `cool`.
@@ -73,6 +73,10 @@ 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.
 
+::alert{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]
@@ -87,34 +91,6 @@ 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 dark mode switcher by using the `useColorMode` composable from `@nuxtjs/color-mode`.
-
-```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' : 'i-heroicons-sun'"
-      color="gray"
-      variant="ghost"
-      @click="isDark = !isDark"
-    />
-  </ClientOnly>
-</template>
-```
-
 ## Components
 
 Components are styled with Tailwind CSS 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`.