remove theme-' from className about tw-colors HOT 7 CLOSED

If you remove theme- from the class name we can set default themes using a empty string on the createTheme object.
createThemes({
"": {
'primary': 'steelblue',
'secondary': 'darkblue',
'brand': '#F3F3F3',
},
dark: {
'primary': 'turquoise',
'secondary': 'tomato',
'brand': '#4A4A4A',
},
})
The first colors will be the default theme.

from tw-colors.

My particular problem is use the lib with storybook-tailwind-dark-mode. The light theme needs to apply by default (class="")

from tw-colors.

If you remove theme- from the class name we can set default themes using a empty string on the createTheme object. createThemes({ "": { 'primary': 'steelblue', 'secondary': 'darkblue', 'brand': '#F3F3F3', }, dark: { 'primary': 'turquoise', 'secondary': 'tomato', 'brand': '#4A4A4A', }, }) The first colors will be the default theme.

This wouldn't work

from tw-colors.

My particular problem is use the lib with storybook-tailwind-dark-mode. The light theme needs to apply by default (class="")

class="" would not work and even if it did it would break nested themes.

You can write a custom Storybook decorator and add the toggle button by yourself as mentionned here.

Or you can ask the storybook-tailwind-dark-mode maintainer to add an option to configure a className for the light mode

from tw-colors.

@L-Blondy How can I set one theme by default with tw-colors?

from tw-colors.

Simply apply the className of the theme on some DOM element. You can then toggle the dark theme lower in the DOM if it makes sense in your case (see the nested themes docs)

from tw-colors.

Thanks for the plugin! just what i was looking for.

Next Theme also uses a class="dark" or class="light" on the body,
Maybe you can add a configuration for the className?

I Agree it shouldn't be empty, but it makes sense to enable className configuration.

I Ended up with something like this in order to adapt the className to the plugin:

 <NextThemeProvider
      **value={{dark: 'theme-dark', light: 'theme-light'}}**
      attribute="class"
      defaultTheme="system"
      enableSystem
      {...props}
    >

from tw-colors.