How to create Theme & Variants

devtrix commented 1 year ago

I didn't see a Discussion section so I am asking here. Forgive me if I overlooked something. How can I create a theme with light & dark variants? For example, Halloween Theme with Light & Dark variants. I am confused as to how to nest the variants. Does the theme name take an array of light & dark functions?

Thanks in advance.

L-Blondy commented 1 year ago

Hi @devtrix

Not sure I understood your question.

That said you can create an halloween dark and light theme like this

createThemes({
   'halloween-light': light({ 
      'primary': 'steelblue',
      'secondary': 'darkblue',
   }),
   'halloween-dark': dark({ 
      'primary': 'turquoise',
      'secondary': 'tomato',
   }),
})

You just need to apply the desired theme on... let's say the html element as follows

<html data-theme='halloween-light'>

In most cases you do not need variants at all, the colors adapt automatically to the theme you used on the html element.

If you want to make use of nested themes, you can declare the nested theme on any element, the children from now on will be themed accordingly.

<html data-theme='halloween-light'>

    ... 

    <button class='bg-primary'>
        halloween light primary applied 
    </button>

    ...

    <div data-theme='halloween-dark'>
        <button class='bg-primary'>
            halloween dark primary applied  
        </button>
    </div>

Hope that helps

L-Blondy commented 1 year ago

I enabled discussions for the repo, let's follow up there if you need further help!

L-Blondy / tw-colors

How to create Theme & Variants #29