Nuxt•4w ago

With custom Colors all texts are black

Hey guys, i tried to implement more colors because only 7 defaults are way to less. but somehow after the changes all my button texts get black.

app.config.ts
ui: {
    colors: {
      primary: 'sky',
      secondary: 'blue',
      success: 'green',
      info: 'blue',
      warning: 'yellow',
      error: 'red',
      neutral: 'slate',
      test: 'purple'
    }
  }

app.config.ts
ui: {
    colors: {
      primary: 'sky',
      secondary: 'blue',
      success: 'green',
      info: 'blue',
      warning: 'yellow',
      error: 'red',
      neutral: 'slate',
      test: 'purple'
    }
  }

nuxt.config.ts
ui: {
    theme: {
      colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'test']
    }
  }

nuxt.config.ts
ui: {
    theme: {
      colors: ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'test']
    }
  }

<template>
  <UButton color="test">Button</UButton>
</template>

<template>
  <UButton color="test">Button</UButton>
</template>

9 Replies

kapa.ai•4w ago

Hi @Joshua Gerke. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I see the issue with your custom color implementation. The problem is that you've added a custom color 'test' but there's a mismatch in your configuration. The Issue Looking at your code, I can identify two problems: 1. You've included 'tertiary' in your nuxt.config.ts colors array, but it's not defined in your app.config.ts 2. You're using CSS variables for text colors that aren't being properly generated for your custom color The Solution To fix this issue, you need to ensure your configurations match and properly define your custom color: 1. First, make sure your nuxt.config.ts and app.config.ts color lists match exactly:

// nuxt.config.ts
ui: {
  theme: {
    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral', 'test']
  }
}

// nuxt.config.ts
ui: {
  theme: {
    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral', 'test']
  }
}

2. The text color issue happens because Nuxt UI uses CSS variables like text-(--ui-primary) for button text colors. When you add a custom color, you need to ensure these CSS variables are properly defined. According to the Nuxt UI documentation on colors, custom colors need to be defined in both places to work properly. 3. You might also need to add custom CSS variables for your new color in your CSS file:

:root {
  --ui-test: var(--ui-color-test-500);
}

.dark {
  --ui-test: var(--ui-color-test-400);
}

:root {
  --ui-test: var(--ui-color-test-500);
}

.dark {
  --ui-test: var(--ui-color-test-400);
}

This ensures that the text color for your custom "test" color will use the appropriate purple shade in both light and dark modes. The button component uses these CSS variables for styling text colors as shown in the Button theme documentation, which is why your text appears black (the default when a CSS variable isn't found). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Joshua GerkeOP•4w ago

@kapa.ai when i add this in app.config.ts: primary: 'sky', secondary: 'emerald', and this in nuxt.config.ts: 'primary', 'secondary', it works. but with this all texts are white: app.config.ts: colors: { primary: 'sky', secondary: 'emerald', slate: 'slate', gray: 'gray', zinc: 'zinc', stone: 'stone', red: 'red', orange: 'orange', amber: 'amber', yellow: 'yellow', lime: 'lime', green: 'green', emerald: 'emerald', teal: 'teal', cyan: 'cyan', sky: 'sky', blue: 'blue', indigo: 'indigo', violet: 'violet', purple: 'purple', fuchsia: 'fuchsia', pink: 'pink', rose: 'rose', }, nuxt.config.ts: colors: [ 'primary', 'secondary', 'slate', 'gray', 'zinc', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', ],

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand the issue you're facing with text colors when adding multiple custom colors to your Nuxt UI configuration. The problem is related to how Nuxt UI generates CSS variables for text colors in components. When you add all those Tailwind CSS colors directly, the component styling system doesn't know how to properly handle the text colors for them. Why this happens In Nuxt UI v3, the component system uses specific CSS variables like --ui-primary that are automatically generated for the semantic color aliases (primary, secondary, etc.). When you create buttons with these colors, the text color is determined by these variables. According to the Nuxt UI documentation on tokens, the framework creates CSS variables for each color alias that represent the default shade used in light and dark modes:

:root {
  --ui-primary: var(--ui-color-primary-500);
  /* other color variables */
}

.dark {
  --ui-primary: var(--ui-color-primary-400);
  /* other color variables */
}

:root {
  --ui-primary: var(--ui-color-primary-500);
  /* other color variables */
}

.dark {
  --ui-primary: var(--ui-color-primary-400);
  /* other color variables */
}

Solution Instead of adding all Tailwind colors directly, you should: 1. Keep the semantic color aliases (primary, secondary, etc.) 2. Add only the custom colors you need 3. Define CSS variables for your custom colors in your CSS file For example, if you want to add "purple" as a custom color:

// app.config.ts
ui: {
  colors: {
    primary: 'sky',
    secondary: 'emerald',
    success: 'green',
    info: 'blue',
    warning: 'yellow',
    error: 'red',
    neutral: 'slate',
    purple: 'purple'  // custom color
  }
}

// app.config.ts
ui: {
  colors: {
    primary: 'sky',
    secondary: 'emerald',
    success: 'green',
    info: 'blue',
    warning: 'yellow',
    error: 'red',
    neutral: 'slate',
    purple: 'purple'  // custom color
  }
}

// nuxt.config.ts
ui: {
  theme: {
    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral', 'purple']
  }
}

// nuxt.config.ts
ui: {
  theme: {
    colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral', 'purple']
  }
}

Then in your CSS file (e.g., app/assets/css/main.css), add:

:root {
  --ui-purple: var(--ui-color-purple-500);
}
.dark {
  --ui-purple: var(--ui-color-purple-400);
}

:root {
  --ui-purple: var(--ui-color-purple-500);
}
.dark {
  --ui-purple: var(--ui-color-purple-400);
}

This approach follows the Nuxt UI migration guide which explains that in v3, you should use the new design system with semantic color aliases rather than directly using all Tailwind colors. If you absolutely need all those colors, you might need to create custom components or extend the existing ones with your own styling logic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Joshua GerkeOP•4w ago

@kapa.ai okay strange thing is when i set purple to purple the text is white, when i set purple to violet the text is violet. but in tailwind Purple exist? https://tailwindcss.com/docs/colors#color-palette-reference

Colors - Core concepts

Using and customizing the color palette in Tailwind CSS projects.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your confusion about the text color behavior with the "purple" color in Nuxt UI. This is indeed a bit puzzling since purple does exist in the Tailwind CSS color palette. Based on the knowledge sources, I can explain what's happening: Why text is white with "purple" but colored with "violet" The issue relates to how Nuxt UI handles color variables and text contrast. When you set a color like "purple" in your configuration, Nuxt UI creates CSS variables like --ui-purple that are used for backgrounds, but it also needs to determine what text color to use on that background. For buttons and other components, Nuxt UI uses a system of compound variants to determine text colors. For example, in the Badge component theme, we can see how this works:

compoundVariants: [
  {
    color: 'primary',
    variant: 'solid',
    class: 'bg-(--ui-primary) text-(--ui-bg)'
  },
  // ...
]

compoundVariants: [
  {
    color: 'primary',
    variant: 'solid',
    class: 'bg-(--ui-primary) text-(--ui-bg)'
  },
  // ...
]

Notice how for solid variants, it uses text-(--ui-bg) which is white in light mode. This is likely what's happening with your "purple" color - it's defaulting to white text for contrast. When you use "violet" instead, it might be falling back to a different styling pattern or the contrast calculation is different. Possible solutions 1. Define custom CSS variables: You can explicitly define the text color for your purple buttons in your CSS:

:root {
  --ui-purple: var(--ui-color-purple-500);
}

.dark {
  --ui-purple: var(--ui-color-purple-400);
}

/* Add custom styling for purple buttons */
.bg-(--ui-purple) {
  color: white; /* or any color you want */
}

:root {
  --ui-purple: var(--ui-color-purple-500);
}

.dark {
  --ui-purple: var(--ui-color-purple-400);
}

/* Add custom styling for purple buttons */
.bg-(--ui-purple) {
  color: white; /* or any color you want */
}

2. Use component customization: You can customize the button component specifically for your purple color:

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      // Add custom compound variants for purple
      compoundVariants: [
        {
          color: 'purple',
          variant: 'solid',
          class: {
            base: 'bg-(--ui-purple) text-purple-950' // Use specific text color
          }
        }
      ]
    }
  }
})

// app.config.ts
export default defineAppConfig({
  ui: {
    button: {
      // Add custom compound variants for purple
      compoundVariants: [
        {
          color: 'purple',
          variant: 'solid',
          class: {
            base: 'bg-(--ui-purple) text-purple-950' // Use specific text color
          }
        }
      ]
    }
  }
})

3. Check your theme configuration: Make sure your theme configuration is correctly set up for both light and dark modes, as shown in the Nuxt UI tokens documentation. The behavior you're seeing suggests there might be some default handling in Nuxt UI for certain color names that's causing this difference between "purple" and "violet". If you need consistent behavior, I'd recommend explicitly defining the text colors for your custom colors. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Joshua GerkeOP•4w ago

okay maybe some community members can help me out here, some of the tailwind colors are not working and some are working. i want to add all tailwind colors to my color list so i can use "UButton color="anyTailwindColor"" here

Gaming

Programming

With custom Colors all texts are black

Did you find this page helpful?