Change border color when turn on dark mode via toggle button

Question

I got everything I need to style my website. So now when I toggle dark mode on, the border color disappeared.

I got my border styling done in css and the change from a white background to a black background with white text in javascript by adding the button in html. What should I do if I want to make a black border become a white border?

Is there something else I need to add in javascript or css to make this happen?

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

Add this to your css:

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