几行代码让你的网页适配黑暗模式

随着苹果最近强推黑暗模式,越来越多的应用都要支持黑暗模式才能上架苹果商店,既然APP都适配了黑暗模式,那网站适配黑暗模式也是一件需要提上日程的事情了。

PC端实现黑暗模式有两种方式,一种是纯CSS实现,另一种是通过JavaScript操作实现。

通过媒体查询实现dark模式自动切换

纯CSS实现切换需要借助媒体查询来实现,使用这种方式会根据浏览器是否使用黑暗模式来自适应,用户不能手动去控制(除非用户更改浏览器设置)。

代码实现:

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666666;
    --border: #e6e6e6;
    --bg: #333333;
  }
}

 :root {
    --accent: #226997;
    --main: #333;
    --light: #666;
    --lighter: #f3f3f3;
    --border: #e6e6e6;
    --bg: #ffffff;
  }
  
  html,
  body {
    background-color: var(--bg);
  }
  
  p {
    color: var(--main);
  }

这里我们借助媒体查询去判断 prefers-color-scheme 的值是否为 dark ,如果该值是 dark 的采用另外一组CSS变量声明。这里我借助了CSS变量,你也可以通过其他方式去进行切换,最主要的是通过媒体查询判断是否切换至黑暗模式。

prefers-color-scheme 的值有两个 darklight

通过JavaScript切换

通过JavaScript切换黑暗模式的本质是准备两套样式代码,通过控制加载哪一套的方式实现样式切换主题。

代码实现:

index.html



<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <style>
      :root {
        --accent: #226997;
        --main: #333;
        --light: #666;
        --lighter: #f3f3f3;
        --border: #e6e6e6;
        --bg: #ffffff;
      }
      html,
      body {
        background-color: var(--bg);
      }
      p {
        color: var(--main);
      }
    style>
  head>
  <body>
    <p>nihaop>
    <button onclick="changeTheme()">change themebutton>
    <script>
      let theme = "light";
      /**
       * 添加暗色主题
       */
      function addDarkTheme() {
        const link = document.createElement("link");
        link.id = "theme-css-dark"; // 加上id方便后面好查找到进行删除
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = "./styles.css";
        document.querySelector("head").appendChild(link);
      }
      /**
       * 移除暗色主题
       */
      function removeDarkTheme() {
        document.querySelector("#theme-css-dark").remove();
      }
      /**
       * 切换主题
       */
      const changeTheme = () => {
        if (theme === "light") {
          addDarkTheme();
          theme = "dark";
        } else {
          removeDarkTheme();
          theme = "light";
        }
      };
    script>
  body>
html>

styles.css

 :root {
    --accent: #3493d1;
    --main: #f3f3f3;
    --light: #ececec;
    --lighter: #666666;
    --border: #e6e6e6;
    --bg: #333333;
  }

这里我采用是默认light模式,用户可以手动切换至dark模式,当然你也可以两种方式都手动加载。

当用户点击按钮时,执行 changeTheme() 方法,我在方法内部判断用户当前采用的是dark模式还是light模式,如果是light模式的话执行 addDarkTheme() 方法将 styles.css 文件加载到文档的头部,否则就执行 removeDarkTheme() 方法将styles.css 文件从文档的头部移除。

这里我设置了一个变量 theme 来存储用户当前的主题,你也可以通过 localStorage 来进行存储,这样当用户再次加载时看见的还是他上次使用的主题。

参考文章:

  • How To Add CSS Dark Mode To A Website

你可能感兴趣的:(几行代码让你的网页适配黑暗模式)