May I ask how I should customize the theme color, writing the color value directly does not seem to work, the document does not give the definition of custom color

[ghost]

nuxt3.7 "@nuxthq/ui": "^2.7.0",

export default defineAppConfig({ ui: { primary: "#9147ff", gray: "cool", }, });

[benjamincanac]

The ui.primary should be one of the color defined in your tailwind.config. This color needs to have all the shades: https://tailwindcss.com/docs/customizing-colors#using-custom-colors

You can read more https://ui.nuxtlabs.com/getting-started/theming#colors

[ghost]

应该是 中定义的颜色之一。这种颜色需要具有所有色调：https://tailwindcss.com/docs/customizing-colors#using-custom-colors`ui.primary``tailwind.config`

您可以阅读更多 https://ui.nuxtlabs.com/getting-started/theming#colors

app.config.ts export default defineAppConfig({ ui: { primary: "primary1", gray: "cool", }, });

tailwind.config.js / @type {import('tailwindcss').Config} */ module.exports = { content: [ "./components/*/.{js,vue,ts}", "./layouts//*.vue", "./pages/*/.vue", "./plugins/*/.{js,ts}", "./nuxt.config.{js,ts}", "./app.config.{js,ts}", ], theme: { colors: { primary1: "#9147ff", }, }, };

Thanks for the reply, I tried to modify, the button was modified, but it became white

did not get the desired color

[benjamincanac]

Like mentioned in my previous comment, you cannot use colors that don't have shades, try to use any of the tailwind colors or provide your own will shades from 50 to 950.

There are a thousand sites on Google to generate those shades from a color: https://www.tailwindshades.com/

[ghost]

Like mentioned in my previous comment, you cannot use colors that don't have shades, try to use any of the tailwind colors or provide your own will shades from 50 to 950.

There are a thousand sites on Google to generate those shades from a color: https://www.tailwindshades.com/

Thanks Reply

tailwind.config.js /* @type {import('tailwindcss').Config} / module.exports = { theme: { colors: { "electric-violet": { DEFAULT: "#9147FF", 50: "#FFFFFF", 100: "#F3EAFF", 200: "#DAC1FF", 300: "#C299FF", 400: "#A970FF", 500: "#9147FF", 600: "#6F0FFF", 700: "#5600D6", 800: "#3F009E", 900: "#290066", 950: "#1E004A", }, }, }, };

app.config.ts export default defineAppConfig({ ui: { primary: "electric-violet", }, });

The button background has got the desired color, but the text is black, how should I change it to white

[benjamincanac]

This might be because of the dark mode, if you haven't implemented it you should disable it: https://ui.nuxtlabs.com/getting-started/theming#dark-mode

[ghost]

This might be because of the dark mode, if you haven't implemented it you should disable it: https://ui.nuxtlabs.com/getting-started/theming#dark-mode

ok, perfect, thanks for your patience and guidance