added themes

index.html

@@ -20,6 +20,11 @@
     </nav>
 
     <div class="sidebar-bottom-margin">
+      <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>
 
@@ -28,6 +33,7 @@
             <div class="lang-item hidden" data-lang="en">en</div>
           </div>
         </div>
+      </div>
 
       <div id="sidebar-bottom">
         <a target="_blank" link.rel="noopener noreferrer"

scripts/main_page.js

@@ -288,3 +288,23 @@ 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,16 +12,14 @@
     --margin-main-content: 100px;
 }
 
-@media (prefers-color-scheme: dark) {
-    :root {
-        --bg: #5E4C93;
-        --bg2: #1b162a;
+.dark {
+    --bg: #130e21;
+    --bg2: #090710;
     --text: #FFFFFF;
     --surface: #3e3261;
     --muted: #C5C1D1;
     --border: #20192a;
 }
-}
 
 html {
     scroll-behavior: smooth;
@@ -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;