question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Light/dark theme disconnected from light/dark scheme

See original GitHub issue

Expected behavior

After reading this, as well as squidfunk/mkdocs-material#1266, my understanding is:

  1. Toggling the theme using the toggle switch will switch the preferred color scheme; and
  2. Switching the preferred color scheme will toggle the theme.

However, they are disconnected as far as I can tell.

Observed behavior

  1. Toggling the theme using the switch in the header of this page will update the theme, but not the scheme.
  2. Toggling the preferred color scheme (e.g., on MacOS, switching from Light to Dark in System Preferences » General » Appearance) will update the scheme, but not the theme.

Detail

I have created an example that illustrates this. (Source can be found at posita/mkdocs-dark-bug.)

Test matrix:

Theme 👉
Scheme 👇
Light Dark
Light Light/Light Dark/Light
Dark Light/Dark Dark/Dark

Tested with:

package version
mkdocs 1.1.2
mkdocs-material 7.1.6
mkdocs-material-extensions 1.0.1

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:13 (7 by maintainers)

github_iconTop GitHub Comments

2reactions
squidfunkcommented, Jun 11, 2022

I’m happy to announce that automatic dark/light mode was finally implemented and just released as part of 8.3.4+insiders-4.18.0. I invite you to test-drive it on our documentation. Here’s a short video showing how it works:

https://user-images.githubusercontent.com/932156/173182190-f5f9ab50-1a1e-414d-8184-530843f3362f.mp4

Read more comments on GitHub >

github_iconTop Results From Across the Web

Changing the colors - Material for MkDocs - GitHub Pages
Material for MkDocs supports two color schemes: a light mode, ... Insiders adds support for automatic light / dark mode, delegating color palette...
Read more >
Thinking on ways to solve a DARK/LIGHT THEME SWITCH
In today's GUI Challenge, @Adam Argyle shares thinking on a way to build a theme switch component. Often a website will allow switching...
Read more >
Dark Mode | Electron
If you want to manually switch between light/dark modes, you can do this by setting the desired mode in the themeSource property of...
Read more >
Creating Light/Dark mode on a React App with Context |
It is a simple way to get all your components on the same page, sharing the information they need to display the correct...
Read more >
Material-ui style getting overwritten when switching light/dark ...
css"; function MyApp({ Component, pageProps }) { const isInDarkMode = useMediaQuery("(prefers-color-scheme: dark)"); const theme = React.useMemo ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found