dark mode WIP

add_embed.html

@@ -31,6 +31,9 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
+
+                        
                     </div>
                 </div>
             </div>
@@ -56,6 +59,22 @@
                 menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
             });
         });
+        const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
+        
     </script>
 </body>
 </html>

add_task.html

@@ -127,6 +127,8 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
+
                         
                     </div>
                 </div>
@@ -157,6 +159,22 @@
             menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
         });
     });
+
+    const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
 </script>
 </body>
 </html>

calendar.html

@@ -52,6 +52,8 @@
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
                         
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
+
                     </div>
                 </div>
             </div>
@@ -258,6 +260,11 @@
             box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
         }
 
+        .dark .modal-content {
+            background: #2a2a2a;
+            color: white;
+        }
+
         #close-modal {
             background-color: #007bff;
             color: white;
@@ -366,5 +373,21 @@
     };
     reader.readAsText(file);
 });
+
+        const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
 </script>
 </html>    

embed_list.html

@@ -57,6 +57,52 @@
   margin: auto;
   border-radius: 4px;
 }
+
+.dark .embed-card {
+  background-color: #242526;
+  color: #e4e6eb;
+  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05);
+}
+
+.dark .embed-card h3 {
+  color: #ffffff;
+}
+
+.dark .register-button {
+  background-color: #3cb14a !important;
+  color: white !important;
+}
+
+.dark .register-button:hover {
+  background-color: #37a045 !important;
+}
+
+.dark button[type="submit"] {
+  background-color: #b13c33 !important;
+}
+
+.dark .header {
+  background-color: #242526 !important;
+}
+
+.dark .logo {
+  color: #e4e6eb !important;
+}
+
+.dark .nav-links button,
+.dark .dropdown-toggle {
+  color: #e4e6eb !important;
+}
+
+.dark .dropdown-menu {
+  background-color: #3a3b3c;
+  border-color: #555;
+}
+
+.dark body {
+  background-color: #18191a;
+  color: #e4e6eb;
+}
 </style>
 </head>
     
@@ -82,7 +128,7 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
-                        
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
                     </div>
                 </div>
             </div>
@@ -117,6 +163,23 @@
             menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
         });
     });
+
+    const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
+        
 </script>
 </body>
 </html>

eversyncc/static/index-style.css

@@ -4,6 +4,7 @@ body {
     font-family: Arial, sans-serif;
     background-color: #f0f2f5;
 }
+
 .header {
     background-color: #3b5998;
     height: 82px;
@@ -158,6 +159,18 @@ background-color: #03a9f4;
     background-color: #e07454;
 }
 
+.music {
+    background-color: #8ACE00;
+}
+
+.whiteboard {
+    background-color: white;
+}
+
+.timer {
+    background-color: white;
+}
+
 .service-button i {
 font-size: 70px;
 margin-bottom: 5px;
@@ -197,3 +210,53 @@ margin-bottom: 5px;
     left: 50%; 
     transform: translate(-50%, -50%);
 }
+
+.dark body {
+    background-color: #18191a;
+    color: #e4e6eb;
+}
+
+.dark .header {
+    background-color: #242526;
+}
+
+.dark .logo {
+    color: #e4e6eb;
+}
+
+.dark .nav-links a {
+    color: #e4e6eb;
+}
+
+.dark .nav-links a:hover {
+    background-color: rgba(255, 255, 255, 0.1); /* still okay */
+}
+
+.dark .welcome-box,
+.dark .content-box {
+    background-color: #242526;
+    color: #e4e6eb;
+    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+}
+
+.dark .welcome-box h1,
+.dark .content-box h2 {
+    color: #ffffff;
+}
+
+.dark .welcome-box p {
+    color: #b0b3b8;
+}
+
+.dark .logout-button {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+}
+
+.dark .logout-button:hover {
+    background-color: #4e4f50;
+}
+
+.dark .divider {
+    border-top: 1px solid #3e4042;
+}

eversyncc/static/register-style.css

@@ -124,3 +124,82 @@ body {
     border-radius: 6px;
     margin-bottom: 5px;
 }
+
+.dark body {
+    background-color: #18191a;
+    color: #e4e6eb;
+}
+
+.dark .header {
+    background-color: #242526;
+}
+
+.dark .logo {
+    color: #e4e6eb;
+}
+
+.dark .container {
+    background-color: #18191a;
+}
+
+.dark .register-box {
+    background-color: #242526;
+    color: #e4e6eb;
+    box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);
+}
+
+.dark .register-box h2 {
+    color: #ffffff;
+}
+
+.dark .form-group label {
+    color: #e4e6eb;
+}
+
+.dark .form-group input {
+    background-color: #3a3b3c;
+    color: #e4e6eb;
+    border: 1px solid #555;
+}
+
+.dark .form-group input:focus {
+    border-color: #4599ff;
+    box-shadow: 0 0 0 2px rgba(70, 130, 180, 0.3);
+}
+
+.dark .register-button {
+    background-color: #4599ff;
+    color: white;
+}
+
+.dark .register-button:hover {
+    background-color: #357ce5;
+}
+
+.dark .divider {
+    border-top: 1px solid #3e4042;
+}
+
+.dark .login-link {
+    background-color: #3cb14a;
+    color: white;
+}
+
+.dark .login-link:hover {
+    background-color: #37a045;
+}
+
+.dark .error-message {
+    color: #ffb3b3;
+    background-color: #2a1a1a;
+    border: 1px solid #a33;
+}
+
+.dark .errorlist {
+    color: #ffb3b3;
+}
+
+.dark .errorlist li {
+    background-color: #2a1a1a;
+    border: 1px solid #a33;
+}

file_list.html

@@ -43,6 +43,7 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
                         
                     </div>
                 </div>
@@ -227,6 +228,22 @@ try {
     console.error("Push subscription failed:", error);
 }
 }
+
+const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
 </script>
 
 

index.html

@@ -70,6 +70,7 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
 
                     </div>
                 </div>
@@ -131,7 +132,7 @@
             </div>
 
             <div class="button-container">
-                <a href="/pomodoro" style="text-decoration: none;"><div class="service-button pomodoro">
+                <a href="/pomodoro" style="text-decoration: none;"><div class="service-button timer">
                     <i class="fa-solid fa-hourglass"></i>
                     timer
                 </div></a>
@@ -187,6 +188,22 @@
             menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
         });
     });
+
+    const toggle = document.getElementById("themeToggle");
+    const root = document.documentElement;
+
+    if (localStorage.getItem("theme") === "dark") {
+    root.classList.add("dark");
+    }
+
+    toggle.addEventListener("click", () => {
+    root.classList.toggle("dark");
+    if (root.classList.contains("dark")) {
+        localStorage.setItem("theme", "dark");
+    } else {
+        localStorage.setItem("theme", "light");
+    }
+    });
 </script>
 </body>
 </html>

task_list.html

@@ -85,6 +85,7 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
                     </div>
                 </div>
             </div>
@@ -125,6 +126,21 @@
                 menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
             });
         });
+        const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
     </script>
 </body>
 </html>

upload.html

@@ -34,7 +34,7 @@
                             {% csrf_token %}
                             <button type="submit" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Log Out</button>
                         </form>
-                        
+                        <button id="themeToggle" class="logout-button" style="background-color: transparent; color: white; border: none; cursor: pointer;">Toggle Dark Mode</button>
                     </div>
                 </div>
             </div>
@@ -86,6 +86,22 @@
                 menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
             });
         });
+        const toggle = document.getElementById("themeToggle");
+        const root = document.documentElement;
+
+        if (localStorage.getItem("theme") === "dark") {
+        root.classList.add("dark");
+        }
+
+        toggle.addEventListener("click", () => {
+        root.classList.toggle("dark");
+        if (root.classList.contains("dark")) {
+            localStorage.setItem("theme", "dark");
+        } else {
+            localStorage.setItem("theme", "light");
+        }
+        });
+        
     </script>
 
 </body>