Nuxt•2d ago

Nuxt UI custom colors

@kapa.ai It's not clear to me exactly how based on the currently released versions of Nuxt and Nuxt UI how I can specify and use a custom colour in my components and pages, is there any detailed information available on how to do this in the current versions. What files need updated? I'd prefer to not use "color mode" but may want the option to use it at a later date. Lastly would it be wise to enable nuxt 4 compatibility mode?

11 Replies

kapa.ai•2d ago

Hi @MrSacs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add and use custom colors in Nuxt UI (current versions), you need to update both your app.config.ts and your Nuxt configuration (nuxt.config.ts). Here’s a step-by-step guide based on the official documentation: 1. Define Your Custom Color Alias First, add your custom color (e.g., tertiary) in app.config.ts under the ui.colors key:

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      tertiary: 'indigo' // or any Tailwind color name
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      tertiary: 'indigo' // or any Tailwind color name
    }
  }
})

See example in the docs 2. Register the Alias in Your Nuxt Config You must also register your new color alias in the theme.colors array in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  ui: {
    theme: {
      colors: [
        'primary',
        'secondary',
        'tertiary', // your custom color
        'info',
        'success',
        'warning',
        'error'
      ]
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  ui: {
    theme: {
      colors: [
        'primary',
        'secondary',
        'tertiary', // your custom color
        'info',
        'success',
        'warning',
        'error'
      ]
    }
  }
})

See example in the docs 3. Use the Custom Color in Components Once registered, you can use your custom color alias in Nuxt UI components:

<template>
  <UButton color="tertiary">Custom Color Button</UButton>
</template>

<template>
  <UButton color="tertiary">Custom Color Button</UButton>
</template>

See how color props work 4. (Optional) Customize Shades or CSS Variables If you want to further customize how the color appears (e.g., which shade is used in light/dark mode), you can override the relevant CSS variables in your main.css:

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

:root {
  --ui-tertiary: var(--ui-color-tertiary-700);
}
.dark {
  --ui-tertiary: var(--ui-color-tertiary-200);
}

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

:root {
  --ui-tertiary: var(--ui-color-tertiary-700);
}
.dark {
  --ui-tertiary: var(--ui-color-tertiary-200);
}

See CSS variable customization 5. Color Mode (Optional) You do not need to enable color mode to use custom colors. If you want to add color mode support later, you can enable it in your config:

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

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

See color mode option 6. Nuxt 4 Compatibility Mode The knowledge sources mention using the @source directive for content detection if you are not using Nuxt 4 compatibility mode, but do not provide a recommendation on whether to enable it. If you are on Nuxt 3, you do not need to enable compatibility mode unless you have a specific reason (such as using features from Nuxt 4). If you are unsure, you can refer to the Nuxt upgrade guide for more details. --- Summary:
- Add your custom color in app.config.ts under ui.colors. - Register the alias in nuxt.config.ts under ui.theme.colors. - Use the alias in your components. - Optionally, customize CSS variables for more control. - Color mode is optional and can be enabled/disabled as needed. - Nuxt 4 compatibility mode is not required unless you need Nuxt 4 features. If you need more advanced theming, refer to the Nuxt UI theme documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

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

nathanr•2d ago

Hi @MrSacs I can help with this as I sorted it a couple weeks again, you first have to define the colours using a similar schema as below

@theme static {
    /* DEFINING COLOURS */
    --color-Yellow-50: #FDFBE4;
    --color-Yellow-100: #FCF8D1;
    --color-Yellow-200: #F9F2AB;
    --color-Yellow-300: #F6ED85;
    --color-Yellow-400: #F4E75F;
    --color-Yellow-500: #F1E139;
    --color-Yellow-600: #E2D010;
    --color-Yellow-700: #AEA00C;
    --color-Yellow-800: #796F09;
    --color-Yellow-900: #453F05;
    --color-Yellow-950: #2B2703;
}

@theme static {
    /* DEFINING COLOURS */
    --color-Yellow-50: #FDFBE4;
    --color-Yellow-100: #FCF8D1;
    --color-Yellow-200: #F9F2AB;
    --color-Yellow-300: #F6ED85;
    --color-Yellow-400: #F4E75F;
    --color-Yellow-500: #F1E139;
    --color-Yellow-600: #E2D010;
    --color-Yellow-700: #AEA00C;
    --color-Yellow-800: #796F09;
    --color-Yellow-900: #453F05;
    --color-Yellow-950: #2B2703;
}

export default defineAppConfig({
  ui: {
    colors: {
      primary: "Yellow",
    },
  },
});

export default defineAppConfig({
  ui: {
    colors: {
      primary: "Yellow",
    },
  },
});

Then you can use either class=" text-Primary-500"> or whatever the name is

MrSacsOP•2d ago

@nathanr Do you need to define all the variations of a colours as you've shown above?

nathanr•2d ago

No you don't if you don't need them Typically it defaults to 500

nathanr•2d ago

However you can use sites like this to get colour shades https://tailwindcss.color-get.com/code/dcc636

goldenrod #dcc636 Tailwind CSS Color Code

nathanr•2d ago

https://uicolors.app/generate/73cc24

Tailwind CSS Color Generator | UI Colors

Generate, edit, save and share Tailwind CSS color shades based on a given hexcode or HSL color.

MrSacsOP•2d ago

Nice one, thank you very much.

nathanr•2d ago

No worries give me a shout if you need anything, I recently did the upgrade for all Nuxt UI3 and TW4 stuff. Also make sure you have static in your theme, otherwise it won't load the colour unless it is defined elsewhere (app.config.ts / main.css root I believe)

MrSacsOP•2d ago

Yeah I had a weird one earlier I notice where I open another browser and I saw a flash of my colours and then it just went white so I'm gonna go through a lot of it to see whats happening. Fun times 😉 This is interesting I got all my colours to work. All I had to do was change the names of them in the theme from --color-somename to --color-somename-500

nathanr•2d ago

:root {
    --ui-primary: var(--ui-color-primary-500);
    --ui-secondary: var(--ui-color-secondary-500);
    --ui-success: var(--ui-color-success-500);
    --ui-info: var(--ui-color-info-500);
    --ui-warning: var(--ui-color-warning-500);
    --ui-error: var(--ui-color-error-500);

    --ui-text: var(--ui-color-black);
    /* --ui-bg: var(--ui-color-secondary-200); */
}

:root {
    --ui-primary: var(--ui-color-primary-500);
    --ui-secondary: var(--ui-color-secondary-500);
    --ui-success: var(--ui-color-success-500);
    --ui-info: var(--ui-color-info-500);
    --ui-warning: var(--ui-color-warning-500);
    --ui-error: var(--ui-color-error-500);

    --ui-text: var(--ui-color-black);
    /* --ui-bg: var(--ui-color-secondary-200); */
}

I actually missed an important bit of code for the main.css which would have helped. So sort of have to redefine primary again here

Gaming

Programming

Nuxt UI custom colors

Did you find this page helpful?