How to customize dark mode components theming

[javiersanp]

I would like to customize the color used by components in dark mode.

Only as an example, if use a light or dark button, the dark colors are hard coded to bg-gray-*

const colorClasses = {
dark: 'text-white bg-gray-800 hover:bg-gray-900 dark:bg-gray-800 dark:hover:bg-gray-700',
light:
'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600',

If I instead want to use bg-neutral-* classes, the only way I could figure is to pass custom props or classes to each component every time I use it.

Could you suggest me a way to do this globally?

[shinokada]

You add your neutral color in tailwind.config.cjs as explained in the docs.

[javiersanp]

Thank YouTube for your guidance. I had saw the docs but stll with doubs. What if I want to use a color for normal mode and another one fot dark? Is this correct?

<Button color='light dark:neutral' />