Nuxt•2mo ago

Nuxt UI v3: Custom theme colours

In the latest Nuxt UI v3, how can I add custom colours to be used as primary and secondary that are not TailwindCSS colours? What I mean is that I want to define a palette different from TailwindCSS palette.

8 Replies

kapa.ai•2mo ago

Hi @AerodynamicPotato. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI v3, you can define custom colors for your theme that differ from the default Tailwind CSS palette. There are two main approaches to achieve this: Using CSS Variables with @theme Directive With Nuxt UI v3, you can use the CSS-first approach with the @theme directive in your CSS file:

@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

This approach is recommended in Nuxt UI v3 as mentioned in the UI Pro Docs Migration guide. Setting Primary and Secondary Colors After defining your custom colors, you can set them as your primary and secondary colors in your app.config.ts:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate'
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate'
    }
  }
})

Note that in Nuxt UI v3, the configuration structure has changed from v1. The colors are now defined under ui.colors instead of directly under ui as shown in the UI Pro Docs Migration guide. Important Considerations When creating custom colors, make sure to: 1. Define all shades from 50 to 950 as most of them are used in the components configuration. 2. You can use tools like uicolors.app to generate a complete color palette. 3. Avoid naming conflicts - don't use primary as a color name in your Tailwind config as it would conflict with the module-defined primary color. The colors you define can then be used in your components with classes like text-primary-500 dark:text-primary-400 or the shorthand text-primary which automatically adapts to light/dark mode. Remember that your custom colors need to be properly safelisted if you're using them dynamically, as explained in the Smart Safelisting documentation. Let me know if you need more specific guidance on implementing your custom color palette! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AerodynamicPotatoOP•2mo ago

@kapa.ai I added the following colours to my @theme in main.css

/* main.css */
  --color-fun-blue-50: #f1f7fe;
  --color-fun-blue-100: #e2eefc;
  --color-fun-blue-200: #bfdcf8;
  --color-fun-blue-300: #86c0f3;
  --color-fun-blue-400: #46a0ea;
  --color-fun-blue-500: #1e84d9;
  --color-fun-blue-600: #0f5faa;
  --color-fun-blue-700: #0e5296;
  --color-fun-blue-800: #10467c;
  --color-fun-blue-900: #133c67;
  --color-fun-blue-950: #0d2644;

  --color-tamarillo-50: #fff1f0;
  --color-tamarillo-100: #ffe1de;
  --color-tamarillo-200: #ffc8c2;
  --color-tamarillo-300: #ffa298;
  --color-tamarillo-400: #ff6d5d;
  --color-tamarillo-500: #ff402b;
  --color-tamarillo-600: #f7220b;
  --color-tamarillo-700: #d01905;
  --color-tamarillo-800: #ac1808;
  --color-tamarillo-900: #931c0f;
  --color-tamarillo-950: #4e0901;

/* main.css */
  --color-fun-blue-50: #f1f7fe;
  --color-fun-blue-100: #e2eefc;
  --color-fun-blue-200: #bfdcf8;
  --color-fun-blue-300: #86c0f3;
  --color-fun-blue-400: #46a0ea;
  --color-fun-blue-500: #1e84d9;
  --color-fun-blue-600: #0f5faa;
  --color-fun-blue-700: #0e5296;
  --color-fun-blue-800: #10467c;
  --color-fun-blue-900: #133c67;
  --color-fun-blue-950: #0d2644;

  --color-tamarillo-50: #fff1f0;
  --color-tamarillo-100: #ffe1de;
  --color-tamarillo-200: #ffc8c2;
  --color-tamarillo-300: #ffa298;
  --color-tamarillo-400: #ff6d5d;
  --color-tamarillo-500: #ff402b;
  --color-tamarillo-600: #f7220b;
  --color-tamarillo-700: #d01905;
  --color-tamarillo-800: #ac1808;
  --color-tamarillo-900: #931c0f;
  --color-tamarillo-950: #4e0901;

And configured my app.config.ts for ui to use fun-blue as a primary colour, but it's not working, and the CSS variables are not defined when running the project.

// app.config.ts
ui: {
    colors: {
      primary: 'fun-blue',
      secondary: 'tamarillo',
      neutral: 'slate',
    },
  }

// app.config.ts
ui: {
    colors: {
      primary: 'fun-blue',
      secondary: 'tamarillo',
      neutral: 'slate',
    },
  }

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue with your custom colors implementation. There are a couple of things that need to be fixed to make your custom colors work properly in Nuxt UI v3. Correct @theme Implementation Your CSS variables look correct, but the @theme directive needs to properly wrap them. Here's how your main.css should be structured:

@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --color-fun-blue-50: #f1f7fe;
  --color-fun-blue-100: #e2eefc;
  --color-fun-blue-200: #bfdcf8;
  --color-fun-blue-300: #86c0f3;
  --color-fun-blue-400: #46a0ea;
  --color-fun-blue-500: #1e84d9;
  --color-fun-blue-600: #0f5faa;
  --color-fun-blue-700: #0e5296;
  --color-fun-blue-800: #10467c;
  --color-fun-blue-900: #133c67;
  --color-fun-blue-950: #0d2644;

  --color-tamarillo-50: #fff1f0;
  --color-tamarillo-100: #ffe1de;
  --color-tamarillo-200: #ffc8c2;
  --color-tamarillo-300: #ffa298;
  --color-tamarillo-400: #ff6d5d;
  --color-tamarillo-500: #ff402b;
  --color-tamarillo-600: #f7220b;
  --color-tamarillo-700: #d01905;
  --color-tamarillo-800: #ac1808;
  --color-tamarillo-900: #931c0f;
  --color-tamarillo-950: #4e0901;
}

@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme {
  --color-fun-blue-50: #f1f7fe;
  --color-fun-blue-100: #e2eefc;
  --color-fun-blue-200: #bfdcf8;
  --color-fun-blue-300: #86c0f3;
  --color-fun-blue-400: #46a0ea;
  --color-fun-blue-500: #1e84d9;
  --color-fun-blue-600: #0f5faa;
  --color-fun-blue-700: #0e5296;
  --color-fun-blue-800: #10467c;
  --color-fun-blue-900: #133c67;
  --color-fun-blue-950: #0d2644;

  --color-tamarillo-50: #fff1f0;
  --color-tamarillo-100: #ffe1de;
  --color-tamarillo-200: #ffc8c2;
  --color-tamarillo-300: #ffa298;
  --color-tamarillo-400: #ff6d5d;
  --color-tamarillo-500: #ff402b;
  --color-tamarillo-600: #f7220b;
  --color-tamarillo-700: #d01905;
  --color-tamarillo-800: #ac1808;
  --color-tamarillo-900: #931c0f;
  --color-tamarillo-950: #4e0901;
}

Make sure you have the imports and that the CSS variables are properly wrapped in the @theme directive. CSS Import in Nuxt Config Ensure that your CSS file is properly imported in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css']
})

App Config Structure For Nuxt UI v3, your app.config.ts structure looks correct, but there's a slight difference in how colors are configured compared to v1. Here's the correct format:

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'fun-blue',
      secondary: 'tamarillo',
      neutral: 'slate'
    }
  }
})

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'fun-blue',
      secondary: 'tamarillo',
      neutral: 'slate'
    }
  }
})

Safelist Custom Colors You might also need to safelist your custom colors in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    safelistColors: ['fun-blue', 'tamarillo']
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro'],
  css: ['~/assets/css/main.css'],
  ui: {
    safelistColors: ['fun-blue', 'tamarillo']
  }
})

This ensures that Tailwind generates the necessary CSS classes for your custom colors, as explained in the Smart Safelisting documentation. Additional Troubleshooting If you're still having issues: 1. Make sure your CSS file is in the correct location (typically in assets/css/main.css) 2. Check that your imports are correct and that the file is being loaded 3. Verify that there are no errors in your browser console 4. Try clearing your browser cache or restarting your Nuxt development server These steps should help you get your custom colors working properly in Nuxt UI v3. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

AerodynamicPotatoOP•2mo ago

@kapa.ai the missing thing was the static keyword in main.css as follows:

@theme static {
  /* ... */
}

@theme static {
  /* ... */
}

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for sharing the solution! You're absolutely right - the static keyword is crucial when defining custom colors in Nuxt UI v3 with the @theme directive. The correct syntax for defining custom colors in your CSS file should be:

@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme static {
  --color-fun-blue-50: #f1f7fe;
  --color-fun-blue-100: #e2eefc;
  /* rest of your color definitions */
}

@import "tailwindcss";
@import "@nuxt/ui-pro";

@theme static {
  --color-fun-blue-50: #f1f7fe;
  --color-fun-blue-100: #e2eefc;
  /* rest of your color definitions */
}

The static keyword in the @theme directive tells Tailwind CSS that these are static theme values that should be available at build time. Without this keyword, the custom color variables might not be properly recognized by Tailwind CSS when generating the necessary utility classes. This is an important detail when working with custom colors in Nuxt UI v3, as it ensures your custom color palette is properly integrated with the Tailwind CSS system. Thanks for sharing this solution, as it will likely help others who are trying to implement custom colors in their Nuxt UI v3 projects! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@336887743366037504> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Nuxt UI v3: Custom theme colours

Did you find this page helpful?