UTheme allow primary color change

[alexcroox]

Package

v4.x

Description

I'm building a multitenant SaaS, in the brand settings I'd like to let the user preview a color picker (from TW primary colors) choice on an example button, without overriding the entire app UI.

<UTheme
  :ui="{ colors: { primary: chosenColor } }"
>

however it seems currently UTheme is only for component overrides, not top level options like colors

[benjamincanac]

There's an ongoing wip PR to support variants in Theme component: #6031 we could do the same for colors for example to change all defaults to neutral to avoid repeating color="neutral".

However, I'm afraid what you're asking is technically not possible as colors are defined at build time and are linked to CSS variables that can be changed at runtime (app.config.ts), the theme is computed based on those colors. Do note you can define as many colors as you want in your nuxt.config.ts: https://ui.nuxt.com/docs/getting-started/theme/design-system#extend-colors