[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

ui

app.config.ts

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

tailwind.config.ts

with a custom color, but this didn't work either for me.

Any pointers would be much appreciated.

nuxt.config.ts

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

app.config.ts

export default defineAppConfig({
  ui: {
    primary: 'red',
  },
});

export default defineAppConfig({
  ui: {
    primary: 'red',
  },
});

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

ui

app.config.ts

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

tailwind.config.ts

with a custom color, but this didn't work either for me.

Any pointers would be much appreciated.

nuxt.config.ts

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

app.config.ts

export default defineAppConfig({
  ui: {
    primary: 'red',
  },
});

export default defineAppConfig({
  ui: {
    primary: 'red',
  },
});

[SOLVED] NuxtUI Color Change

Similar Threads

[SOLVED] NuxtUI Color Change

Similar Threads

Similar Threads

Similar Threads