Nuxt•6mo ago

[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',
  },
});

1 Reply

RutbergOP•6mo ago

Also did try to specifically add a color called red in tailwind.config.ts to see if that would help, which it did not.

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        red: {
          50: '#FFEBEE',
          100: '#FFCDD2',
          200: '#EF9A9A',
          300: '#E57373',
          400: '#EF5350',
          500: '#F44336',
          600: '#E53935',
          700: '#D32F2F',
          800: '#C62828',
          900: '#B71C1C',
          950: '#7F0000',
        },
      },
    },
  },
};

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        red: {
          50: '#FFEBEE',
          100: '#FFCDD2',
          200: '#EF9A9A',
          300: '#E57373',
          400: '#EF5350',
          500: '#F44336',
          600: '#E53935',
          700: '#D32F2F',
          800: '#C62828',
          900: '#B71C1C',
          950: '#7F0000',
        },
      },
    },
  },
};

UPDATE: Since I am using an src/ dir, I solved it by simply moving the app.config.ts file into the src/ directory.

Gaming

Programming

[SOLVED] NuxtUI Color Change