Resolve "FR-21: Dark/Light mode appearance switch"

Closes #31 (closed)

assets/css/app.css

@@ -2,6 +2,148 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Theme variables */
+:root[data-theme="light"] {
+  --color-background: #ffffff;
+  --color-text: #1a1a1a;
+  --color-primary: #4a90e2;
+  --color-secondary: #f5f5f5;
+  --color-border: #e2e8f0;
+  --color-accent: #3182ce;
+  --color-card: #ffffff;
+  --color-card-hover: #f7fafc;
+  --heading-color: #1a1a1a;
+}
+
+:root[data-theme="dark"] {
+  --color-background: #0f172a;
+  --color-text: #e2e8f0;
+  --color-primary: #60a5fa;
+  --color-secondary: #1e293b;
+  --color-border: #334155;
+  --color-accent: #93c5fd;
+  --color-card: #1e293b;
+  --color-card-hover: #334155;
+  --heading-color: #f1f5f9;
+}
+
+/* Apply theme colors */
+body {
+  background-color: var(--color-background);
+  color: var(--color-text);
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: var(--heading-color);
+}
+
+/* Card styles */
+.property-card {
+  background-color: var(--color-card);
+  border: 1px solid var(--color-border);
+  transition: all 0.3s ease;
+}
+
+.property-card:hover {
+  background-color: var(--color-card-hover);
+}
+
+/* Form element styles */
+input, textarea, select {
+  background-color: var(--color-card);
+  color: var(--color-text);
+  border-color: var(--color-border);
+}
+
+input:focus, textarea:focus, select:focus {
+  border-color: var(--color-accent);
+}
+
+/* Button styles */
+.button-primary {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.button-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-text);
+}
+
+/* Theme toggle */
+.theme-toggle-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  color: var(--color-text);
+  transition: background-color 0.3s ease;
+}
+
+.theme-toggle-button:hover {
+  background-color: var(--color-secondary);
+}
+
+/* Dark mode specific overrides */
+.dark {
+  /* Form inputs */
+  input, textarea, select {
+    @apply bg-gray-800 border-gray-700 text-gray-200;
+  }
+
+  /* Card styles */
+  .card, .property-card {
+    @apply bg-gray-800 border-gray-700;
+  }
+
+  /* Headers and text */
+  h1, h2, h3, h4, h5, h6 {
+    @apply text-gray-100;
+  }
+
+  /* Buttons */
+  .button, button[type="submit"] {
+    @apply bg-gray-700 hover:bg-gray-600 text-white;
+  }
+
+  /* Links */
+  a {
+    @apply text-blue-400 hover:text-blue-300;
+  }
+
+  /* Tables */
+  table {
+    @apply bg-gray-800 border-gray-700;
+  }
+
+  td, th {
+    @apply border-gray-700 text-gray-200;
+  }
+}
+
+.link[href*="/edit"] {
+  @apply text-blue-400 hover:text-blue-300;
+}
+
+.link[href*="/properties"][data-confirm] {
+  @apply bg-red-600 text-white hover:bg-red-700;
+}
+
+.interest-menu-button {
+  @apply text-gray-900 dark:text-white;
+}
+
+.interest-menu {
+  @apply bg-white dark:bg-gray-800 border dark:border-gray-700;
+}
+
+.interest-option {
+  @apply text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700;
+}
+
+/* Previous code */
 .favorite-button {
   background: none;
   border: none;