How to create a black & white only theme in Nuxt UI v3

[omar-labana]

Description

I want to configure my Nuxt UI v3 project only to use black and white colors with the neutral palette from Tailwind, similar to the one found in shadcn. I understand Nuxt UI supports Tailwind CSS theming, but I’m unsure of the best/recommended way to override all component colors globally

[HugoRCD]

@omar-labana You can override the theme colors in your main.css like this:

:root {
  --ui-primary: black;
  --ui-bg: white;
}

.dark {
  --ui-primary: white;
  --ui-bg: #090909;
}

And set all your buttons, inputs etc... to color neutral.

For the button:

export default defineAppConfig({
  ui: {
    button: {
      defaultVariants: {
        color: 'neutral'
      }
    }
  }
})

[omar-labana]

@HugoRCD I've done something similar but found it a bit redundant to go over all the components and set color variants for them, can't it be through module configs?

[HugoRCD]

@omar-labana We have plans to try to solve this using global defaultVariants as described in #2934 !