Rutberg
Rutberg
PostsComments
NNuxt
Created by Rutberg on 6/1/2024 in #❓・help
[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'
  }
})
// 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',
  },
});
// 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',
  },
});
export default defineAppConfig({
  ui: {
    primary: 'red',
  },
});
3 replies