Color Themes

[p-runge]

Es sollen mehrere Color Themes erstellt werden. Davon soll man eines auswählen können. Das gewählte Theme soll im Browser gespeichert werden.

Themes kann man über CSS einbinden, indem man CSS Variablen definiert. So hat man z.B. eine Variable --primary-color, welche man in seinem Theme über den :root Selektor definiert, und welche man dann über var(--primary-color) an anderer Stelle verwenden kann.

Man braucht nun also für jedes auswählbare Theme eine eigene Definition dieser Variablen, und kann dann schauen, je nachdem, welches Theme ausgewählt ist, welche dieser Definitionen man in seine App lädt.

Aufgaben

• [ ] Es wird auf der Startseite der Auswahlscreen angezeigt
• [ ] Beim Klick auf einen der Auswahlbuttons, soll im Local Storage das Theme gespeichert werden
• [ ] Es gibt für jedes Theme eine eigene CSS Datei, die ausschließlich die CSS Variablen im :root Scope definiert
• [ ] Überlege dir welche Farben alles dynamisch sein sollen, und definiere diese im :root Scope eines jeden Themes

Wenn bereits ein Theme im Local Storage ist, sollen folgende Dinge passieren:

• [ ] Es wird in _app.tsx dynamisch die zusätzliche CSS Datei geladen

  // dynamically load color theme css
  useEffect(() => {
  const theme = localStorage.getItem("theme");
  if (theme === "red") {
    require("~/styles/theme-red.css");
  }
  // else if ...
  }, []);

• [ ] Es wird statt des Auswahlscreens die normale Startseite gezeigt