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

@@ -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;
+}

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>