通过切换按钮打开暗模式时更改边框颜色

Question

我已经获得了设置网站样式所需的一切。所以现在当我 toggle dark mode 打开时，边框颜色消失了。

我在 css 中完成了边框样式，并在 javascript 中通过添加按钮将白色背景更改为带有白色文本的黑色背景 html。想让黑边变成白边怎么办？

我是否需要在 javascript 或 css 中添加其他内容才能实现此目的？

function myFunction() {
 var element = document.body;
 var btn = document.getElementById("modeSwitcher");
 element.classList.toggle("dark-mode");
 if(element.classList.contains("dark-mode"))
 btn.innerHTML= "Turn off dark mode";
 else 
 btn.innerHTML= "Turn on dark mode";
}

/* Toggle dark-mode section */

.dark-mode {
  background-color: black;
  color: white;
}

.button {
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 24px;
  border: 6px inset #3399ff;
  border-radius: 10px;
}

.button:hover {
  background-color: black;
  color: white;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  border-right: 1px solid black;
}

.third-border {
  border-right: none;
}

.column li {
  list-style-type: outside;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row p {
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .column {
    width: 100%;
    border-top: 1px solid black;
    border-right: none;
  }
  .third-border {
    border-right: none;
  }
}

<button onclick="myFunction()" id="modeSwitcher" class="button">Turn on dark mode</button>

<div class="row">

  <div class="column">
    <h2>Column 1</h2>
    <p>
      Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam
      duis nisi tempor.
    </p>
    <ul>
      <li>Skill 1</li>
      <li>Skill 2</li>
      <li>Skill 3</li>
      <li>Skill 4</li>
      <li>Skill 5</li>
    </ul>

  </div>


  <div class="column">
    <h2>Column 2</h2>
    <p>
      Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam
      duis nisi tempor.
    </p>
    <ul>
      <li>Skill 1</li>
      <li>Skill 2</li>
      <li>Skill 3</li>
      <li>Skill 4</li>
      <li>Skill 5</li>
    </ul>

  </div>


  <div class="column third-border">
    <h2>Column 3</h2>
    <p>
      Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam
      duis nisi tempor.
    </p>
    <ul>
      <li>Skill 1</li>
      <li>Skill 2</li>
      <li>Skill 3</li>
      <li>Skill 4</li>
      <li>Skill 5</li>
    </ul>

  </div>

</div>
<!-- End row div -->

Answer 1

将此添加到您的 css：

.dark-mode .column{
  border-right: 1px solid white;
}

Answer 2

只需从 border 声明中删除颜色属性：

function myFunction() {
 var element = document.body;
 var btn = document.getElementById("modeSwitcher");
 element.classList.toggle("dark-mode");
 if(element.classList.contains("dark-mode"))
 btn.innerHTML= "Turn off dark mode";
 else 
 btn.innerHTML= "Turn on dark mode";
}

/* Toggle dark-mode section */

.dark-mode {
  background-color: black;
  color: white;
}

.button {
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  font-family: "Arial Black", Gadget, sans-serif;
  font-size: 24px;
  border: 6px inset #3399ff;
  border-radius: 10px;
}

.button:hover {
  background-color: black;
  color: white;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  border-right: 1px solid;
}

.third-border {
  border-right: none;
}

.column li {
  list-style-type: outside;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}

.row p {
  margin: 0;
}

@media only screen and (max-width: 768px) {
  .column {
    width: 100%;
    border-top: 1px solid;
    border-right: none;
  }
  .third-border {
    border-right: none;
  }
}

<button onclick="myFunction()" id="modeSwitcher" class="button">Turn on dark mode</button>

<div class="row">

  <div class="column">
    <h2>Column 1</h2>
    <p>
      Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam
      duis nisi tempor.
    </p>
    <ul>
      <li>Skill 1</li>
      <li>Skill 2</li>
      <li>Skill 3</li>
      <li>Skill 4</li>
      <li>Skill 5</li>
    </ul>

  </div>


  <div class="column">
    <h2>Column 2</h2>
    <p>
      Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam
      duis nisi tempor.
    </p>
    <ul>
      <li>Skill 1</li>
      <li>Skill 2</li>
      <li>Skill 3</li>
      <li>Skill 4</li>
      <li>Skill 5</li>
    </ul>

  </div>


  <div class="column third-border">
    <h2>Column 3</h2>
    <p>
      Magna velit dolor esse magna ut sed cillum magna lilamco nisi ut. Qui labore in sed ea excepteur clipa laboris pariatur irure fugiat fugiat dolor qui. Velit aliquip fugiat eu ea dolor velit proident veniam consectetur ut dolor clipa sunt incididunt veniam
      duis nisi tempor.
    </p>
    <ul>
      <li>Skill 1</li>
      <li>Skill 2</li>
      <li>Skill 3</li>
      <li>Skill 4</li>
      <li>Skill 5</li>
    </ul>

  </div>

</div>
<!-- End row div -->

通过切换按钮打开暗模式时更改边框颜色

Change border color when turn on dark mode via toggle button

html

javascript

css

border