From 6b18295b146a1e99e76e7f54fe19a02ae524a601 Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Tue, 28 Oct 2025 20:30:43 +0100
Subject: [PATCH] horrible theme switching javascript

---
 web/base.html   | 17 +++++++++++
 web/footer.html | 75 ++++++++++++++++++++++++++++++++++++++++++++++++-
 web/input.css   |  2 ++
 3 files changed, 93 insertions(+), 1 deletion(-)

diff --git a/web/base.html b/web/base.html
index 52fbcf5..3326353 100644
--- a/web/base.html
+++ b/web/base.html
@@ -10,6 +10,23 @@
             sizes="64x64"
             href="/favicon-x64.png"
         />
+
+        <script>
+            const themes = ["system", "dark", "light"];
+            let theme = window.localStorage.getItem("gractwopl-theme");
+            if (!themes.includes(theme)) {
+                window.localStorage.setItem("gractwopl-theme", "system");
+            }
+            theme = window.localStorage.getItem("gractwopl-theme");
+            if (theme === "system") {
+                if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+                    document.documentElement.classList.add("dark");
+                }
+            }
+            if (themes.includes(theme)) {
+                document.documentElement.classList.add(theme);
+            }
+        </script>
         <link href="/styles.css" rel="stylesheet" />
         <title>{% block title %}{{ title }}{% endblock %}</title>
         {% block head %} {% endblock %}
diff --git a/web/footer.html b/web/footer.html
index 964aeb6..1133374 100644
--- a/web/footer.html
+++ b/web/footer.html
@@ -13,9 +13,82 @@
             </div>
             <p class="text-neutral-500 dark:text-neutral-400 text-sm">
                 Poznańskie stowarzyszenie okołogrowe, anime-informatyzacyjno
-                konwentowo-hangoutowe.
+                konwentowo-hangoutowe. <br />
+                <button
+                    id="motyw"
+                    onclick="themechanger()"
+                    class="cursor-pointer text-neutral-400 dark:text-neutral-500 hover:underline"
+                >
+                    Zmień motyw.
+                </button>
             </p>
         </section>
+        <script>
+            const themetextsetter = () => {
+                const sysconf = window.matchMedia(
+                    "(prefers-color-scheme: dark)",
+                ).matches
+                    ? "dark"
+                    : "light";
+                const currentconf =
+                    window.localStorage.getItem("gractwopl-theme");
+
+                const setLight = "Jasny motyw.";
+                const setDark = "Ciemny motyw.";
+                const setSystem = "Automatyczny motyw.";
+
+                if (sysconf === "dark" && currentconf === "system") {
+                    document.querySelector("#motyw").innerText = setLight;
+                }
+                if (sysconf === "dark" && currentconf === "light") {
+                    document.querySelector("#motyw").innerText = setDark;
+                }
+                if (sysconf === "dark" && currentconf === "dark") {
+                    document.querySelector("#motyw").innerText = setSystem;
+                }
+
+                if (sysconf === "light" && currentconf === "system") {
+                    document.querySelector("#motyw").innerText = setDark;
+                }
+                if (sysconf === "light" && currentconf === "dark") {
+                    document.querySelector("#motyw").innerText = setLight;
+                }
+                if (sysconf === "light" && currentconf === "light") {
+                    document.querySelector("#motyw").innerText = setSystem;
+                }
+            };
+            themetextsetter();
+            const themechanger = () => {
+                const sysconf = window.matchMedia(
+                    "(prefers-color-scheme: dark)",
+                ).matches
+                    ? "dark"
+                    : "light";
+                const currentconf =
+                    window.localStorage.getItem("gractwopl-theme");
+                if (sysconf === "dark" && currentconf === "system") {
+                    window.localStorage.setItem("gractwopl-theme", "light");
+                }
+                if (sysconf === "dark" && currentconf === "light") {
+                    window.localStorage.setItem("gractwopl-theme", "dark");
+                }
+                if (sysconf === "dark" && currentconf === "dark") {
+                    window.localStorage.setItem("gractwopl-theme", "system");
+                }
+
+                if (sysconf === "light" && currentconf === "system") {
+                    window.localStorage.setItem("gractwopl-theme", "dark");
+                }
+                if (sysconf === "light" && currentconf === "dark") {
+                    window.localStorage.setItem("gractwopl-theme", "light");
+                }
+                if (sysconf === "light" && currentconf === "light") {
+                    window.localStorage.setItem("gractwopl-theme", "system");
+                }
+                themetextsetter();
+                location.reload();
+            };
+        </script>
         <section class="max-w-sm w-full">
             <h1
                 class="font-medium text-lg text-neutral-500 dark:text-neutral-400 pb-4"
diff --git a/web/input.css b/web/input.css
index 17b2bd3..17c29cb 100644
--- a/web/input.css
+++ b/web/input.css
@@ -9,6 +9,8 @@
     --color-gractwo-blu-dark: #3e8f9b;
 }
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @layer components {
     .bg-gractwo-index {
         background-size: "100% 100%";