Fix dark mode icon placement

This commit addresses the issue of incorrect dark mode icon
placement in the toggle button. Previously, the moon and sun
icons were displayed in the background, which was not the
desired behavior. The icons are now correctly placed inside
the circle of the toggle button.

Changes include:
- Updated CSS to center icons within the toggle button.
- Adjusted HTML to ensure the correct icon is displayed based
  on the current theme.
- Modified JavaScript to toggle icons appropriately when
the theme changes.

These changes improve the visual consistency and user
experience of the dark mode toggle.

Fixes #FLAS-5

flaskr/static/style.css

@@ -162,6 +162,9 @@ input[type=submit]:hover {
   border-radius: 25px;
   cursor: pointer;
   transition: background 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 #theme-toggle:before {
@@ -174,6 +177,16 @@ input[type=submit]:hover {
   background: white;
   border-radius: 50%;
   transition: transform 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#theme-icon {
+  position: absolute;
+  font-size: 14px;
+  color: #333;
+  transition: color 0.3s;
 }
 
 body.dark-mode #theme-toggle {
@@ -184,6 +197,10 @@ body.dark-mode #theme-toggle:before {
   transform: translateX(25px);
 }
 
+body.dark-mode #theme-icon {
+  color: #e0e0e0;
+}
+
 body.dark-mode {
   background: #121212;
   color: #e0e0e0;

flaskr/templates/base.html

@@ -7,7 +7,7 @@
   <ul>
     <li>
       <div id="theme-toggle" aria-label="Toggle Dark Mode">
-        <i id="theme-icon" class="fas"></i>
+        <i id="theme-icon" class="fas fa-moon"></i>
       </div>
     </li>
     {% if g.user %}
@@ -36,9 +36,8 @@
 
     if (currentTheme === 'dark') {
       document.body.classList.add('dark-mode');
+      themeIcon.classList.remove('fa-moon');
       themeIcon.classList.add('fa-sun');
-    } else {
-      themeIcon.classList.add('fa-moon');
     }
 
     themeToggle.addEventListener('click', function() {