newsroom
newsroom copied to clipboard
Detect the toggle for light/dark mode
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