Skip to content

Instantly share code, notes, and snippets.

@whirlxd
Created July 6, 2021 11:42
Show Gist options
  • Save whirlxd/4b9ff0156d63042765181372e7e09e8f to your computer and use it in GitHub Desktop.
Save whirlxd/4b9ff0156d63042765181372e7e09e8f to your computer and use it in GitHub Desktop.
How to Add Darkmode to your website? [Darkmode.js]

How to ?

first step:
add this code in your html page

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
<script>
  function addDarkmodeWidget() {
    new Darkmode().showWidget();
  }
  window.addEventListener('load', addDarkmodeWidget);
</script>

now open another script tag
place this inside it

const options = {
  bottom: '64px', // default: '32px'
  right: 'unset', // if you want the widget to be on the right then `right: '32px' and left to unset
  left: '32px', // default: 'unset'
  time: '0.5s', // default: '0.5s' the time to fade in and out 
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // set to true if you want to load the site in the mode the user left it in
  label: '🌓', // the emoji you want for toggling light and dark mode
  autoMatchOsTheme: true // if you have enabled dark mode it would open darkmode
}

const darkmode = new Darkmode(options);
darkmode.showWidget();

done now darkmode is added to your website! Enjoy <3
@tzt345
Copy link

tzt345 commented Aug 11, 2021

:0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment