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

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;
}

Answer 2

Just remove color property from your border declarations:

 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 -->