如何實現網站黑暗模式

wmui發表於2022-03-07
網站模式

背景

網際網路行業從業者，很多人喜歡在深夜工作，為此很多網站也做了夜間瀏覽模式，下面提供幾種實現方式。

探索

  1. 使用CSS媒體查詢，根據系統自動切換不同樣式
    <style>
        @media (prefers-color-scheme: dark) {
          body {
            color: #eee;
            background: #121212;
          }
          body a {
            color: #809fff;
          }
        }
  
        @media (prefers-color-scheme: light) {
          body {
            color: #222;
            background: #fff;
          }
          body a {
            color: #0033cc;
          }
        }
      </style>
    <p>hello world</p>
  1. 使用JS判斷，根據系統自動切換類名控制樣式

    <style>
      body {
        --text-color: #222;
        --bkg-color: #fff;
        --anchor-color: #0033cc;
      }

      body.dark-theme {
        --text-color: #eee;
        --bkg-color: #121212;
        --anchor-color: #809fff;
      }

      body {
        color: var(--text-color);
        background: var(--bkg-color);
      }

      body a {
        color: var(--anchor-color);
      }
    </style>

    <script>
      if (
        window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches
      ) {
        document.body.classList.add('dark-theme');
      } else {
        document.body.classList.remove('dark-theme');
      }
    </script>
    <p>hello world</p>
  1. 使用按鈕，通過手動點選切換css檔案
<head>
    <link href="light-theme.css" rel="stylesheet" id="theme_link" />
</head>
<body>
    <button id="btn">切換</button>

    <script>
      const btn = document.querySelector('#btn');
      const themeLink = document.querySelector('#theme_link');
      btn.addEventListener('click', function () {
        if (themeLink.getAttribute('href') == 'light-theme.css') {
          themeLink.href = 'dark-theme.css';
        } else {
          themeLink.href = 'light-theme.css';
        }
      });
    </script>
</body>

使用CSS filter實現

<style>
    html {
        background: #fff;
        filter: invert(1) hue-rotate(180deg);
    }
</style>

<p>hello world</p>

注意：html上必須要設定背景色，不然filter是無效的

filter其實是濾鏡，invert()作用是反轉顏色通道數值，接收的值在 0~1；hue-rotate() 的作用是轉動色盤，接收的值在 0deg~360deg。這兩個函式的具體計算方式可以參考MDN CSS filter。

filter雖然能夠實現黑暗模式，但是有個問題，圖片和背景圖也會被濾鏡，可以通過對圖片再filter一次解決這個問題。

 <style>
      html {
        background: #fff;
        filter: invert(1) hue-rotate(180deg);
      }

      html img {
        filter: invert(1) hue-rotate(180deg);
      }
      .box {
        width: 100px;
        height: 100px;
        background-image: url('https://cdn.86886.wang/pic/20220301200132.png');
        background-repeat: no-repeat;
        background-size: 100px 100px;
        filter: invert(1) hue-rotate(180deg);
      }
    </style>

 <img
      src="https://cdn.86886.wang/pic/20220301200132.png"
      width="100px"
      height="100px"
      alt=""
    />
    <p>hello world</p>
    <div class="box"></div>

原圖保持不變，只對其他元素濾鏡，效果圖：

20220301201249

結語

雖然用filter和切換樣式這兩種方式都能達到目的，如果對產品要求比較高，還是推薦使用樣式切換這種方式，畢竟這種方式一切都比較可控。filter演算法會出現某些顏色不是你希望的濾鏡效果，而自己又不好調整，應為演算法比較複雜。

如何實現網站黑暗模式首發於聚享小站，如果對您有幫助，不要忘記點贊支援一下呦?

相關文章