Custom Toggle with Darkmode.js
To have a custom toggle, change your js
file to have this code:
// Replace the default button with your own button
const myButton = document.getElementById('my-darkmode-button');
const darkModeIcon = document.getElementById('dark-mode-icon');
myButton.addEventListener('click', () => {
darkmode.toggle();
toggleDarkModeIcon(darkModeIcon, darkmode.isActivated());
});
}
so your final code will be:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script>
<script>
function addDarkmodeWidget() {
new Darkmode();
}
const myButton = document.getElementById('my-darkmode-button');
const darkModeIcon = document.getElementById('dark-mode-icon');
myButton.addEventListener('click', () => {
darkmode.toggle();
toggleDarkModeIcon(darkModeIcon, darkmode.isActivated());
}
window.addEventListener('load', addDarkmodeWidget);
</script>
that’s it <3