Wie macht man das?

Wenn ich eine Webseite mit Dunklem und Hellem design machen will, muss ich 2 CSS Dateien machen

Answer 1

[regex9]

Es ist zwar eine Lösungsoption, aber es klappt auch mit nur einer CSS-Datei.

Du kannst die Farben mittels Variablen festlegen:

:root {
  --bg: white;
  --fg: black;
}

.dark {
  --bg: black;
  --fg: white;
}

body {
  background-color: var(--bg);
  color: var(--fg);
}

Via JavaScript kann die .dark-Klasse gesetzt werden, die die Werte der Variablen umschaltet.

<label for="language-switch">Switch</label>
<input id="language-switch" type="checkbox">
<script>
  const body = document.querySelector("body");
  document.querySelector("#language-switch").addEventListener("change", evt => {
    body.classList.toggle("dark");
  });
</script>

Answer 2

[EinAlexander]

Wenn ich eine Webseite mit Dunklem und Hellem design machen will, muss ich 2 CSS Dateien machen

das wäre auf jeden Fall die für Dich übersichtlichste Version.

Alex

Comments

[NilsJonos]

Tolle Antwort

Answer 3

[NackterGerd]

Nö natürlich nicht

Es ändern sich ja nur die Farben

Die ganzen Positionen bleiben doch gleich.

Einfach umschalten mit Klassen

Woher ich das weiß: eigene Erfahrung

Answer 4

[DodgeRT]

kommt drauf an was du alles umstellen musst. wenn es nur z.b. hintergrundfarbe und schriftfarbe ist, und des recht allgemein definiert ist - dann geht des auch mit einer id.

cookie setzen, mit php auslesen und dann die id festlegen (dunkel oder hell)