javascript简单实现主题变色 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        width: 100vw;
        height: 100vh;
      }

      :root {
        --green: green;
        --orange: orange;
        --green-bg: #c7edcc;
        --orange-bg: #222222;
      }

      .theme-green {
        color: var(--green);
        background-color: var(--green-bg);
      }

      .theme-orange {
        color: var(--orange);
        background-color: var(--orange-bg);
      }
    </style>
  </head>
  <body class="theme-orange asd">
    <div>
      <span>文案颜色</span>
      <input type="color" id="color" />
    </div>
    <div>
      <span>背景颜色</span>
      <input type="color" id="bgColor" />
    </div>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JAVASCRIPT</li>
      <li>VUE</li>
    </ul>
    <script>
      const body = document.querySelector("body");
      const fontColor = document.querySelector("#color");
      const bgColor = document.querySelector("#bgColor");
      fontColor.addEventListener("change", (ev) => {
        document.documentElement.style.setProperty("--orange", ev.target.value);
      });

      bgColor.addEventListener("change", (ev) => {
        document.documentElement.style.setProperty(
          "--orange-bg",
          ev.target.value
        );
      });
    </script>
  </body>
</html>

 

posted @ 2022-10-09 10:10  深海里的星星i  阅读(81)  评论(0)    收藏  举报