Work on frontend and fix the theme_switcher bug

static/pywallter.css

@@ -22,11 +22,13 @@ body
 
 header {
     grid-area: header; 
+    width: 100%;
 }
 
-main
+body > main
 {
-    grid-area: main; 
+    grid-area: main;
+    width: 80%;
     text-align: justify;   
     overflow-y: scroll;
 }

static/vendors/picocss/theme-switcher.js

@@ -2,34 +2,83 @@
  * Minimal theme switcher
  *
  * Pico.css - https://picocss.com
- * Copyright 2020 - Licensed under MIT
+ * Copyright 2019-2023 - Licensed under MIT
  */
 
 const themeSwitcher = {
   // Config
+  _scheme: "auto",
+  menuTarget: "details[role='list']",
   buttonsTarget: "a[data-theme-switcher]",
   buttonAttribute: "data-theme-switcher",
   rootAttribute: "data-theme",
+  localStorageKey: "picoPreferredColorScheme",
 
   // Init
   init() {
-    document.querySelectorAll(this.buttonsTarget).forEach(
-      function (button) {
-        button.addEventListener(
-          "click",
-          function (event) {
-            event.preventDefault();
-            document
-              .querySelector("html")
-              .setAttribute(
-                this.rootAttribute,
-                event.target.getAttribute(this.buttonAttribute)
-              );
-          }.bind(this),
-          false
-        );
-      }.bind(this)
-    );
+    this.scheme = this.schemeFromLocalStorage;
+    this.initSwitchers();
+  },
+
+  // Get color scheme from local storage
+  get schemeFromLocalStorage() {
+    if (typeof window.localStorage !== "undefined") {
+      if (window.localStorage.getItem(this.localStorageKey) !== null) {
+        return window.localStorage.getItem(this.localStorageKey);
+      }
+    }
+    return this._scheme;
+  },
+
+  // Preferred color scheme
+  get preferredColorScheme() {
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  },
+
+  // Init switchers
+  initSwitchers() {
+    const buttons = document.querySelectorAll(this.buttonsTarget);
+    buttons.forEach((button) => {
+      button.addEventListener(
+        "click",
+        (event) => {
+          event.preventDefault();
+          // Set scheme
+          this.scheme = button.getAttribute(this.buttonAttribute);
+          // Close dropdown
+          document.querySelector(this.menuTarget).removeAttribute("open");
+        },
+        false
+      );
+    });
+  },
+
+  // Set scheme
+  set scheme(scheme) {
+    if (scheme == "auto") {
+      this.preferredColorScheme == "dark" ? (this._scheme = "dark") : (this._scheme = "light");
+    } else if (scheme == "dark" || scheme == "light") {
+      this._scheme = scheme;
+    }
+    this.applyScheme();
+    this.schemeToLocalStorage();
+  },
+
+  // Get scheme
+  get scheme() {
+    return this._scheme;
+  },
+
+  // Apply scheme
+  applyScheme() {
+    document.querySelector("html").setAttribute(this.rootAttribute, this.scheme);
+  },
+
+  // Store scheme to local storage
+  schemeToLocalStorage() {
+    if (typeof window.localStorage !== "undefined") {
+      window.localStorage.setItem(this.localStorageKey, this.scheme);
+    }
   },
 };