feat: add dark/light mode toggle button

expensetracker.css

@@ -30,6 +30,39 @@
   --shadow-card: 0 8px 16px rgba(0, 0, 0, 0.3);
 }
 
+/* Light Mode Theme */
+[data-theme="light"] {
+  /* Color Palette */
+  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+  --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+  --dark-gradient: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
+
+  /* Background Colors */
+  --bg-primary: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-tertiary: #efefef;
+  --bg-glass: rgba(0, 0, 0, 0.05);
+
+  /* Text Colors */
+  --text-primary: #1a1a1a;
+  --text-secondary: #666666;
+  --text-accent: #667eea;
+
+  /* Accent Colors */
+  --accent-primary: #667eea;
+  --accent-secondary: #764ba2;
+  --success: #00c853;
+  --error: #d32f2f;
+  --warning: #ffa000;
+
+  /* Shadows */
+  --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
+  --shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.15);
+  --shadow-card: 0 8px 16px rgba(0, 0, 0, 0.1);
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -134,6 +167,32 @@ body {
   gap: 0.75rem;
 }
 
+.theme-toggle-btn {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(100, 255, 218, 0.3);
+  color: var(--accent-primary);
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  transition: all 0.3s ease;
+  margin-right: 1rem;
+}
+
+.theme-toggle-btn:hover {
+  background: rgba(100, 255, 218, 0.2);
+  border-color: var(--accent-primary);
+  transform: scale(1.1);
+}
+
+.theme-toggle-btn.light-mode {
+  color: #ffd700;
+}
+
 .profile-img {
   width: 40px;
   height: 40px;
@@ -1668,6 +1727,9 @@ body {
   }
 }
 
+#scrollToTopBtn svg {
+  display: block;
+}
 input,
 select,
 button {