diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index 5d2c192e..a16d4fcc 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -76,9 +76,24 @@ export default defineNuxtConfig({
 })
 ```
 
-### `colors`
+### `fonts`
 
-Use the `colors` option to choose which Tailwind CSS colors are used to generate classes for components.
+Use the `fonts` option to enable or disable the `@nuxt/fonts` module.
+
+- Default: `true`{lang="ts-type"}
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['@nuxt/ui'],
+  ui: {
+    fonts: 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"}
 
@@ -95,21 +110,6 @@ export default defineNuxtConfig({
 This can help reduce the number of CSS classes generated in your bundle.
 ::
 
-### `fonts`
-
-Use the `fonts` option to enable or disable the `@nuxt/fonts` module.
-
-- Default: `true`{lang="ts-type"}
-
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['@nuxt/ui'],
-  ui: {
-    fonts: false
-  }
-})
-```
-
 ### `theme.transitions`
 
 Use the `theme.transitions` option to disable all transitions on components.
diff --git a/docs/content/1.getting-started/4.colors.md b/docs/content/1.getting-started/4.colors.md
index 709a477f..2f13e04c 100644
--- a/docs/content/1.getting-started/4.colors.md
+++ b/docs/content/1.getting-started/4.colors.md
@@ -15,7 +15,7 @@ slots:
 ---
 ::
 
-You can change these colors with the [`colors`](/getting-started/installation#colors) option in your `nuxt.config.ts` to select only the colors you're actually using.
+You can change these colors with the [`theme.colors`](/getting-started/installation#themecolors) option in your `nuxt.config.ts` to select only the colors you're actually using.
 
 For example, if you added a custom `cerise` color and only use the default `blue` and `green` colors in your application, you can configure the `colors` option like this:
 
@@ -25,7 +25,9 @@ For example, if you added a custom `cerise` color and only use the default `blue
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
   ui: {
-    colors: ['cerise', 'blue', 'green']
+    theme: {
+      colors: ['cerise', 'blue', 'green']
+    }
   }
 })
 ```
diff --git a/src/module.ts b/src/module.ts
index f0d94cb0..e011e81f 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -12,12 +12,6 @@ export interface ModuleOptions {
    */
   prefix?: string
 
-  /**
-   * Colors to generate classes for (based on TailwindCSS colors)
-   * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
-   */
-  colors?: string[]
-
   /**
    * Enable or disable `@nuxt/fonts` module
    * @defaultValue true
@@ -25,6 +19,12 @@ export interface ModuleOptions {
   fonts?: boolean
 
   theme?: {
+    /**
+     * Colors to generate classes for (defaults to TailwindCSS colors)
+     * @defaultValue ['red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+     */
+    colors?: string[]
+
     /**
      * Enable or disable transitions on components
      * @defaultValue true
@@ -43,16 +43,17 @@ export default defineNuxtModule<ModuleOptions>({
   },
   defaults: {
     prefix: 'U',
-    colors: undefined,
     fonts: true,
     theme: {
+      colors: undefined,
       transitions: true
     }
   },
   async setup(options, nuxt) {
     const { resolve } = createResolver(import.meta.url)
 
-    options.colors = options.colors?.length ? [...new Set(['primary', 'error', ...options.colors])] : ['primary', 'error', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
+    options.theme = options.theme || {}
+    options.theme.colors = options.theme.colors?.length ? [...new Set(['primary', 'error', ...options.theme.colors])] : ['primary', 'error', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose']
 
     nuxt.options.ui = options
 
diff --git a/src/theme/alert.ts b/src/theme/alert.ts
index 1a4d2155..2aba01e2 100644
--- a/src/theme/alert.ts
+++ b/src/theme/alert.ts
@@ -14,7 +14,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       gray: ''
     },
     variant: {
@@ -34,25 +34,25 @@ export default (options: Required<ModuleOptions>) => ({
       }
     }
   },
-  compoundVariants: [...options.colors.map((color: string) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'solid',
     class: {
       root: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
     }
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'outline',
     class: {
       root: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
     }
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'soft',
     class: {
       root: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
     }
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'subtle',
     class: {
diff --git a/src/theme/badge.ts b/src/theme/badge.ts
index f761d571..846055b0 100644
--- a/src/theme/badge.ts
+++ b/src/theme/badge.ts
@@ -4,7 +4,7 @@ export default (options: Required<ModuleOptions>) => ({
   base: 'rounded-md font-medium inline-flex items-center',
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       gray: ''
     },
     variant: {
@@ -19,19 +19,19 @@ export default (options: Required<ModuleOptions>) => ({
       lg: 'text-sm px-2 py-1'
     }
   },
-  compoundVariants: [...options.colors.map((color: string) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'solid',
     class: `bg-${color}-500 dark:bg-${color}-400 text-white dark:text-gray-900`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'outline',
     class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'soft',
     class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'subtle',
     class: `bg-${color}-500/10 dark:bg-${color}-400/10 text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25`
diff --git a/src/theme/breadcrumb.ts b/src/theme/breadcrumb.ts
index 3b82f7a1..0e20d06c 100644
--- a/src/theme/breadcrumb.ts
+++ b/src/theme/breadcrumb.ts
@@ -36,7 +36,7 @@ export default (options: Required<ModuleOptions>) => ({
     active: false,
     to: true,
     class: {
-      link: ['hover:text-gray-700 dark:hover:text-gray-200', options.theme?.transitions && 'transition-colors']
+      link: ['hover:text-gray-700 dark:hover:text-gray-200', options.theme.transitions && 'transition-colors']
     }
   }]
 })
diff --git a/src/theme/button.ts b/src/theme/button.ts
index b64555b0..829282cb 100644
--- a/src/theme/button.ts
+++ b/src/theme/button.ts
@@ -3,7 +3,7 @@ import { buttonGroupVariant } from './button-group'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme?.transitions && 'transition-colors'],
+    base: ['rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75', options.theme.transitions && 'transition-colors'],
     label: 'truncate',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
@@ -12,7 +12,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     ...buttonGroupVariant,
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       gray: ''
     },
     variant: {
@@ -69,27 +69,27 @@ export default (options: Required<ModuleOptions>) => ({
       true: ''
     }
   },
-  compoundVariants: [...options.colors.map((color: string) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'solid',
     class: `text-white dark:text-gray-900 bg-${color}-500 hover:bg-${color}-600 disabled:bg-${color}-500 aria-disabled:bg-${color}-500 dark:bg-${color}-400 dark:hover:bg-${color}-500 dark:disabled:bg-${color}-400 dark:aria-disabled:bg-${color}-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'outline',
     class: `ring ring-inset ring-${color}-500/50 dark:ring-${color}-400/50 text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'soft',
     class: `text-${color}-500 dark:text-${color}-400 bg-${color}-500/10 hover:bg-${color}-500/15 focus-visible:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:focus-visible:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'subtle',
     class: `text-${color}-500 dark:text-${color}-400 ring ring-inset ring-${color}-500/25 dark:ring-${color}-400/25 bg-${color}-500/10 hover:bg-${color}-500/15 disabled:bg-${color}-500/10 aria-disabled:bg-${color}-500/10 dark:bg-${color}-400/10 dark:hover:bg-${color}-400/15 dark:disabled:bg-${color}-400/10 dark:aria-disabled:bg-${color}-400/10 focus-visible:ring-2 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'ghost',
     class: `text-${color}-500 dark:text-${color}-400 hover:bg-${color}-500/10 focus-visible:bg-${color}-500/10 disabled:bg-transparent aria-disabled:bg-transparent dark:hover:bg-${color}-400/10 dark:focus-visible:bg-${color}-400/10 dark:disabled:bg-transparent dark:aria-disabled:bg-transparent`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'link',
     class: `text-${color}-500 hover:text-${color}-600 disabled:text-${color}-500 aria-disabled:text-${color}-500 dark:text-${color}-400 dark:hover:text-${color}-500 dark:disabled:text-${color}-400 dark:aria-disabled:text-${color}-400 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
diff --git a/src/theme/checkbox.ts b/src/theme/checkbox.ts
index 7a829e89..b32a2d98 100644
--- a/src/theme/checkbox.ts
+++ b/src/theme/checkbox.ts
@@ -12,7 +12,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`])),
       gray: 'focus-visible:outline-gray-900 dark:focus-visible:outline-white'
     },
     size: {
@@ -58,7 +58,7 @@ export default (options: Required<ModuleOptions>) => ({
       true: ''
     }
   },
-  compoundVariants: [...options.colors.map((color: string) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
     color,
     checked: true,
     class: `ring-2 ring-${color}-500 dark:ring-${color}-400 bg-${color}-500 dark:bg-${color}-400`
diff --git a/src/theme/chip.ts b/src/theme/chip.ts
index b9886535..3ef01503 100644
--- a/src/theme/chip.ts
+++ b/src/theme/chip.ts
@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, `bg-${color}-500 dark:bg-${color}-400`])),
       gray: 'bg-gray-500 dark:bg-gray-400'
     },
     size: {
diff --git a/src/theme/command-palette.ts b/src/theme/command-palette.ts
index 1716dd47..66f3bed5 100644
--- a/src/theme/command-palette.ts
+++ b/src/theme/command-palette.ts
@@ -10,8 +10,8 @@ export default (options: Required<ModuleOptions>) => ({
     group: 'p-1 isolate',
     empty: 'py-6 text-center text-sm',
     label: 'px-2 py-1.5 text-xs font-semibold text-gray-900 dark:text-white',
-    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
-    itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme?.transitions && 'transition-colors'],
+    item: ['group relative w-full flex items-center gap-2 px-2 py-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+    itemLeadingIcon: ['shrink-0 size-5 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme.transitions && 'transition-colors'],
     itemLeadingAvatar: 'shrink-0',
     itemLeadingAvatarSize: '2xs',
     itemLeadingChip: 'shrink-0 size-5',
diff --git a/src/theme/context-menu.ts b/src/theme/context-menu.ts
index 6b2330a2..c3f70c85 100644
--- a/src/theme/context-menu.ts
+++ b/src/theme/context-menu.ts
@@ -24,8 +24,8 @@ export default (options: Required<ModuleOptions>) => ({
         itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
       },
       false: {
-        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
-        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
+        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme.transitions && 'transition-colors']
       }
     },
     size: {
diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts
index 9154fce7..d943bd5a 100644
--- a/src/theme/dropdown-menu.ts
+++ b/src/theme/dropdown-menu.ts
@@ -25,8 +25,8 @@ export default (options: Required<ModuleOptions>) => ({
         itemLeadingIcon: 'text-gray-700 dark:text-gray-200'
       },
       false: {
-        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
-        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
+        item: ['text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50 data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+        itemLeadingIcon: ['text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme.transitions && 'transition-colors']
       }
     },
     size: {
diff --git a/src/theme/input-menu.ts b/src/theme/input-menu.ts
index 09606c33..9be78048 100644
--- a/src/theme/input-menu.ts
+++ b/src/theme/input-menu.ts
@@ -5,7 +5,7 @@ import input from './input'
 export default (options: Required<ModuleOptions>) => {
   return defuFn({
     slots: {
-      base: () => ['rounded-md', options.theme?.transitions && 'transition-colors'],
+      base: () => ['rounded-md', options.theme.transitions && 'transition-colors'],
       trailing: 'absolute inset-y-0 end-0 flex items-center disabled:cursor-not-allowed disabled:opacity-75',
       arrow: 'fill-gray-200 dark:fill-gray-800',
       content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
@@ -14,8 +14,8 @@ export default (options: Required<ModuleOptions>) => {
       empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
       label: 'font-semibold text-gray-900 dark:text-white',
       separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
-      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme?.transitions && 'transition-colors'],
+      item: ['group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme.transitions && 'transition-colors'],
       itemLeadingAvatar: 'shrink-0',
       itemLeadingAvatarSize: '',
       itemLeadingChip: 'shrink-0',
@@ -25,7 +25,7 @@ export default (options: Required<ModuleOptions>) => {
       itemLabel: 'truncate',
       tagsItem: 'px-1.5 py-0.5 rounded font-medium inline-flex items-center gap-0.5 ring ring-inset ring-gray-300 dark:ring-gray-700 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-200 data-disabled:cursor-not-allowed data-disabled:opacity-75',
       tagsItemText: 'truncate',
-      tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.theme?.transitions && 'transition-colors'],
+      tagsItemDelete: ['inline-flex items-center rounded-sm text-gray-400 dark:text-gray-500 hover:text-gray-700 hover:bg-gray-200 dark:hover:text-gray-200 dark:hover:bg-gray-700/50 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'],
       tagsItemDeleteIcon: '',
       tagsInput: 'border-0 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75'
     },
@@ -97,7 +97,7 @@ export default (options: Required<ModuleOptions>) => {
         }
       }
     },
-    compoundVariants: [...options.colors.map((color: string) => ({
+    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
       color,
       multiple: true,
       variant: ['outline', 'subtle'],
diff --git a/src/theme/input.ts b/src/theme/input.ts
index d1c1f409..db406d28 100644
--- a/src/theme/input.ts
+++ b/src/theme/input.ts
@@ -4,7 +4,7 @@ import { buttonGroupVariantWithRoot } from './button-group'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative inline-flex items-center',
-    base: ['w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme?.transitions && 'transition-colors'],
+    base: ['w-full rounded-md border-0 focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
     leading: 'absolute inset-y-0 start-0 flex items-center',
     leadingIcon: 'shrink-0 text-gray-400 dark:text-gray-500',
     leadingAvatar: 'shrink-0',
@@ -58,7 +58,7 @@ export default (options: Required<ModuleOptions>) => ({
       none: 'text-gray-900 dark:text-white'
     },
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       gray: ''
     },
     leading: {
@@ -77,11 +77,11 @@ export default (options: Required<ModuleOptions>) => ({
       file: 'file:mr-1.5 file:font-medium file:text-gray-500 dark:file:text-gray-400 file:outline-none'
     }
   },
-  compoundVariants: [...options.colors.map((color: string) => ({
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: ['outline', 'subtle'],
     class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`
-  })), ...options.colors.map((color: string) => ({
+  })), ...(options.theme.colors || []).map((color: string) => ({
     color,
     highlight: true,
     class: `ring ring-inset ring-${color}-500 dark:ring-${color}-400`
diff --git a/src/theme/link.ts b/src/theme/link.ts
index 55447ef0..e6e0431e 100644
--- a/src/theme/link.ts
+++ b/src/theme/link.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
   variants: {
     active: {
       true: 'text-primary-500 dark:text-primary-400',
-      false: ['text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200', options.theme?.transitions && 'transition-colors']
+      false: ['text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200', options.theme.transitions && 'transition-colors']
     },
     disabled: {
       true: 'cursor-not-allowed opacity-75'
diff --git a/src/theme/navigation-menu.ts b/src/theme/navigation-menu.ts
index a9a8554c..99b7c4f9 100644
--- a/src/theme/navigation-menu.ts
+++ b/src/theme/navigation-menu.ts
@@ -33,7 +33,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         link: `focus-visible:before:ring-${color}-500 dark:focus-visible:before:ring-${color}-400`,
         childLink: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`
       }])),
@@ -43,7 +43,7 @@ export default (options: Required<ModuleOptions>) => ({
       }
     },
     highlightColor: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       gray: ''
     },
     variant: {
@@ -70,8 +70,8 @@ export default (options: Required<ModuleOptions>) => ({
       false: {
         link: 'text-gray-500 dark:text-gray-400',
         linkLeadingIcon: 'text-gray-400 dark:text-gray-500',
-        childLink: ['hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white', options.theme?.transitions && 'transition-colors'],
-        childLinkIcon: ['text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200', options.theme?.transitions && 'transition-colors']
+        childLink: ['hover:bg-gray-50 dark:hover:bg-gray-800/50 text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white', options.theme.transitions && 'transition-colors'],
+        childLinkIcon: ['text-gray-400 dark:text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-200', options.theme.transitions && 'transition-colors']
       }
     },
     disabled: {
@@ -102,10 +102,10 @@ export default (options: Required<ModuleOptions>) => ({
     active: false,
     variant: 'pill',
     class: {
-      link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
-      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
+      link: ['hover:text-gray-900 dark:hover:text-white hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50 data-[state=open]:text-gray-900 dark:data-[state=open]:text-white data-[state=open]:before:bg-gray-50 dark:data-[state=open]:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme.transitions && 'transition-colors']
     }
-  }, ...options.colors.map((color: string) => ({
+  }, ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'pill',
     active: true,
@@ -133,17 +133,17 @@ export default (options: Required<ModuleOptions>) => ({
     active: true,
     highlight: true,
     class: {
-      link: ['hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.theme?.transitions && 'before:transition-colors']
+      link: ['hover:before:bg-gray-50 dark:hover:before:bg-gray-800/50', options.theme.transitions && 'before:transition-colors']
     }
   }, {
     disabled: false,
     active: false,
     variant: 'link',
     class: {
-      link: ['hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white', options.theme?.transitions && 'transition-colors'],
-      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme?.transitions && 'transition-colors']
+      link: ['hover:text-gray-900 dark:hover:text-white data-[state=open]:text-gray-900 dark:data-[state=open]:text-white', options.theme.transitions && 'transition-colors'],
+      linkLeadingIcon: ['group-hover:text-gray-700 dark:group-hover:text-gray-200 group-data-[state=open]:text-gray-700 dark:group-data-[state=open]:text-gray-200', options.theme.transitions && 'transition-colors']
     }
-  }, ...options.colors.map((color: string) => ({
+  }, ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'link',
     active: true,
@@ -159,7 +159,7 @@ export default (options: Required<ModuleOptions>) => ({
       link: 'text-gray-900 dark:text-white',
       linkLeadingIcon: 'text-gray-900 dark:text-white'
     }
-  }, ...options.colors.map((highlightColor: string) => ({
+  }, ...(options.theme.colors || []).map((highlightColor: string) => ({
     highlightColor,
     highlight: true,
     active: true,
diff --git a/src/theme/progress.ts b/src/theme/progress.ts
index f99dc891..cbd4a015 100644
--- a/src/theme/progress.ts
+++ b/src/theme/progress.ts
@@ -17,7 +17,7 @@ export default (options: Required<ModuleOptions>) => ({
       'elastic': ''
     },
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         indicator: `bg-${color}-500 dark:bg-${color}-400`,
         steps: `text-${color}-500 dark:text-${color}-400`
       }])),
diff --git a/src/theme/radio-group.ts b/src/theme/radio-group.ts
index fd4d963b..fcd54db2 100644
--- a/src/theme/radio-group.ts
+++ b/src/theme/radio-group.ts
@@ -15,7 +15,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         base: `focus-visible:outline-${color}-500 dark:focus-visible:outline-${color}-400`,
         indicator: `bg-${color}-500 dark:bg-${color}-400`
       }])),
diff --git a/src/theme/select.ts b/src/theme/select.ts
index fb1aa8a2..c2acf19f 100644
--- a/src/theme/select.ts
+++ b/src/theme/select.ts
@@ -7,7 +7,7 @@ export default (options: Required<ModuleOptions>) => {
   return defuFn({
     slots: {
       root: () => undefined,
-      base: () => ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme?.transitions && 'transition-colors'],
+      base: () => ['relative group rounded-md inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75', options.theme.transitions && 'transition-colors'],
       value: 'truncate group-data-placeholder:text-current/50',
       arrow: 'fill-gray-200 dark:fill-gray-800',
       content: 'max-h-60 w-[--radix-popper-anchor-width] bg-white dark:bg-gray-900 shadow-lg rounded-md ring ring-gray-200 dark:ring-gray-800 overflow-hidden data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]',
@@ -16,8 +16,8 @@ export default (options: Required<ModuleOptions>) => {
       empty: 'py-2 text-center text-sm text-gray-500 dark:text-gray-400',
       label: 'font-semibold text-gray-900 dark:text-white',
       separator: '-mx-1 my-1 h-px bg-gray-200 dark:bg-gray-800',
-      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme?.transitions && 'transition-colors before:transition-colors'],
-      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme?.transitions && 'transition-colors'],
+      item: ['group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75 text-gray-700 dark:text-gray-200 data-highlighted:text-gray-900 dark:data-highlighted:text-white data-highlighted:before:bg-gray-50 dark:data-highlighted:before:bg-gray-800/50', options.theme.transitions && 'transition-colors before:transition-colors'],
+      itemLeadingIcon: ['shrink-0 text-gray-400 dark:text-gray-500 group-data-highlighted:text-gray-700 dark:group-data-highlighted:text-gray-200', options.theme.transitions && 'transition-colors'],
       itemLeadingAvatar: 'shrink-0',
       itemLeadingAvatarSize: '',
       itemLeadingChip: 'shrink-0',
diff --git a/src/theme/separator.ts b/src/theme/separator.ts
index 3c6b7bf4..34eb374e 100644
--- a/src/theme/separator.ts
+++ b/src/theme/separator.ts
@@ -12,7 +12,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, { border: `border-${color}-500 dark:border-${color}-400` }])),
       gray: { border: 'border-gray-200 dark:border-gray-800' }
     },
     orientation: {
diff --git a/src/theme/slider.ts b/src/theme/slider.ts
index 868ad243..7749152d 100644
--- a/src/theme/slider.ts
+++ b/src/theme/slider.ts
@@ -9,7 +9,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         range: `bg-${color}-500 dark:bg-${color}-400`,
         thumb: `ring-${color}-500 dark:ring-${color}-400 focus-visible:outline-${color}-500/50 dark:focus-visible:outline-${color}-400/50`
       }])),
diff --git a/src/theme/switch.ts b/src/theme/switch.ts
index 1f1f1f0b..d6c43f6b 100644
--- a/src/theme/switch.ts
+++ b/src/theme/switch.ts
@@ -3,17 +3,17 @@ import type { ModuleOptions } from '../module'
 export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative flex items-start',
-    base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700', options.theme?.transitions && 'transition-colors duration-200'],
+    base: ['inline-flex items-center shrink-0 rounded-full border-2 border-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 data-[state=unchecked]:bg-gray-200 dark:data-[state=unchecked]:bg-gray-700', options.theme.transitions && 'transition-colors duration-200'],
     container: 'flex items-center',
     thumb: 'group pointer-events-none block rounded-full bg-white dark:bg-gray-900 shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0 flex items-center justify-center',
-    icon: ['absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12', options.theme?.transitions && 'transition-[color,opacity] duration-200'],
+    icon: ['absolute shrink-0 group-data-[state=unchecked]:text-gray-400 dark:group-data-[state=unchecked]:text-gray-500 opacity-0 size-10/12', options.theme.transitions && 'transition-[color,opacity] duration-200'],
     wrapper: 'ms-2',
     label: 'block font-medium text-gray-700 dark:text-gray-200',
     description: 'text-gray-500 dark:text-gray-400'
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         base: `data-[state=checked]:bg-${color}-500 dark:data-[state=checked]:bg-${color}-400 focus-visible:ring-${color}-500 dark:focus-visible:ring-${color}-400`,
         icon: `group-data-[state=checked]:text-${color}-500 dark:group-data-[state=checked]:text-${color}-400`
       }])),
diff --git a/src/theme/tabs.ts b/src/theme/tabs.ts
index 394a2be4..6645ef6d 100644
--- a/src/theme/tabs.ts
+++ b/src/theme/tabs.ts
@@ -5,7 +5,7 @@ export default (options: Required<ModuleOptions>) => ({
     root: 'flex items-center gap-2',
     list: 'relative flex p-1 group',
     indicator: 'absolute transition-[translate,width] duration-200',
-    trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme?.transitions && 'transition-colors'],
+    trigger: ['relative inline-flex items-center shrink-0 data-[state=inactive]:text-gray-500 dark:data-[state=inactive]:text-gray-400 hover:data-[state=inactive]:text-gray-700 dark:hover:data-[state=inactive]:text-gray-200 font-medium rounded-md disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none', options.theme.transitions && 'transition-colors'],
     content: 'focus:outline-none w-full',
     leadingIcon: 'shrink-0',
     leadingAvatar: 'shrink-0',
@@ -14,7 +14,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, ''])),
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
       gray: ''
     },
     variant: {
@@ -95,7 +95,7 @@ export default (options: Required<ModuleOptions>) => ({
       list: 'border-l',
       indicator: '-left-px w-px'
     }
-  }, ...options.colors.map((color: string) => ({
+  }, ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'pill',
     class: {
@@ -109,7 +109,7 @@ export default (options: Required<ModuleOptions>) => ({
       indicator: 'bg-gray-900 dark:bg-white',
       trigger: 'data-[state=active]:text-white dark:data-[state=active]:text-gray-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 dark:focus-visible:outline-white'
     }
-  }, ...options.colors.map((color: string) => ({
+  }, ...(options.theme.colors || []).map((color: string) => ({
     color,
     variant: 'link',
     class: {
diff --git a/src/theme/toast.ts b/src/theme/toast.ts
index dbf8f760..efceb55e 100644
--- a/src/theme/toast.ts
+++ b/src/theme/toast.ts
@@ -15,7 +15,7 @@ export default (options: Required<ModuleOptions>) => ({
   },
   variants: {
     color: {
-      ...Object.fromEntries(options.colors.map((color: string) => [color, {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {
         icon: `text-${color}-500 dark:text-${color}-400`,
         progress: `bg-${color}-500 dark:bg-${color}-400`
       }])),