decide about a standard way to define dark/light modes.

[TheHadiAhmadi]

currently there is no standard way to make a page or a section of a page appear in dark mode, in tabler theme we can enable dark mode like this:

<El class={classname('app', {theme: 'dark')}>
 ... dark mode
</El>

or

<div class="y-app y-app-theme-dark">...</div>

and for daisyui we should add data-theme="dark" attribute for the element.

what is the preferred way to do this?

[pournasserian]

We can add a property (theme) to El component which adds the class. @saadeghi: For DaisyUI: it should be class based. Right now, it is attribute based (data-theme)

[saadeghi]

To change this behavior you can replace [data-theme=NAME] selectors to a class name. These are the themes: https://unpkg.com/browse/[email protected]/dist/themes.css
You can disable them in Tailwind config
https://daisyui.com/docs/themes/#-2
And use them with another selector.

Edit:
This is why I chose data-theme method over class name in daisyUI:

• to avoid confusion and conflict of having multiple theme class names in the same element
• to be independent from Tailwind's purge and avoid confusion with Tailwind's dark class.
• in daisyUI you can have themes with any name so using the theme name as a data value makes more sense than generating a class name for it.
• using data-theme is a common practice on many big component libraries including MUI, Bootstrap, etc and many theme handling scripts and libraries already support this method.

[pournasserian]

To change this behavior you can replace [data-theme=NAME] selectors to a class name. These are the themes: https://unpkg.com/browse/[email protected]/dist/themes.css You can disable them in Tailwind config https://daisyui.com/docs/themes/#-2 And use them with another selector.

Edit: This is why I chose data-theme method over class name in daisyUI:

• to avoid confusion and conflict of having multiple theme class names in the same element
• to be independent from Tailwind's purge and avoid confusion with Tailwind's dark class.
• in daisyUI you can have themes with any name so using the theme name as a data value makes more sense than generating a class name for it.
• using data-theme is a common practice on many big component libraries including MUI, Bootstrap, etc and many theme handling scripts and libraries already support this method.

Thank you @saadeghi @TheHadiAhmadi please proceed

[TheHadiAhmadi]

Yes, for daisyui project which has many themes, it is a good idea to have data attribute for themes.

@pournasserian should we do for yesvelte?

[pournasserian]

Yes, for daisyui project which has many themes, it is a good idea to have data attribute for themes.

@pournasserian should we do for yesvelte?

Having a property to define theme seems to be a good solution.

[TheHadiAhmadi]

For El's theme prop, what values should be available? only 'dark' | 'light' or string?

should it set an attribute for element or add a class?

<El theme="dark">...</El>

<!-- add attribute -->
<div class="y-el" y-el-theme="dark">
....
</div>

<!-- or add class -->
<div class="y-el y-el-theme-dark">
....
</div>

daisyui and bootstrap uses data-theme and data-bs-theme attributes, and we are free to choose between class or attribute.

@saadeghi @pournasserian Which solution do you prefer?

for daisyui it would be:

class based:
.y-el-theme-light
.y-el-theme-dark
.y-el-theme-cupcake
.y-el-theme-bumblebee
.y-el-theme-emerald
.....

attribute based:
[y-el-theme="light"]
[y-el-theme="dark"]
[y-el-theme="cupcake"]
[y-el-theme="bumblebee"]
[y-el-theme="emerald"]
.....