diff --git a/docs/content/1.getting-started/3.theming.md b/docs/content/1.getting-started/3.theming.md
index eec59e89..3c6908a0 100644
--- a/docs/content/1.getting-started/3.theming.md
+++ b/docs/content/1.getting-started/3.theming.md
@@ -13,13 +13,13 @@ Components are based on a `primary` and a `gray` color. You can change them in y
 ```ts [app.config.ts]
 export default defineAppConfig({
   ui: {
-    primary: 'sky',
+    primary: 'green',
     gray: 'cool'
   }
 })
 ```
 
-As this module uses TailwindCSS under the hood, you can use any of the [TailwindCSS colors](https://tailwindcss.com/docs/customizing-colors#color-palette-reference) or your own custom colors. By default, the `primary` color is `sky` and the `gray` color is `cool`.
+As this module uses TailwindCSS under the hood, you can use any of the [TailwindCSS 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`.
 
 To provide dynamic colors that can be changed at runtime, this module uses CSS variables. As TailwindCSS already has a `gray` color, the module automatically renames it to `cool` to avoid conflicts (`coolGray` was renamed to `gray` when Tailwind CSS v3.0 was released).
 
diff --git a/src/module.ts b/src/module.ts
index 8ec74d02..08fb29d4 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -115,7 +115,7 @@ export default defineNuxtModule<ModuleOptions>({
 
       nuxt.options.appConfig.ui = {
         ...nuxt.options.appConfig.ui,
-        primary: 'sky',
+        primary: 'green',
         gray: 'cool',
         colors: variantColors
       }