Dark Mode

給你的網(wǎng)站添加 Dark Mode

Mac玩兒法編輯部 · 2019-07-01

現(xiàn)在 macOS、iOS 都支持?Dark Mode，我們的網(wǎng)站也要緊跟設(shè)計潮流，使用?Darkmode.js 這款 js 腳本即可輕松完成?dark-mode / night-mode 的一秒切換。

只需要將下面的代碼放入網(wǎng)頁代碼里即可。

  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>

然后你可以用 option 代碼對模式切換按鈕的樣式、位置進行個性化設(shè)置，比如左還是右，底色、觸發(fā)時間、里面的 icon 等等元素。

  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();

來看看我站的演示：

Darkmode.js 官網(wǎng)

Dark Mode
評論