background

Internet industry practitioners, many people like to work in the late night, so many websites also do night browsing mode, the following provides several ways to achieve.

explore

  1. You can use CSS media to query information and automatically change styles based on 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>

Copy the code
  1. Use JS to judge, according to the system automatically switch class name control style

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

Copy the code
  1. Use buttons to switch CSS files by manually clicking
<head> <link href="light-theme. CSS "rel="stylesheet" ID ="theme_link" /> </head> <body> <button ID =" BTN "> <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>Copy the code

Use CSS Filter

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

<p>hello world</p>

Copy the code

Note: the background color must be set on the HTML, otherwise the filter is invalid

Invert () inverts the value of the color channel; invert() inverts the value between 0 and 1; Hue -rotate() rotates the color dial. The input value is 0deg 360deg. For details about how to calculate the two functions, see MDN CSS Filter.

Filter can achieve dark mode, but there is a problem that the image and background image will also be filtered, you can filter the image again to solve this problem.

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

Copy the code

The original image remains unchanged, and only the other elements are filtered.

conclusion

Although filter and style switching can both achieve the purpose, if the product has high requirements, it is still recommended to use style switching, after all, everything is more controllable in this way. The filter algorithm will appear some colors are not the filter effect you want, and they are not easy to adjust, because the algorithm is more complex.