How to realize the website dark mode

2022-06-10 16:33:00 【wmui】

background

Internet industry practitioners , Many people like to work late at night , For this reason, many websites have also made night browsing mode , Several implementation methods are provided below .

Explore

Use CSS Media query , Automatically switch different styles according to the system

    <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>

Use JS Judge , Automatically switch the class name and control the style according to the system


    <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>

Use the buttons , Switch by clicking manually css file

<head>
    <link href="light-theme.css" rel="stylesheet" id="theme_link" />
</head>
<body>
    <button id="btn"> Switch </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>

Use CSS filter Realization

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

<p>hello world</p>

Be careful ：html The background color must be set on the , Otherwise filter It's invalid

filter It's actually a filter ,invert() The function is to reverse the value of the color channel , Received value in 0~1;hue-rotate() Its function is to turn the color wheel , Received value in 0deg~360deg. The specific calculation methods of these two functions can refer to MDN CSS filter.

filter Although the dark mode can be realized , But there's a problem , Images and background images will also be filtered , You can do this by re filter Solve this problem at once .

 <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>

The original image remains unchanged , Filter only for other elements , design sketch ：

20220301201249

Conclusion

Although with filter And switching styles can achieve the goal , If the product requirements are relatively high , It is still recommended to use style switching , After all, everything is controllable in this way .filter The algorithm will show some colors that are not the filter effect you want , And it's hard for me to adjust , The algorithm should be complex .