Nuxt•3mo ago

Nuxt UI Theming : Nested primary color

Hello 🙂 If I crated this in my tailwind config :

    theme: {
        extend: {
            colors: {
                    main: {
                        '50': "#EFF1F5",
                        '100': "#E0E2EB",
                        '200': "#C0C6D8",
                        '300': "#A4ACC6",
                        '400': "#858FB2",
                        '500': "#66739F",
                        '600': "#515C80",
                        '700': "#3D4561",
                        '800': "#272D3F",
                        '900': "#14161F",
                        '950': "#0A0B10",
                        DEFAULT: '#66739F',
                    },
            },

    theme: {
        extend: {
            colors: {
                    main: {
                        '50': "#EFF1F5",
                        '100': "#E0E2EB",
                        '200': "#C0C6D8",
                        '300': "#A4ACC6",
                        '400': "#858FB2",
                        '500': "#66739F",
                        '600': "#515C80",
                        '700': "#3D4561",
                        '800': "#272D3F",
                        '900': "#14161F",
                        '950': "#0A0B10",
                        DEFAULT: '#66739F',
                    },
            },

And this in my nuxt config :

    ui: {
        primary: 'main',
    }

    ui: {
        primary: 'main',
    }

It works fine But if I write main this way :

brand: {
  main: {}
}

brand: {
  main: {}
}

It looks like this doesn't work in the nuxt conf :

primary: 'brand-main', // I tried 'braind.main' too

primary: 'brand-main', // I tried 'braind.main' too

Is there a way to nest my colors before making it the primary in nuxt ? Thanks 🙂

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Nuxt UI Theming : Nested primary color