Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Enhancement] Dark Mode Toggle #416

Closed
leewc opened this issue Mar 15, 2021 · 8 comments
Closed

[Enhancement] Dark Mode Toggle #416

leewc opened this issue Mar 15, 2021 · 8 comments

Comments

@leewc
Copy link

leewc commented Mar 15, 2021

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/

@olifre
Copy link

olifre commented Apr 15, 2021

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).

@olifre
Copy link

olifre commented May 14, 2021

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
Copy link
Author

leewc commented May 14, 2021

@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!

@github-actions
Copy link

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.

@olifre
Copy link

olifre commented Jul 14, 2021

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

@github-actions
Copy link

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
Copy link
Author

leewc commented Sep 21, 2021

@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

@olifre
Copy link

olifre commented Sep 21, 2021

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants