Nuxt UI Theme Generator Command

Generate a custom theme configuration for Nuxt UI v4.

Arguments

• <primary-color>: Primary semantic color (e.g., violet, blue, green, rose)
• --neutral <color>: Neutral color for backgrounds/borders (default: slate)
• --radius <size>: Border radius size (sm, md, lg, xl, full)

Available Colors

Tailwind v4 palette colors:

• red, orange, amber, yellow, lime, green, emerald, teal
• cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
• Neutrals: slate, gray, zinc, neutral, stone
• Utility colors: black, white, transparent, current

Instructions

1. Parse Arguments Extract primary color and optional overrides.

2. Generate app.config.ts Create or update theme configuration:

   export default defineAppConfig({
     ui: {
       theme: {
         colors: {
           primary: '<primary-color>',
           secondary: 'sky',
           success: 'emerald',
           info: 'blue',
           warning: 'amber',
           error: 'rose',
           neutral: '<neutral-color>'
         },
         radius: '<radius>'
       }
     }
   })
   

3. Generate CSS Variables (optional) If user wants custom shades, create in app.vue:

   :root {
     --ui-primary: var(--color-<primary>-500);
     --ui-primary-hover: var(--color-<primary>-600);
   }
   

4. Component-Level Customization Offer to customize specific components:

   export default defineAppConfig({
     ui: {
       button: {
         base: 'font-semibold',
         variants: {
           size: {
             xl: 'px-6 py-3 text-lg'
           }
         }
       }
     }
   })
   

5. Dark Mode Configuration Ensure color mode is enabled:

   // nuxt.config.ts
   export default defineNuxtConfig({
     ui: { colorMode: true }
   })
   

6. Preview Colors Show the user what their theme will look like:

   • Primary: Used for buttons, links, focus rings
   • Secondary: Alternative accent color
   • Success/Error/Warning/Info: Status indicators
   • Neutral: Backgrounds, borders, text

Example Usage

/nuxt-ui:theme violet --neutral zinc --radius lg

Creates a violet-themed configuration with zinc neutrals and large border radius.

Output

• Updated app.config.ts with theme
• CSS variable overrides if needed
• Preview of color usage across components
• Tips for further customization

Tips

• Use violet or indigo for professional apps
• Use emerald or teal for eco/health apps
• Use rose or pink for consumer/lifestyle apps
• Match neutral to primary undertone (cool primary → slate, warm primary → stone)