Click here to Skip to main content
15,077,054 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i am trying to make a button that makes the whole screen black, and then white if you hit it again. it works its just that when you hit the black one it only does the outlines of the website black ex= here is the link to the picture https://drive.google.com/file/d/1znZHMWs7H3UuzXO0fTmGXFAdYNm9ZJJ_/view?usp=sharing
and i just dont know how to make it so the whole backround is black.
my code is below. what do i do!!!

meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 25px;
  background-color:white;
  color: black;
  font-size: 25px;
}

.dark-mode {
  background-color: black;
  color: rgb(0, 0, 0);
}
</style>
</head>
<body>

<h2>Toggle Dark/Light Mode</h2>
<p>Click the button to toggle between dark and light mode for this page.</p>

<button onclick="myFunction()">Toggle dark mode</button>

<script>
function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}
</script>

</body>


What I have tried:

i hav tried to change colors and everything. i just dont know what to do
Posted
Updated 12-Jan-21 5:31am

1 solution

Your .dark-mode class sets both the background and foreground colours to black.

Set the foreground colour to white, and your code will work as expected:
CSS
.dark-mode {
    background-color: black;
    color: white;
}
Demo[^]
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900