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.

Toggle between dark and light palette doesn't work

See original GitHub issue

Toggle: mkdocs.yml

- mermaid2:
      arguments:
        # test if its __palette_1 (dark) or __palette_2 (light)
        theme: |
          ^(JSON.parse(window.localStorage.getItem(__prefix('__palette'))).index == 1) ? 'dark' : 'light''

docs/extra/refresh_on_toggle_dark_light.js

var paletteSwitcher1 = document.getElementById("__palette_1");
var paletteSwitcher2 = document.getElementById("__palette_2");

paletteSwitcher1.addEventListener("change", function () {
  location.reload();
});

paletteSwitcher2.addEventListener("change", function () {
  location.reload();
});

does not work with package versions: pip freeze:

attrs==20.3.0
beautifulsoup4==4.10.0
certifi==2021.10.8
chardet==4.0.0
charset-normalizer==2.0.9
click==8.0.3
EditorConfig==0.12.3
ghp-import==2.0.2
idna==2.10
importlib-metadata==4.8.2
Jinja2==3.0.3
jsbeautifier==1.14.0
Markdown==3.3.6
MarkupSafe==2.0.1
mdx-truly-sane-lists==1.2
mergedeep==1.3.4
mkdocs==1.2.3
mkdocs-altlink-plugin==1.0.1
mkdocs-autolinks-plugin==0.4.0
mkdocs-markmap==2.2.0
mkdocs-material==8.0.5
mkdocs-material-extensions==1.0.3
mkdocs-mermaid2-plugin==0.5.2
mkdocs-roamlinks-plugin==0.1.3
packaging==21.3
Pygments==2.10.0
pymdown-extensions==9.1
pyparsing==3.0.6
python-dateutil==2.8.2
PyYAML==6.0
pyyaml_env_tag==0.1
requests==2.25.1
six==1.16.0
soupsieve==2.3.1
urllib3==1.26.7
watchdog==2.1.6
zipp==3.6.0

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
patrislav1commented, Dec 11, 2021

It would be great if you could outline here (for a person who has notions of HTML/css/js) what had changed in the mkdocs-material internal API?

The internal API to store and retrieve local settings, including the currently selected theme/palette, changed a little bit - previously the browser’s localStorage was used directly (a bit like cookies, but only client-side) - now there’s some kind of wrapper around it, which also renames the key of the value depending on where it’s stored.

See the diff of src/assets/javascripts/components/palette/index.ts and src/partials/javascripts/base.html between pre- and post-8.0.0.

0reactions
fralaucommented, Dec 11, 2021

Thanks a lot!

Read more comments on GitHub >

github_iconTop Results From Across the Web

Background color does not switch between light and dark ...
When I click the button, it successfully toggles the theme: the class is applied, the button changes color from the light theme primary...
Read more >
The Complete Guide to the Dark Mode Toggle
Switching between a dark color palette and a light one involves more than just switching between darker and lighter background colors.
Read more >
VS Code tips — Toggle between light/dark themes - YouTube
Use the "Preferences: Toggle between light / dark themes" command to quickly switch between light and dark color themes in VS Code.
Read more >
Light and dark modes - Expo Documentation
If working with an iOS emulator locally, you can use the Cmd ⌘ + Shift + A shortcut to toggle between light and...
Read more >
The Palette Switch Component - Neve Header / Footer Builder
The Palette Switch toggle commutes between two color palettes from Customizer > Colors & Background, Light Palette, and Dark Palette.
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