feat: add a switch to toggle light/dark theme#149
feat: add a switch to toggle light/dark theme#149Den-dp wants to merge 1 commit intodocker:masterfrom
Conversation
StefanScherer
left a comment
StefanScherer
left a comment
There was a problem hiding this comment.
Thanks @Den-dp for your ongoing effort to improve the getting-started light/dark mode 🎉 ❤️
The new colours look amazing. I left some comments, because I think the index.js is not really needed.
Don't get me wrong, I really would like to have a good dark mode, but I still prefer what @mikesir87 said that the automatic dark/light mode adaption in docs/css/dark-mode.css is the simplest thing for the user. Making it switch automatically and immediately when the user has changed the system preferences would be the best solution and wouldn't require a toggle button.
What I tried as well is to remove the toggle from mkdocs.yml and just leave the docs/js/index.js. This at least switches between dark and light mode when the page get reloaded or when the user navigates to a new page. That would be more what I would like to see. Is there a javascript event to change the data-md-color-scheme whenever prefers-color-scheme changes?
| @@ -0,0 +1,4 @@ | |||
| const settings = JSON.parse(localStorage.getItem(__prefix('__palette'))); | |||
There was a problem hiding this comment.
This file doesn't seem to make any difference. I've tried without it and the behaviour was exactly the same. 🤔
There was a problem hiding this comment.
In this script, which runs on every page load, we are reading and applying the scheme preference stored in localStorage by mkdocs-material.
So the flow is:
- on the first site load the mkdocs-material will set this preference according to the system scheme.
- on each subsequent page loads it will use the stored setting (hence - didn't reflect the OS-wide scheme switching)
- user at any time can change the site theme by switching the theme switcher (this also updates localStorage)
And this flow is mainly needed for cases when you use a dark scheme in OS but want to have a light scheme for the site and vice versa.
| palette: | ||
| primary: blue | ||
| accent: blue | ||
| # Light mode |
There was a problem hiding this comment.
The toggle switch is nice, but then it doesn't respond to system changes any longer.
System pref is light mode, browse to the docs that are shown in light mode, change system prefs to dark mode, reload the docs, but the docs keep light mode.
I looked at the MkDocs documentation and yes that's the recommended way. I wonder if there is a better way to "just support system prefs" automatically. But I haven't found a solution. 😢
There was a problem hiding this comment.
According to your feedback, I see that the missing parts here are:
- auto-invalidate applied settings when the OS-wide scheme was changed
- or even to reflect the OS-wide scheme switching
Let's ping @squidfunk because he might be interested in mkdocs-material feedback/feature request.
There was a problem hiding this comment.
On the first visit, system preferences are read (when used together with media queries as described in the docs) and written to local storage. On the next visit, this setting is used. There's no dedicated "system preferences" mode and no plans to support it.
3 participants
Add script for restoring preferred theme setting.
Update config for newer
mkdocs-material.Use native
mkdocs-materialstyles where possible.Closes: #45 #63
old vs new 👇