From e0b8f347709c91916c0ba0de790d5aa499bdabff Mon Sep 17 00:00:00 2001
From: Neo <neo@sagittal.ai>
Date: Thu, 5 Sep 2024 23:33:19 +0000
Subject: [PATCH] Improve dark mode styling

This commit addresses the issue of improper dark mode implementation.
The background of all pages and form elements in dark mode were
previously displayed in white, which has now been corrected. The
background for input and textarea elements is set to a darker shade
in dark mode, ensuring consistency with the overall theme.

Additionally, the toggle button for switching themes has been
redesigned to resemble iPhone-style toggles, replacing the previous
square button. This enhances the user interface and provides a more
intuitive experience when toggling between light and dark modes.

Fixes #FLAS-3
---
 flaskr/static/style.css    | 40 +++++++++++++++++++++++++++++++++++++-
 flaskr/templates/base.html |  4 ++--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/flaskr/static/style.css b/flaskr/static/style.css
index 40bf852d..d57c61f0 100644
--- a/flaskr/static/style.css
+++ b/flaskr/static/style.css
@@ -124,8 +124,9 @@ nav ul li a, nav ul li span, header .action {
 
 .content input, .content textarea {
   margin-bottom: 1em;
+  background: #f5f5f5;
+  border: 1px solid #ccc;
   padding: 0.5em;
-  border: 1px solid #E0E5B6;
   border-radius: 4px;
 }
 
@@ -153,6 +154,36 @@ input[type=submit]:hover {
   background-color: #2c5f8a;
 }
 
+#theme-toggle {
+  position: relative;
+  width: 50px;
+  height: 25px;
+  background: #ccc;
+  border-radius: 25px;
+  cursor: pointer;
+  transition: background 0.3s;
+}
+
+#theme-toggle:before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 21px;
+  height: 21px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+body.dark-mode #theme-toggle {
+  background: #4d4d4d;
+}
+
+body.dark-mode #theme-toggle:before {
+  transform: translateX(25px);
+}
+
 body.dark-mode {
   background: #121212;
   color: #e0e0e0;
@@ -174,3 +205,10 @@ body.dark-mode .flash {
 body.dark-mode .post .about {
   color: #999;
 }
+
+body.dark-mode .content input, 
+body.dark-mode .content textarea {
+  background: #333;
+  color: #e0e0e0;
+  border: 1px solid #555;
+}
diff --git a/flaskr/templates/base.html b/flaskr/templates/base.html
index feff0fb3..6faf1e7d 100644
--- a/flaskr/templates/base.html
+++ b/flaskr/templates/base.html
@@ -6,9 +6,9 @@
   <h1><a href="{{ url_for('index') }}">Flaskr</a></h1>
   <ul>
     <li>
-      <button id="theme-toggle" aria-label="Toggle Dark Mode">
+      <div id="theme-toggle" aria-label="Toggle Dark Mode">
         <i id="theme-icon" class="fas"></i>
-      </button>
+      </div>
     </li>
     {% if g.user %}
       <li><span>{{ g.user['username'] }}</span>