<div class="wrap">
  <h1>Dark Mode</h1>
  <p>
    <a href="https://darkmodejs.learn.uno/">This library</a> uses the css mix-blend-mode in order to bring Dark-mode to any of your websites. Just copy paste the snippet and you will get a widget to turn on and off the dark-mode.
  </p>
  <p>
    <a class="btn" href="https://darkmodejs.learn.uno/">Button</a>
  </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script>

@import url('https://fonts.googleapis.com/css?family=Playfair+Display&display=swap');
.wrap {
  max-width: 80%;
  margin: 0 auto;
  text-align: center;
  padding-top: 2rem;
  font-family: 'Playfair Display', serif;
}
h1 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
  line-height: 1.5;
}
h1, p {
  margin-bottom: 2rem;
}
a {
  color: #0bd;
}
.btn {
  background: #0bd;
  padding: 10px 20px;
  border-radius: 5px;
  display: inline-block;
  color: #fff;
  text-decoration: none;
}

const options = {
  bottom: '20px', // default: '32px'
  right: '20px', // default: '32px'
  left: 'unset', // default: 'unset'
  time: '0.5s', // default: '0.3s'
  mixColor: '#fff', // default: '#fff'
  backgroundColor: '#fff',  // default: '#fff'
  buttonColorDark: '#100f2c',  // default: '#100f2c'
  buttonColorLight: '#fff', // default: '#fff'
  saveInCookies: false, // default: true,
  label: '🌓', // default: ''
  autoMatchOsTheme: true // default: true
}

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