nicht angemeldet
Gunnar Bittersmann@@Ed Straker
Ich gestalte eine Homepage, auf der der Benutzer zwischen vier Farbdesigns wählen kann. Die entsprechenden Farbangaben befinden sich in ausgelagerten CSS-Dateien (lila.css, gruen.css, rosa.css und schwarz.css), wobei lila.css das Standarddesign ist.
Ich würde da nicht jeweils ein Stylesheet für ein Farbschema machen und diese umschalten, sondern für einen Farbwechsel einfach nur eine Klasse am Root-Element umschalten:
<html class="green">
Die Farben werden in custom properties festgehalten:
:root, :root.purple {
--background-color: plum;
--text-color: black;
--accent-color: rebeccapurple;
background-color: var(--background-color);
color: var(--text-color);
}
:root.green {
--background-color: palegreen;
--text-color: black;
--accent-color: seagreen;
}
:root.black {
--background-color: #222;
--text-color: white;
--accent-color: wheat;
}
h1 { color: var(--accent-color) }
Alle anderen Formatierungsangaben befinden sich inline auf den jeweiligen Seiten.
Das ist wohl keine so gute Idee.
Um das auf der Startseite gewählte Design auch auf die beiden anderen Unterseiten zu übertragen, muss ein Cookie gespeichert werden, auf das die Seiten beim Aufruf zugreifen können.
Muss nicht. Dass localStorage Mittel der Wahl ist, sagte Felix ja schon.
🖖 Живіть довго і процвітайте
Ad astra per aspera
MudGuard
Matthias Scharwies
Rolf B
Auge