Can't Custom default props in app.config.ts

[narr07]

Environment

---

• Operating System: Darwin
• Node Version: v22.14.0
• Nuxt Version: 3.16.0
• CLI Version: 3.23.0
• Nitro Version: 2.11.6
• Package Manager: [email protected]
• Builder: -
• User Config: modules, devtools, css, content, future, compatibilityDate, eslint
• Runtime Modules: @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], @nuxt/[email protected], @nuxt/[email protected], @vueuse/[email protected], @nuxthub/[email protected]
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Version

v3.16.0

Reproduction

https://codesandbox.io/p/devbox/stoic-curran-tvdyvz

Description

The default card not override with custom

// app/app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: "permadi",
      neutral: "slate",
    },
    card: {
      slots: {
        root: "bg-primary-300 ring-2 ring-primary-900 divide-y divide-primary-900 rounded-[calc(var(--ui-radius)*2)]",
        header: "p-4 sm:px-6",
        body: "p-4 sm:p-6",
        footer: "p-4 sm:px-6",
      },
    },
  },
});

This main.css

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

@theme static {
  --font-sans: "Host Grotesk", sans-serif;
  --font-title: "Sofia Sans", sans-serif;

  --color-permadi-50: #edf5f3;
  --color-permadi-100: #d7e9e4;
  --color-permadi-200: #c1ddd5;
  --color-permadi-300: #abd1c6;
  --color-permadi-400: #80aea5;
  --color-permadi-500: #568c85;
  --color-permadi-600: #2b6964;
  --color-permadi-700: #004643;
  --color-permadi-800: #023230;
  --color-permadi-900: #031e1c;
  --color-permadi-950: #050a09;
}

body {
  @apply bg-white;
}

Additional context

No response

Logs

[narr07]

The ring and the bg-card not override from app.config.ts

[HugoRCD]

@narr07 To use a custom color in primary, you need to add the new name to your nuxt.config.ts

https://ui.nuxt.com/getting-started/theme#colors

[luismanolo]

I have the same problem.

This is my nuxt.config.js:

This is my app.config.js:

This is my code:

And this is my default (primary) color submit button:

Many thanks in advance.

[HugoRCD]

@luismanolo Could you make a reproduction because I can't reproduce your error locally?

[luismanolo]

Sorry.

The app.config.ts file was in the project root, not in the app/ directory.

Everything is fine for me.

Many thanks.