Nuxt•14mo 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

kapa.ai•11/17/24, 9:30 PM

Hi @qb1t. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•11/17/24, 9:31 PM

----------------------
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

app.config.ts

file. Based on the information provided in the knowledge sources, here's how you can set the primary color to black:

First, ensure that your
```
app.config.ts
```
```
app.config.ts
```
file is in the root of your Nuxt project.
Update your
```
app.config.ts
```
```
app.config.ts
```
file as follows:

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:

Make sure you're using the latest version of Nuxt UI v2. You can update it in your
```
package.json
```
```
package.json
```
file Edge (https://ui.nuxt.com/getting-started/installation#edge).
Verify that your
```
nuxt.config.ts
```
```
nuxt.config.ts
```
file is correctly set up to use the
```
@nuxt/ui
```
```
@nuxt/ui
```
module:

If you're still having issues, you might need to clear your cache or restart your development server.
Remember that the
```
primary
```
```
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.
If you want to use a custom black color, you can define it in your file and then use it in your
```
app.config.ts
```
```
app.config.ts
```
. Here's an example:

```typescript
// tailwind.config.ts
export default <Partial<Config>>{
theme: {
extend: {
colors: {
black: {
50: '#f6f6f6',
100: '#e7e7e7',
// ... define other shades
900: '#000000',
950: '#000000'
}
}
}
}
}

kapa.ai•11/17/24, 9:31 PM

// app.config.ts
export default defineAppConfig({
ui: {
primary: 'black',
gray: 'cool'
}
})
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

----------------------

kapa.ai•11/17/24, 9:31 PM

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

qb1tOP•11/17/24, 9:40 PM

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