newsroom icon indicating copy to clipboard operation
newsroom copied to clipboard

Detect the toggle for light/dark mode

Open pihomeserver opened this issue 1 year ago • 0 comments

One suggestion to be adapted : i'm using the theme for my website but i need to adapt my logo when the user switch from light to dark and dark to light so i have updated the theme index.js file :

  function changeMode(isDarkMode) {
    if(isDarkMode) {
      bank.setItem(storageKey, light)
      elemAttribute(doc, data, light);
    } else {
      bank.setItem(storageKey, dark);
      elemAttribute(doc, data, dark);
    }
    window.dispatchEvent(new Event("storage"));
  }

The event is not triggered when staying on the same page Then in the header partial :

...
        <script>
          const storageKey = 'colorMode';
          const bank = window.localStorage;
          window.onstorage = () => {
            var logoElt = document.getElementById("logo");
            if (logoElt && bank.getItem(storageKey) === "dim") {
              logoElt.setAttribute("style", "filter: invert();");
            } else {
              logoElt.setAttribute("style", "filter: none;");
            }
          };
        </script>
...

where logo is the img element of my logo

Not sure it's the best approach but could help

pihomeserver avatar Mar 25 '23 16:03 pihomeserver