added themes

index.html

@@ -20,12 +20,18 @@
     </nav>
 
     <div class="sidebar-bottom-margin">
-      <div class="lang-dropdown" id="lang-dropdown">
-        <button id="lang-button">Sprache</button>
+      <div class="website-config">
+        <label class="switch">
+          <input type="checkbox" id="themeToggle">
+          <span class="slider"></span>
+        </label>
+        <div class="lang-dropdown" id="lang-dropdown">
+          <button id="lang-button">Sprache</button>
 
-        <div id="lang-menu" class="lang-menu hidden">
-          <div class="lang-item hidden" data-lang="de">de</div>
-          <div class="lang-item hidden" data-lang="en">en</div>
+          <div id="lang-menu" class="lang-menu hidden">
+            <div class="lang-item hidden" data-lang="de">de</div>
+            <div class="lang-item hidden" data-lang="en">en</div>
+          </div>
         </div>
       </div>
 

scripts/main_page.js

@@ -287,4 +287,24 @@ function getCookie(name) {
     }
 
     return null;
+}
+
+const toggle = document.getElementById("themeToggle");
+
+toggle.addEventListener("change", () => {
+    document.documentElement.classList.toggle("dark", toggle.checked);
+    if (toggle.checked) {
+        setCookie("theme", "dark", 60 * 60 * 24 * 7);
+    }
+    else {
+        setCookie("theme", "light", 60 * 60 * 24 * 7);
+    }
+
+});
+
+const theme = getCookie("theme");
+
+if (theme === "dark") {
+    document.documentElement.classList.add("dark");
+    toggle.checked = true;
 }

styles/main_style.css

@@ -12,15 +12,13 @@
     --margin-main-content: 100px;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #5E4C93;
-        --bg2: #1b162a;
-        --text: #FFFFFF;
-        --surface: #3e3261;
-        --muted: #C5C1D1;
-        --border: #20192a;
-    }
+.dark {
+    --bg: #130e21;
+    --bg2: #090710;
+    --text: #FFFFFF;
+    --surface: #3e3261;
+    --muted: #C5C1D1;
+    --border: #20192a;
 }
 
 html {
@@ -51,6 +49,65 @@ a {
     box-sizing: border-box;
 }
 
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 52px;
+    height: 28px;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--surface);
+    border-radius: 26px;
+    border: 1px solid var(--border);
+}
+
+.slider:hover {
+    border: 1px solid var(--text);
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 20px;
+    width: 20px;
+    left: 3px;
+    bottom: 3px;
+    background-color: var(--muted);
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+input:checked+.slider:before {
+    background-color: var(--bg);
+}
+
+input:checked+.slider {
+    background-color: var(--surface);
+}
+
+input:checked+.slider:before {
+    transform: translateX(24px);
+}
+
+.website-config {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .sidebar {
     background-color: var(--bg);
     margin-top: 0;