Dynamic/user-provided theme colors are not applied

Environment

│ ╭── Nuxt project info ───────────────────────────────────────────────────────╮
│ │                                                                            │
│ │  Operating system      Linux 6.17.2-061702-generic                         │
│ │  CPU                   AMD Ryzen 7 5700G with Radeon Graphics (16 cores)   │
│ │  Node.js version       v22.15.0                                            │
│ │  nuxt/cli version      3.31.2                                              │
│ │  Package manager       pnpm 10.25.0                                        │
│ │  Nuxt version          4.2.2                                               │
│ │  Nitro version         2.12.9                                              │
│ │  Builder               vite 7.2.6                                          │
│ │  Config                -                                                   │
│ │  Modules               -                                                   │
│ │                                                                            │
│ ╰────────────────────────────────────────────────────────────────────────────╯

Is this bug related to Nuxt or Vue?

Vue

Package

v4.x

Version

v4.2.1

Reproduction

https://codesandbox.io/p/devbox/blue-pond-v8pj28 - the button must be red, not green.

vite.config.ts:

{
  ui: {
    colors: {
      primary: "custom", // our new dynamic user-selected color will be called "custom"
      neutral: "slate"
    },
  },
}

main.css: --color-green-* ---> --color-custom-*.

index.vue: a custom :style="..." imitating dynamic application of a color defined in runtime.

Description

Currently if you define a custom color, use it for ui.colors.*, and try to update it in runtime, then new value is not being picked up.

Basically, how to achieve dynamic/user-provided colors like here (it's from this article) with Nuxt UI?

I suspect the issue is with CSS variables not being "transitive":

• Nuxt UI defines --ui-color-primary-50: var(--color-custom-primary-50, ); on :root
• A developer defines --color-custom-primary-50: oklch(0.742188 0.151562 20) on some element
• Oopsie Daisy! --ui-color-primary-50 is NOT set to oklch(0.742188 0.151562 20) on the element and descendants; you gotta set --ui-color-primary-50 directly which defeats the whole purpose of having a custom color

In other words, --A: var(--B); --B: var(--C); only sets A to the value of C when it all happens in one "compile"-time context. CSS experts please clarify if I'm making nonsense.

Additional context

I saw #3914 but this is IMO a bug and this one is more generic.

Also I'm not 100% sure I'm setting it up correctly and it's not a configuration issue.

Logs

Start with the reproduction and inspect vite.config.ts, main.css, and index.vue, focusing on how the custom color variables are defined and updated at runtime. Confirm whether changing the user-provided custom variables updates the Nuxt UI primary color, then make the button reflect the new color without requiring direct --ui-color-primary-* assignments.