时间戳

首页 > 解决方案 > 如何在我的整个页面上启用灯光模式？

javascript - 如何在我的整个页面上启用灯光模式？

问题描述

我是编程和堆栈流的新手，但我制作了一个深色页面，我想启用适用于每个页面的浅色模式

但每当我尝试 Light 模式时，它只会改变正文的颜色和正文中的“p”文本。

如何更改示例：class="row" 或整个页面？由于我已经有一个代码，我不希望改变一切以适应轻模式，而是实现我在某种代码中拥有的东西。

我的想法是添加： var x = document.getElementsByClassName("row"); 在我的 javascript 中，但它没有任何区别。

function darkmode() {
    const wasDarkmode = localStorage.getItem('darkmode') === 'true';
    localStorage.setItem('darkmode', !wasDarkmode);
    const element = document.body;
    element.classList.toggle('dark-mode', !wasDarkmode);
  }

  function onload() {
    document.body.classList.toggle('dark-mode', localStorage.getItem('darkmode') === 'true');
  }
body {
  background-attachment: fixed;
  background-size: 1024px 300px;
  background-color: black;
  width: 100%; 
  margin: auto;
  padding: 100px;
  color: white;
}

h2 {
  color: #886750;
  font-size: 25px;
}

h3 {
  letter-spacing: 0.1em;
  color: white;
  font-size: 20px;
}

.row{
  padding-bottom: 20px;
}

.column {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 15px;
  background-color: black;
  text-align: center;
  color: white;
}

.dark-mode {
  background-color: white;
  color: black;
}
<!DOCTYPE html>
<html>

  <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">
  </head>

 <body onload="onload()">
    
    <button class="nav-item">
      <a role="button" onclick="darkmode()">Klikk for lys modus</a>
    </button>
    
    <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborboris nisi ut aleur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

    <div class="row">
      <div class="column">

        <h2>Information</h2>
        <h3>Information</h3>

        <br>

        <h2>Information</h2>
        <h3>Information</h3>

      </div>

      <div class="column">

        <h2>Information</h2>
        <h3>Information</h3>
    
        <br>

        <h2>Information</h2>

      </div>
    </div>

    <script src="./js/darkmode.js"></script>
  </body>

</html>

标签： javascripthtmlcss

解决方案

一个好的方法是定义默认主题的样式（例如“深色模式”），然后开始覆盖单个样式。

在您的示例中，有几个background-color和color 属性设置为相同的值 - 请记住，许多样式属性由子节点继承，例如color和background-color。

如果您想在“深色模式”中为所有元素在黑色背景上使用白色文本，但在“浅色模式”下在白色背景上使用黑色文本，那么定义background-colorand元素就足够color了：body

body {
  background-color: black;
  color: white;
  /* other styles here */
}

body.light-mode {
  background-color: white;
  color: black;
}

当您将类添加到元素时，类的样式light-mode将添加到样式中，即仅将被覆盖。bodylight-modebodybackground-colorcolor

对于所有其他元素，它是相同的。

我已经从 CSS 中删除了所有background-color和color定义，并在最后添加了“轻主题”的覆盖：

let darkMode = true;

function darkmode() {
    const wasDarkmode = darkMode; // localStorage.getItem('darkmode') === 'true';
    darkMode = !darkMode; // localStorage.setItem('darkmode', !wasDarkmode);
    const element = document.body;
    element.classList.toggle('light-mode', wasDarkmode);
  }

  function onload() {
    document.body.classList.toggle('light-mode', !darkMode); // localStorage.getItem('darkmode') === 'true');
  }
/* Default theme first */
body {
  background-attachment: fixed;
  background-size: 1024px 300px;
  width: 100%; 
  margin: auto;
  padding: 100px;
  background-color: black;
  color: white;
}

h2 {
  color: #886750;
  font-size: 25px;
}

h3 {
  letter-spacing: 0.1em;
  font-size: 20px;
}

.row {
  padding-bottom: 20px;
}

.column {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-top: 20px;
  padding-bottom: 15px;
  text-align: center;
}

.nav-item {
  height: 30px;
  border: solid 1px #808080;
  border-radius: 3px;
  background-color: #333333;
  color: white;
}

/* Overrides for light mode style for body tag - will cascade */
body.light-mode {
  background-color: white;
  color: black;
}

/* Override style for "headline 2" in "light mode" */
.light-mode h2 {
  color: lightblue;
}

.light-mode .nav-item {
  background-color: lightblue;
  color: black;
}
<!DOCTYPE html>
<html>

  <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">
  </head>

 <body onload="onload()">
    
    <button class="nav-item">
      <a role="button" onclick="darkmode()">Klikk for lys modus</a>
    </button>
    
    <p>
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut laborboris nisi ut aleur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    </p>

    <div class="row">
      <div class="column">

        <h2>Information</h2>
        <h3>Information</h3>

        <br>

        <h2>Information</h2>
        <h3>Information</h3>

      </div>

      <div class="column">

        <h2>Information</h2>
        <h3>Information</h3>
    
        <br>

        <h2>Information</h2>

      </div>
    </div>

    <script src="./js/darkmode.js"></script>
  </body>

</html>

推荐阅读