HTML,CSS Dark/White mode?
Moin, Ich habe ein Dark/White mode gemacht aber irgendwie wechselt er nicht die font-color zu weiß wenn ich ihn den darkmode gehe.Vielleicht wäre jemand so Nett und würde mit genau sagen wo was hin muss.
LG
HTML:
CSS:
4 Antworten
Es wäre wohl gut, wenn du zuerst einmal all die Fehler behebst, die sich in deinen Dateien tummeln.
- Der Doctype für das Dokument fehlt.
- Die br-Tags in den Zeilen 3, 4 und 5 sind im head-Bereich fehl am Platz. Der head-Bereich führt nur Metainformationen auf, die das Dokument allgemein beschreiben. Sie werden auch nicht sichtbar auf der Webseite gerendert.
- Du öffnest zwei body-Elemente, doch nur eines darf es geben. Entferne das in Zeile 10 und gib dem aus Zeile 15 stattdessen das id-Attribut.
- Bei link-Tags handelt es sich um Metainformationen, die in den head gehören. Wenn du den Fehler aus Punkt 3 so wie von mir beschrieben löst, wird auch dieser Fehler behoben.
- Dein Editor markiert den center-Tag nicht ohne Grund rot. Er gehört schon lange nicht mehr zum Standard. Das Bild lässt sich auch mit CSS zentrieren. Ersetze das center-Element bspw. gegen ein div-Element und ordne diesem einen CSS-Selektor mit dem text-align-Property zu.
- Die Attribute height und width erwarten ausschließlich Ziffern in ihrem Attributwert. Wenn du mit zusätzlichen Einheitsangaben wie px arbeiten möchtest, definiere die Höhe und Breite via CSS.
- Deinem img-Element fehlt ein alt-Attribut. Welchen Wert das Attribut erhält, kannst du mit diesem Guide ermitteln.
- Das frameborder-Attribut ist obsolet. Du kannst es via CSS mit dem border-Property ersetzen.
- Der CSS-Selektor .conatiner verweist auf kein Element. Vermutlich wolltest du auf die Klasse container zeigen.
Hinsichtlich deines Farbproblems fällt auf, dass es kein Element mit der ID text gibt. Außerdem setzt du in verschiedenen Selektoren eine explizite Textfarbe, was einen dynamischen Farbwechsel aufwendig gestaltet.
Ein moderner Weg wäre die Arbeit mit CSS-Variablen.
Beispiel:
body {
--text-color: black;
}
body.dark-theme {
--text-color: white;
}
.title {
color: var(--text-color);
/* ... */
}
p {
color: var(--text-color);
/* ... */
}
Die Variable --text-color bestimmt die Textfarbe. Sie wird überall dort eingesetzt, wo man sie als dynamische Schriftfarbe nutzen möchte. Wenn dem body-Element die Klasse dark-theme zugeordnet wird, wird auch der Variablenwert überschrieben. Sofern notwendig, kann man auch für die Hintergrundfarbe noch eine Variable definieren.
Mit JavaScript brauchst du nun nur noch die Klasse hinzufügen/entfernen.
if (/* checked ... */) {
document.getElementById("body").classList.add("dark-theme");
}
else {
document.getElementById("body").classList.remove("dark-theme");
}
Alle Elemente, die von einem Dark-/Lightmodus betroffen sein sollen, müssen dieselbe Textfarbe nutzen, die für das body-Element definiert wird. Entweder du überschreibst das color-Property für sie erst gar nicht oder du setzt wie oben gezeigt eine Variable.
Mir ist halt wichtig das am Ende alles klappt mit den Farben
Schwer zu sagen mit deinen screenshots.
Ich nehme an dass du ein dark.css oder so laedst wenn darkmode aktiv ist, und da muss dann ueberall wo color: black steht, eine andere Farbe hin, z.B. bei p und title2
Ich finde "body" im CSS, aber kein "#text" im CSS? Wo ist das denn? Ich kann keinen Eintrag zu dem Objekt finden worauf du dich beziehst. Generell würde ich dir empfehlen, dass du nicht, die Farbe via Javascript änderst, sondern via Javascript CSS Klassen hinzufügst oder entfernst. Wenn du Hilfe dabei brauchst, könnte ich dir allerdings nur mit Jquery gut helfen, da ich es mit Jquery gelernt habe. LG
Wie schon gesagt mir ist wichtig das alles mit den Farben am Ende klappt.
Glaubst du es liegt daran das Text nicht im css ist ?
Ich würde es so machen (mit Jquery):
#text {color: #000;}
.whitetext {color: #fff !important;}
$('#darkmodebutton').click(function(){
$('#text').addClass('whitetext');
});
Von der Logik her. Falls es mit important nicht funktioniert, dann würde ich zwei Klassen erstellen eine für Whitemode, eine für Darkmode und eine Variable speichern, in welchem Modus sich der User gerade befindet. Dann Befehle wie "toggle" verwenden.
Und ja du solltest auf jeden Fall einen Eintrag im CSS machen, sodass eine Grundfarbe mal eingestellt ist. Vielleicht klappt es auch mit deiner Methode.
Ich müsste sowas selbst testen, troubleshooten und würde mich ganz einfach so lang damit spielen bis es funktioniert. Es gibt nie Fertiglösungen. Auf jeden Fall ist das einfach lösbar. Nur ich habe letztes Mal hier jemandem eine CSS geschrieben und dann hat der nichtmal Danke gesagt und deswegen mach ich keine Projekte mehr gratis für andere.
Ja ich versuche es mal danke für den Command ich setze ihn mal ein
Du kannst den Command nicht einsetzen, da das Jquery und nicht Javascript ist. Ich hab es auch nicht auf die Richtigkeit geprüft, es war eher so ein Denkanstoß. Wenn du nutzen willst, was ich schreibe, musst du zuerst mit einem Skript davor, Jquery einbinden.
Das sieht dann in etwa so aus:
<script src/href="www.internetadresse.Jquery.min"></script>
habe schon fast alle Fehler dank dir entfernen können, aber was muss ich jetzt alles aus css löschen weil du hast mir ja jetzt ein command geschrieben wäre nett wenn du es mir mitteilst danke!