NuxtN
Nuxt•2y ago•
2 replies
Rutberg

[SOLVED] NuxtUI Color Change

Hi, I've battling an issue for a while now regarding NuxtUI theme, simply trying to change the primary color from the standard green to a red one. I read the docs, telling me I'm able to change the ui in app.config.ts
// From docs
export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

I have done this but the color still won't change. I did also see a stackoverflow thread regarding a similar issue solved by adjusting the tailwind.config.ts with a custom color, but this didn't work either for me.

Any pointers would be much appreciated.

nuxt.config.ts
:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  srcDir: 'src',
  serverDir: 'server',
  modules: ['@nuxt/ui'],
  extends: ['@nuxt/ui-pro'],
  css: ['~/assets/scss/main.scss'],
  ui: {
    icons: {
      dynamic: true,
    },
  },
  colorMode: {
    preference: 'light',
  },
});


app.config.ts:
export default defineAppConfig({
  ui: {
    primary: 'red',
  },
});
Was this page helpful?