Nuxt•4d ago

NuxtUI v2 make primary color black

Hi I am using nuxt ui v2 in my project and I want my app to be light theme with black elements on it, but I am not able to change my primary color to just black (or any other color) I don't know what to do, it looks like if the ui library was just completely ignoring my app config. My debug app config that doesn't work: app.config.ts

export default defineAppConfig({
  ui: {
    primary: 'blue',
    gray: 'cool'
  },
});

export default defineAppConfig({
  ui: {
    primary: 'blue',
    gray: 'cool'
  },
});

Even with this the primary color is still green

3 Replies

kapa.ai•4d ago

Hi @qb1t. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To change the primary color in Nuxt UI v2 to black or any other color, you need to make sure you're configuring it correctly in your app.config.ts file. Based on the information provided in the knowledge sources, here's how you can set the primary color to black: 1. First, ensure that your app.config.ts file is in the root of your Nuxt project. 2. Update your app.config.ts file as follows:

export default defineAppConfig({
  ui: {
    primary: 'black',
    gray: 'cool'
  }
})

export default defineAppConfig({
  ui: {
    primary: 'black',
    gray: 'cool'
  }
})

This configuration should set the primary color to black Getting-started > Colors (https://ui.nuxt.com/getting-started/theming#colors). If this doesn't work, there might be a few things to check: 1. Make sure you're using the latest version of Nuxt UI v2. You can update it in your package.json file Edge (https://ui.nuxt.com/getting-started/installation#edge). 2. Verify that your nuxt.config.ts file is correctly set up to use the @nuxt/ui module:

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

3. If you're still having issues, you might need to clear your cache or restart your development server. 4. Remember that the primary color in Nuxt UI is used as a default for many components. You may need to update specific components if you want them all to be black. 5. If you want to use a custom black color, you can define it in your tailwind.config.ts file and then use it in your app.config.ts. Here's an example:

// tailwind.config.ts
export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        black: {
          50: '#f6f6f6',
          100: '#e7e7e7',
          // ... define other shades
          900: '#000000',
          950: '#000000'
        }
      }
    }
  }
}
// app.config.ts
export default defineAppConfig({
  ui: {
    primary: 'black',
    gray: 'cool'
  }
})

// tailwind.config.ts
export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        black: {
          50: '#f6f6f6',
          100: '#e7e7e7',
          // ... define other shades
          900: '#000000',
          950: '#000000'
        }
      }
    }
  }
}
// app.config.ts
export default defineAppConfig({
  ui: {
    primary: 'black',
    gray: 'cool'
  }
})

This approach allows you to define a custom black color with all the necessary shades Pro > Getting-started > Structure > nuxt.config.ts Part 2 (https://ui.nuxt.com/pro/getting-started/structure#nuxtconfigts). If you're still experiencing issues after trying these steps, it might be worth checking for any conflicting configurations or reaching out to the Nuxt UI community for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

qb1tOP•4d ago

Good response but didn't fully resolve my issue now all my components are white

Gaming

Programming

NuxtUI v2 make primary color black