关于前端:如何实现网站黑暗模式

52次阅读

共计 2078 个字符,预计需要花费 6 分钟才能阅读完成。

背景

互联网行业从业者,很多人喜爱在深夜工作,为此很多网站也做了夜间浏览模式,上面提供几种实现形式。

摸索

  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>

原图放弃不变,只对其余元素滤镜,效果图:

结语

尽管用 filter 和切换款式这两种形式都能达到目标,如果对产品要求比拟高,还是举荐应用款式切换这种形式,毕竟这种形式所有都比拟可控。filter 算法会呈现某些色彩不是你心愿的滤镜成果,而本人又不好调整,应为算法比较复杂。

如何实现网站光明模式首发于聚享小站,如果对您有帮忙,不要遗记点赞反对一下呦🎉

正文完
 0