diff --git a/docs/pages/index.vue b/docs/pages/index.vue
index 83002108..b9535f22 100644
--- a/docs/pages/index.vue
+++ b/docs/pages/index.vue
@@ -49,28 +49,6 @@ export default defineNuxtConfig({
       Options
     </h2>
 
-    <p>- `primary`</p>
-
-    <p>Define the primary variant. Defaults to `indigo`. You can specify your own object of colors like here:</p>
-
-    <p class="font-medium">
-      Example:
-    </p>
-
-    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
-      <code class="text-sm">
-import { defineNuxtConfig } from 'nuxt3'
-
-export default defineNuxtConfig({
-  buildModules: [
-    '@nuxthq/ui'
-  ],
-  ui: {
-    primary: 'blue'
-  }
-})</code>
-    </pre>
-
     <p>- `prefix`</p>
 
     <p>Define the prefix of the imported components. Defaults to `u`.</p>
@@ -93,6 +71,34 @@ export default defineNuxtConfig({
 })</code>
     </pre>
 
+    <p>- `colors.primary`</p>
+
+    <p>Define the primary variant. Defaults to `indigo`. You can specify your own object of colors like here:</p>
+
+    <p class="font-medium">
+      Example:
+    </p>
+
+    <pre class="bg-tw-gray-900 rounded-md text-tw-white px-4">
+      <code class="text-sm">
+import { defineNuxtConfig } from 'nuxt3'
+
+export default defineNuxtConfig({
+  buildModules: [
+    '@nuxthq/ui'
+  ],
+  ui: {
+    colors: {
+      primary: 'blue'
+    }
+  }
+})</code>
+    </pre>
+
+    <p>- `colors.gray`</p>
+
+    <p>Define the gray variant. Defaults to `zinc`. You can like the `primary` color specify your own object. https://github.com/antfu/unocss/blob/main/packages/preset-uno/src/theme/colors.ts</p>
+
     <p>- `unocss.shortcuts`. Defaults to `[]`.</p>
 
     <p>Define UnoCSS shortcuts: https://github.com/antfu/unocss#shortcuts.</p>
diff --git a/src/index.ts b/src/index.ts
index 2260b7f6..5c4ba41e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -8,15 +8,13 @@ export default defineNuxtModule({
   name: '@nuxthq/ui',
   configKey: 'ui',
   async setup (_options, nuxt) {
-    const prefix = _options?.prefix || 'u'
-    const primary = _options?.primary || 'indigo'
-
+    const { prefix = 'u', colors: { primary = 'indigo', gray = 'zinc' } = {} } = _options || {}
     const { shortcuts = [], rules = [], variants = [], theme = {} } = _options?.unocss || {}
 
     const options: UnocssNuxtOptions = {
       theme: {
         colors: {
-          gray: colors?.zinc,
+          gray: typeof gray === 'object' ? gray : (colors && colors[gray]),
           primary: typeof primary === 'object' ? primary : (colors && colors[primary])
         },
         ...theme