From 90de11bdf28b36c59f9b61efb88274a6dbbce635 Mon Sep 17 00:00:00 2001
From: rudy3333 <mmax3163@gmail.com>
Date: Mon, 2 Jun 2025 19:45:26 +0200
Subject: [PATCH 1/2] dark mode wip

---
 calendar.html                       | 22 ++++++++
 embed_list.html                     | 63 +++++++++++++++++++++++
 eversyncc/static/index-style.css    | 63 +++++++++++++++++++++++
 eversyncc/static/register-style.css | 79 +++++++++++++++++++++++++++++
 index.html                          | 19 ++++++-
 task_list.html                      | 16 ++++++
 6 files changed, 261 insertions(+), 1 deletion(-)

diff --git a/calendar.html b/calendar.html
index 19143dc..8b90a4f 100644
--- a/calendar.html
+++ b/calendar.html
@@ -36,6 +36,7 @@
             <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
             <a href="/" class="logo" >eversync</a>
             <div class="nav-links" style="position: relative;">
+                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -258,6 +259,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 +372,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>    
\ No newline at end of file
diff --git a/embed_list.html b/embed_list.html
index 0e92246..84296c9 100644
--- a/embed_list.html
+++ b/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>
     
@@ -67,6 +113,7 @@
             <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
             <a href="/" class="logo" >eversync</a>
             <div class="nav-links" style="position: relative;">
+                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -117,6 +164,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>
\ No newline at end of file
diff --git a/eversyncc/static/index-style.css b/eversyncc/static/index-style.css
index 5c29e0b..150ee80 100644
--- a/eversyncc/static/index-style.css
+++ b/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;
@@ -196,4 +209,54 @@ margin-bottom: 5px;
     top: 50%;             
     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;
 }
\ No newline at end of file
diff --git a/eversyncc/static/register-style.css b/eversyncc/static/register-style.css
index 43d8a31..8f70112 100644
--- a/eversyncc/static/register-style.css
+++ b/eversyncc/static/register-style.css
@@ -123,4 +123,83 @@ body {
     border: 1px solid #ffccc7;
     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;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6e4a69b..2e44efd 100644
--- a/index.html
+++ b/index.html
@@ -55,6 +55,7 @@
             <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
             <a href="/" class="logo" >eversync</a>
             <div class="nav-links" style="position: relative;">
+                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -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>
\ No newline at end of file
diff --git a/task_list.html b/task_list.html
index e2ec3f0..b28519b 100644
--- a/task_list.html
+++ b/task_list.html
@@ -72,6 +72,7 @@
             </a>
             <a href="/" class="logo">eversync</a>
             <div class="nav-links" style="position: relative;">
+                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -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>
\ No newline at end of file

From a3b80cdb050da24c36f43b3ba9eb477147c88b7d Mon Sep 17 00:00:00 2001
From: rudy3333 <mmax3163@gmail.com>
Date: Mon, 2 Jun 2025 19:57:36 +0200
Subject: [PATCH 2/2] dark mode WIP

---
 add_embed.html  | 19 +++++++++++++++++++
 add_task.html   | 18 ++++++++++++++++++
 calendar.html   |  3 ++-
 embed_list.html |  4 ++--
 file_list.html  | 17 +++++++++++++++++
 index.html      |  4 ++--
 task_list.html  |  2 +-
 upload.html     | 18 +++++++++++++++++-
 8 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/add_embed.html b/add_embed.html
index ca7c993..18e8f81 100644
--- a/add_embed.html
+++ b/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>
\ No newline at end of file
diff --git a/add_task.html b/add_task.html
index 81bac4c..6558ea2 100644
--- a/add_task.html
+++ b/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>
\ No newline at end of file
diff --git a/calendar.html b/calendar.html
index 8b90a4f..c3126ff 100644
--- a/calendar.html
+++ b/calendar.html
@@ -36,7 +36,6 @@
             <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
             <a href="/" class="logo" >eversync</a>
             <div class="nav-links" style="position: relative;">
-                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -53,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>
diff --git a/embed_list.html b/embed_list.html
index 84296c9..d805263 100644
--- a/embed_list.html
+++ b/embed_list.html
@@ -113,7 +113,6 @@
             <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
             <a href="/" class="logo" >eversync</a>
             <div class="nav-links" style="position: relative;">
-                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -129,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>
@@ -180,6 +179,7 @@
             localStorage.setItem("theme", "light");
         }
         });
+        
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/file_list.html b/file_list.html
index 9ea649f..0b1ea20 100644
--- a/file_list.html
+++ b/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>
 
 
diff --git a/index.html b/index.html
index 2e44efd..2890702 100644
--- a/index.html
+++ b/index.html
@@ -55,7 +55,6 @@
             <a href="/"><img src="{% static 'eversync2.png' %}" alt="Eversync Logo" style="height: 80px; margin-right: 10px; display: flex; align-items: center; gap: 5px;"></a>
             <a href="/" class="logo" >eversync</a>
             <div class="nav-links" style="position: relative;">
-                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -71,7 +70,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>
             </div>
diff --git a/task_list.html b/task_list.html
index b28519b..73f52f1 100644
--- a/task_list.html
+++ b/task_list.html
@@ -72,7 +72,6 @@
             </a>
             <a href="/" class="logo">eversync</a>
             <div class="nav-links" style="position: relative;">
-                <button id="themeToggle">🌙 Toggle Dark Mode</button>
                 <div class="dropdown">
                     <button class="dropdown-toggle" style="background: none; border: none; color: white; font-size: 16px; cursor: pointer;">
                         Welcome, {{ user.username }} <i class="fas fa-caret-down"></i>
@@ -86,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>
diff --git a/upload.html b/upload.html
index 4a8a769..f33a5fa 100644
--- a/upload.html
+++ b/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>