Nuxt•2mo ago

custom colors NuxtUI & useColorMode

Can I use custom primary colors for themes? The idea is that, for example, in light mode the primary color should be blue and in dark mode the primary color should be yellow.

2 Replies

kapa.ai•2mo ago

Hi @MakotoPD. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, you can use custom primary colors for different color modes (light and dark) in Nuxt UI. The recommended approach is to override the relevant CSS variables in your main.css file using the :root selector for light mode and the .dark selector for dark mode. For example, to set the primary color to blue in light mode and yellow in dark mode:

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

:root {
  --ui-primary: var(--ui-color-primary-blue);   /* Use blue as primary in light mode */
}

.dark {
  --ui-primary: var(--ui-color-primary-yellow); /* Use yellow as primary in dark mode */
}

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

:root {
  --ui-primary: var(--ui-color-primary-blue);   /* Use blue as primary in light mode */
}

.dark {
  --ui-primary: var(--ui-color-primary-yellow); /* Use yellow as primary in dark mode */
}

Or, if you want to use specific shades:

:root {
  --ui-primary: var(--ui-color-primary-700); /* blue-700, if blue is your primary */
}

.dark {
  --ui-primary: var(--ui-color-primary-200); /* yellow-200, if yellow is your primary */
}

:root {
  --ui-primary: var(--ui-color-primary-700); /* blue-700, if blue is your primary */
}

.dark {
  --ui-primary: var(--ui-color-primary-200); /* yellow-200, if yellow is your primary */
}

You can also directly assign color values:

:root {
  --ui-primary: blue;
}

.dark {
  --ui-primary: yellow;
}

:root {
  --ui-primary: blue;
}

.dark {
  --ui-primary: yellow;
}

This approach allows you to fully customize the primary color for each color mode, independent of the global theme configuration. This is the recommended way as described in the Nuxt UI documentation for theming and color customization Nuxt UI Theme: Colors. The useColorMode composable (from @nuxtjs/color-mode or @vueuse/core) will handle toggling the .dark class on the <html> or <body> element, so your CSS will automatically apply the correct colors when the mode changes Nuxt UI Color Mode. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

custom colors NuxtUI & useColorMode

Did you find this page helpful?