Dark/light mode funktioniert nicht ganz

Nico2000 · 28. Mai 2023

moin,ich habe ein Dark/Light mode erstellt aber leider wechselt er nicht die Farbe wenn ich ihn denn darkmode gehe ich hätte sie gerne weiß. Nicht zu vergessen ich bin neu also wenn ich Fehler habe mich gerne korrigieren!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="resources\css\light.css">
<script src="app.js"></script>
<body id="body">
<button class="button" onclick="window.location.href = '';">Neymar Jr</button>

<title>
Lionel Messi
</title>

<div class="title">
Info zu Messi
</div>

<div>
<label class="switch">
<input type="checkbox" id="check" onclick="changeTheme()"/>
<span class="toggle round"></span>
</label>
</div>
<script>
function changeTheme() {
var toggle = document.getElementById("check").checked;

if(toggle == true) {
document.getElementById("body").style.backgroundColor= "#1b1b1b";
document.getElementById("text").style.color = "white";
}
else {
document.getElementById("body").style.backgroundColor= "#fffff1";
document.getElementById("text").style.color = "#black";
}
}
</script>

<div class="title2">
Wer ist Messi überhaupt
</div>
<br>
<center><img src="resources\images\Messi.jpg" height="320" width="600"></center>
<br>
<div class="p1">
Lionel Messi ist ein argentinischer Fußballspieler, der als einer der besten
Spieler aller Zeiten gilt.
Geboren am 24.<br>
Juni 1987 in Rosario, Argentinien, begann Messi seine Karriere
in der Jugendakademie des FC Barcelona.<br>
Im Alter von 17 Jahren debütierte er für die erste Mannschaft
und etablierte sich schnell als herausragender Spieler.<br>
Messi zeichnet sich durch seine unglaubliche Technik, Geschwindigkeit und Ballbeherrschung aus.<br>
Er ist bekannt für seine präzisen Pässe, seine beeindruckende Dribbelkunst und seine Fähigkeit,<br>
Tore aus fast jeder Position zu erzielen.
Messi hat zahlreiche individuelle Auszeichnungen gewonnen,<br>
darunter den Ballon d'Or, den er mehrmals erhalten hat.
Während seiner Zeit bei Barcelona gewann <br> Messi zahlreiche nationale und internationale Titel,
darunter die UEFA Champions League und die spanische La Liga.<br>
Im August 2021 wechselte er zum
französischen Verein Paris Saint-Germain (PSG), <br> nachdem er Barcelona aufgrund finanzieller Schwierigkeiten verlassen hatte.<br>
Messi hat auch eine beeindruckende internationale Karriere mit der argentinischen Nationalmannschaft hinter sich.<br>
Im Jahr 2021 führte er das Team zum Gewinn der Copa América, seinem ersten großen internationalen Titel mit Argentinien.<br>
Lionel Messi wird aufgrund seines außergewöhnlichen Talents, seiner Erfolge und seiner Dominanz
auf dem Platz von vielen <br> als einer der größten Fußballer aller Zeiten betrachtet. Seine Präsenz
und seine spielerischen Fähigkeiten haben ihn zu einer lebenden<br> Legende des Sports gemacht...
</div>
<br>
<center><iframe width="560" height="315" src="

" title="YouTube video player" frameborder="5" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
<br>
<center><iframe width="560" height="315" src="

" title="YouTube video player" frameborder="5" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></center>
<br>
</body>

CSS:

.title {
font-family: Sans-serif;
color: black;
text-align: center;
font-size: 40px;
}
.title2 {
font-family: Sans-serif;
color: black;
text-align: center;
font-size: 30px;
}

.p1 {
font-family: Sans-serif;
color: black;
text-align: center;
font-size: 20px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: white;
height: 100vh;
width: 100%;
background-color: white;
}
p {
position: relative;
top: 10px;
left: 50px;
font-size: 4rem;
transition: .4s .2s;
}
.switch {
position: relative;
display: inline-block;
width: 90px;
height: 52px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: pointer;
background-color: #CCC;
transition: .4s;
}
.toggle.round {
border-radius: 34px;
}
.toggle:before {
position: absolute;
content: "";
height: 30px;
width: 30px;
left: 10px;
bottom: 10px;
background-color: rgb(255, 255, 0);
box-shadow: 0 0 15px 15px rgb(238, 238, 121);
transition: .4s;
}
.toggle::after {
position: absolute;
content: "";
height: 35px;
width: 35px;
left: 10px;
bottom: 12px;
background-color: transparent;
opacity: 0;
transition: .4s;
border-radius: 100px;
}
.toggle.round:before {
border-radius: 50%;
}
input:checked + .toggle {
background-color: #1b1b1b;
border: 1px solid white;
box-shadow: 0 0 5px 1px white;
}

input:checked + .toggle:before {
transform:translateX(38px);
background-color: white;
box-shadow: 0 0 5px 1px white;
}
input:checked + .toggle:after {
opacity: 1;
transform: translateX(30px);
background-color: #1b1b1b;
}

Lotsenbruder · 28. Mai 2023

Schau dir mal bitte an was Du gepostet hast. 😳

kim88 · 28. Mai 2023

Wenn du hier wirklich Hilfe willst nutze bitte die Code Tags, das kann so kein Mensch lesen.

abcddcba · 28. Mai 2023

es wird nicht der Grund sein warum es gar nicht geht, aber sowas wie document.getElementById("text").style.color = "#black"; ist auch kein richtiger Wert fuer die Farbe, oder? Entweder du nimmst den Namen oder einen richtigen Farbcode. Oder kann man beides mischen? Das Hash vor "black" sieht fuer mich als nicht Web-Developer auf jeden Fall falsch aus. Oder ist HTML/CSS resp. JS da enspannt?

Suche

Dark/light mode funktioniert nicht ganz

Nico2000

Cadet 1st Year

Lotsenbruder

Lieutenant

kim88

Commander

abcddcba

Rear Admiral

Ähnliche Themen