Dark Mode

Question

2 questions, first i want it to not be a one time click if you get what i mean. And how would i make the css when you click it the button insets?

https://code.sololearn.com/WdtITbzZWQwU/?ref=app

Answer 1

Your Mom, Is it really difficult to guess to add the desired style to "else", you've been studying on SoloLearn for quite a long time, haven't you?

Answer 2

function togglemode(){
var main = document.getElementById("main");
if(!main.classList.contains("dark")){
main.classList.add("dark")
main.classList.remove("light")
}
else {
main.classList.add("light")
main.classList.remove("dark")
}

}

hope this helps

Answer 3

How TO - Toggle Dark Mode

https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp

Answer 4

SoloProg don't forget to declare the type of the variable:
const darkmodeisbetterlol = ()=>{
const darkmode = document.body;
darkmode.classList.toggle("dark-mode");
}

Answer 5

Your Mom, Fu Foy probably wants to tell you that you would change your condition to:
if(darkmode.classList.contains("dark-mode")) {...}

Although you can use the .toggle() method you already know:
function darkmodeisbetterlol() {
let darkmode = document.body;
if(darkmode.classList.toggle("dark-mode")){
document.getElementById("colors")
.style.color = "white";
}
}

Answer 6

Your Mom , yes.

Answer 7

// try it

js

darkmodeisbetterlol = () => {
let darkmode = document.body;
darkmode.classList.toggle("dark-mode");
}

css

body {
background-color: white;
color: black;
}

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

button {
/*background-color: transparent;*/
height: 75px;
width: 250px;
font-size: 30px;
font-family: sans-serif;
border: 3px outset black;
border-radius: 5px;
}

Answer 8

// try it v.2 :)

Js

darkmodeisbetterlol = () => {
let darkmode = document.body;
darkmode.classList.toggle("dark-mode");

let darkmodeBtn = document.getElementById("colors");
darkmodeBtn.classList.toggle("dark-mode-button");
}

css

body {
background-color: white;
color: black;
}

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

button {
/*background-color: transparent;*/
height: 75px;
width: 250px;
font-size: 30px;
font-family: sans-serif;
border: 3px outset black;
border-radius: 5px;
background-color: white;
color: black;
}

.dark-mode-button {
border: 3px outset white;
background-color: black;
color: white;
}

Answer 9

K thanks

Answer 10

Try this, Just using if/else statement in javascript :-)

function toggle_mode(){
var x = document.getElementById("anydiv");
if (x.style.background == "") {
x.style.background = "black";
} else {
x.style.background = "";
}
}

Answer 11

What do i put in my html for the document.getElementById(“main”)?

Answer 12

So Solo i just change it to contains?

Answer 13

Yes, but when the screen is black and you click it againandbthe screen turns white the text stays white, thats the problem

Answer 14

Actually you can use a checkbox there and check for the checked state of the checkbox