NuxtN
Nuxt8mo ago
35 replies
SamKaizen

Referencing css variables directly in app.config.ts

Hello Kapa

I have a neutral palette defined in my custom theme under assets/themes/default.css where i want to map neutral to a custom palette so i checked there does not seem to be a --ui-neutral in https://ui.nuxt.com/getting-started/theme#theme where it mentions "This is how the @theme is generated for each color alias:"

so inconvenient but fine i mapped the full -50 to -950 mapping using the tailwind color vars

now I'd like those to be picked up in app.config.ts like

colors: {
      // NOTE : ideally this should have been overwritten by the appropriate theme so keep an eye for unexpected rose accents :P
      primary: "rose",
      neutral: var(--ui-color-neutral),
    },


where rose is the fallback primary color

but this doesn't work..

any way to define the app.config.ts entries using css vars previously defined?
Nuxt UI
Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.
Theme - Nuxt UI
Was this page helpful?