Add Dark Mode to your website

Now that macOS and iOS all support Dark Mode, it’s time to keep up with the design trend for our websites and use Darkmode.js, a js script that makes it easy to switch between dark-mode / night-mode in a second.

All you need to do is put the following code into the web code.

1. <script src=”https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js”></script>
2. <script>
3. new Darkmode().showWidget();
4. </script>

You can then use the option code to personalise the style and position of the mode switch button, such as left or right, the base colour, the trigger time, the icon inside and other elements.

1. var options = {
2. bottom: ’64px’, // default: ’32px’
3. right: ‘unset’, // default: ’32px’
4. left: ’32px’, // default: ‘unset’
5. time: ‘0.5s’, // default: ‘0.3s’
6. mixColor: ‘#fff’, // default: ‘#fff’
7. backgroundColor: ‘#fff’, // default: ‘#fff’
8. buttonColorDark: ‘#100f2c’, // default: ‘#100f2c’
9. buttonColorLight: ‘#fff’, // default: ‘#fff’
10. saveInCookies: false, // default: true,
11. label: ‘?’ // default: ” }
12. const darkmode = new Darkmode(options); darkmode.showWidget();