mmistakes/so-simple-theme

[Enhancement] Dark Mode Toggle

leewc opened this issue · 8 comments

leewc commented

Hi Michael, just wanted to say thank you for the awesome theme. I've been using it for the last few years, back when we had to fork the theme and catch up with updates. (My last PR was implementing Medium-like read times: #196)

After recent updated, I noticed in the docs there are now three kinds of styles out of the box: https://github.com/mmistakes/so-simple-theme#site-skin.

Since I wanted my blog to follow a users light/dark mode preference, I implemented a 'switcher' that's similar to today's Dark theme toggles found in many sites, my custom implementation is here: leewc/leewc.github.io@1f5228d

Are you interested in this feature for this theme? If so, I can submit a PR for this enhancement if you'd like. Perhaps a way to decide if adding the additional switcher code needed based on the skin variable.

While the suggestions for dark theme CSS loading were to put it in the <head>, I wanted the toggle to live in the navigation bar. (I used emoji's for the switch as a quick and easy solution given I didn't have any nice moon/sun graphics at hand). I also had the JS selection code live after the navigation code to avoid slowing down the page load or have a flash of unstyled text. As such there's a race condition between the theme loading and the icon displayed. See this line for more details

Demo: https://leewc.com/

This may nicely go hand-in-hand with #406 , i.e. it might be easiest to include the <meta> tags I mention there in your JS implementation to also have these toggle-able (since they can't be put in CSS I believe).

As recommended by the stale-bot in this project, I have migrated #406 to #422 , the feature idea reported here may be awaiting a similar fate.

leewc commented

@olifre no worries. it's fine if it gets closed. I'm not super passionate about getting this in if the maintainer is busy with other projects :) best of luck!

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please add as an Idea under discussions and elaborate on why it is core to this project and why you feel more than 80% of users would find it beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

The dreaded stale-bot passed by again... @leewc , should we migrate this to the discussions section as suggested?

This issue has been automatically marked as stale because it has not had recent activity.

If this is a bug and you can still reproduce this error on the master branch, please reply with any additional information you have about it in order to keep the issue open.

If this is a feature request, please add as an Idea under discussions and elaborate on why it is core to this project and why you feel more than 80% of users would find it beneficial.

This issue will automatically be closed in 7 days if no further activity occurs. Thank you for all your contributions.

leewc commented

@olifre looks like the Discussion section isn't that maintained as well. It's ok, we can revisit this in the future if (ever) needed. The custom implementation works out for anyone else that might be interested in having it too :)

leewc/leewc.github.io@1f5228d

@leewc I agree, the discussion section is also not really maintained, sadly. However, since there is no stale-bot there, it at least increases visibility of newly developed features such as this one — i.e. if in the future somebody comes to this project and may want to maintain it (or fork it and take it over), your feature would still be visible.