A few issues about dark-mode-toggle HOT 4 CLOSED

The latest release has added CSS ::part() styling, this should allow you to fully match the look of Material.

Regarding the flashing of the wrong theme, do you use a dark class or the two CSS files approach (see README)? The two CSS files approach usually has less of this undesirable effect, but in the end you have to accept that you are “fighting” the browser default by overriding the theme.

Hope this helps, closing the Issue since it’s not really about a defect or feature request, but feel free to comment again with further questions.

from dark-mode-toggle.

@tomayac I am using the recommended approach - the two different CSS files and there is still some unwanted style flashing on refresh when remembering the non-preffered theme but as you said might be just a side effect we have to accept.

On a side note, it might be worth expanding your post on how to support more than 2 themes using this approach that could help a lot of people - including myself 😅.

Regarding the ::parts and MWC support I am not going to lie I am a newbie in web dev and web component in general so if you could provide - maybe in the README - the code on how to achieve MWC style - since Material design is one of the most used UI lib - I think it might help a lot of people out there.

Anyway thanks again for the quality tutorial and this component it really helps quickly getting started with dark theme support.

from dark-mode-toggle.

@tomayac I am using the recommended approach - the two different CSS files and there is still some unwanted style flashing on refresh when remembering the non-preffered theme but as you said might be just a side effect we have to accept.

I fear so, yes. Technically, you could not display anything until the toggle's script has run and figured out the mode, but this would be even more suboptimal. As a general hint, make sure the toggle script runs as soon as possible. For example, I preload the script early on during the loading of my blog.

On a side note, it might be worth expanding your post on how to support more than 2 themes using this approach that could help a lot of people - including myself 😅.

Right now the toggle only supports two themes. Adding support for more is currently not a planned feature, since prefers-color-scheme itself only supports light or dark.

Regarding the ::parts and MWC support I am not going to lie I am a newbie in web dev and web component in general so if you could provide - maybe in the README - the code on how to achieve MWC style - since Material design is one of the most used UI lib - I think it might help a lot of people out there.

There's a neat intro on this new kind of styling over on CSS Tricks.

The exposed parts are in the code.

Anyway thanks again for the quality tutorial and this component it really helps quickly getting started with dark theme support.

You're welcome! If you want, I'd be curious to have a look at your page now :-)

from dark-mode-toggle.

Thanks for the answer, I don't think that I can preload the script since I am importing it directly in my project with NPM and using it in my custom component. 🤔

A shame for the multi theme support...

Would gladly show you but it's still running locally only. 😇

from dark-mode-toggle.