How to Implement Dark Mode for Websites

background

Practitioners in the Internet industry, many people like to work late at night, and many websites have also implemented night browsing mode. The following are several implementation methods.

explore

Use CSS media queries to 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 to judge, automatically switch the class name control 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>

Using a button, toggle the css file by clicking it manually

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

Implemented using CSS filter

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

<p>hello world</p>

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

Filter is actually a filter. The function of invert() is to invert the value of the color channel, and the received value is 0~1; the function of hue-rotate() is to rotate the color wheel, and the received value is 0deg~360deg. For the specific calculation methods of these two functions, please refer to MDN CSS filter .

Although filter can implement dark mode, there is a problem. Pictures and background images will also be filtered. This problem can be solved by filtering the pictures again.

 <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, only other elements are filtered, the effect image:

20220301201249

Epilogue

Although the two methods of filter and switching style can achieve the purpose, if the product requirements are relatively high, it is recommended to use the style switching method, after all, everything is more controllable in this method. The filter algorithm will show that some colors are not the filter effect you want, and it is not easy to adjust it yourself, it should be because the algorithm is more complicated.

How implements the dark mode

How to Implement Dark Mode for Websites

background

explore

Implemented using CSS filter

Epilogue

wmui

引用和评论

使用vue3、egg和SQLite开发通用管理后台系统

Javascript(turfjs)等值线图绘制

2024最全ECharts 实战大全（速记版+资源）

Jerry和您聊聊Chrome开发者工具

CSS 如何模拟“真实的”进度条？

一些react使用小技巧（中）

如何在仓库中添加只对自己生效的.gitignore规则？