Theming not works with Nuxt UI Pro

carlosvaldesweb commented 8 months ago

Environment

Nuxt project info: (copied to clipboard) 9:41:06 AM

Operating System: Darwin
Node Version: v20.9.0
Nuxt Version: 3.8.2
CLI Version: 3.10.0
Nitro Version: 2.8.1
Package Manager: npm@10.1.0
Builder: -
User Config: css, extends, modules, eslint, image, runtimeConfig, imports, ui, devtools, nitro
Runtime Modules: @nuxt/ui@2.12.0, @nuxt/image@1.1.0, @nuxtjs/eslint-module@4.1.0, @vueuse/motion/nuxt@2.0.0, @nuxtjs/i18n@8.0.0-rc.11
Build Modules: -

Version

3.8.2

Reproduction

export default defineAppConfig({ ui: { primary: "violet", gray: "slate", "landing.section": { wrapper: "py-0 sm:py-0 md:py-0", }, landingSection: { wrapper: "py-0 sm:py-0 md:py-0", }, }, });

Description

When i try to modify the ui from landing section it does not works, i'm adding the code in reproduction to app.config.ts

Additional context

No response

Logs

No response

benjamincanac commented 8 months ago

You should use sub objects:

export default defineAppConfig({
  ui: {
    primary: 'violet',
    gray: 'slate',
    landing: {
      section: {
        wrapper: 'py-0 sm:py-0 md:py-0"'
      }
    }
  }
})

benjamincanac commented 8 months ago

You can read more about this here: https://ui.nuxt.com/pro/guide/usage#appconfigts

nuxt / ui