Custom Toggle with Darkmode.js

To have a custom toggle, change your js file to have this code:

1
2
3
4
5
6
7
8
9


// 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<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