search

L-Blondy / tw-colors

Tailwind plugin to easily add multiple color themes to your projects.
MIT License
456 stars 14 forks source link

remove theme-' from className #17

Closed ascaugusto closed 1 year ago

ascaugusto commented 1 year ago

All application with dark mode just use class="dark" class="light".

ascaugusto commented 1 year ago

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.

ascaugusto commented 1 year ago

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

L-Blondy commented 1 year ago

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

L-Blondy commented 1 year ago

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

ascaugusto commented 1 year ago

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

L-Blondy commented 1 year ago

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)

TomerBu commented 1 year ago

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}
    >