add darkmode + toggle, add placeholder

src/main/resources/static/style.css

@@ -1,5 +1,19 @@
-:root {
+[data-bs-theme="light"] {
     --bs-primary: #093e9a;
+    --bs-body-bg: #fffcf5;
+    --bs-body-color: #212529;
+    --bs-secondary: #6c757d;
+    --bs-light: #f8f9fa;
+    --bs-border-color: #dee2e6;
+}
+
+[data-bs-theme="dark"] {
+    --bs-primary: #0d6efd;
+    --bs-body-bg: #212529;
+    --bs-body-color: #ffffff;
+    --bs-secondary: #adb5bd;
+    --bs-light: #343a40;
+    --bs-border-color: #495057;
 }
 
 html,
@@ -11,36 +25,52 @@ body {
     min-height: 100vh;
     display: flex;
     flex-direction: column;
-    background-color: #fffcf5;
+    background-color: var(--bs-body-bg);
+    color: var(--bs-body-color);
+    transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-.main-content {
-    flex: 1 0 auto;
+.bg-light {
+    background-color: var(--bs-light) !important;
 }
 
-footer {
-    flex-shrink: 0;
+.text-secondary {
+    color: var(--bs-secondary) !important;
+}
+
+.border-top {
+    border-color: var(--bs-border-color) !important;
+}
+
+.card {
+    background-color: var(--bs-body-bg);
+    border-color: var(--bs-border-color);
 }
 
-/* Override Bootstrap primary color classes */
 .btn-primary,
 .btn-primary:active,
 .btn-primary:focus,
 .btn-primary:hover {
-    background-color: #093e9a !important;
-    border-color: #093e9a !important;
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
 }
 
 .bg-primary {
-    background-color: #093e9a !important;
+    background-color: var(--bs-primary) !important;
 }
 
 .border-primary {
-    border-color: #093e9a !important;
+    border-color: var(--bs-primary) !important;
 }
 
 .text-primary {
-    color: #093e9a !important;
+    color: var(--bs-primary) !important;
+}
+
+.d-flex.gap-2>.btn.flex-fill,
+.d-flex.gap-2>.btn {
+    flex: 1 1 0 !important;
+    min-width: 0;
 }
 
 .container {
@@ -53,8 +83,40 @@ footer {
     padding: 16px;
 }
 
-.d-flex.gap-2>.btn.flex-fill,
-.d-flex.gap-2>.btn {
-    flex: 1 1 0 !important;
-    min-width: 0;
+.main-content {
+    flex: 1 0 auto;
+}
+
+.spacer {
+    flex: 1 0 auto;
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.dark-mode-toggle {
+    align-self: flex-end;
+    z-index: 1000;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    background-color: #495057;
+    color: var(--bs-body-bg);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+    transition: all 0.3s ease;
+    cursor: pointer;
+    margin: 0 15px;
+}
+
+.dark-mode-toggle:hover {
+    transform: scale(1.1);
+}
+
+[data-bs-theme="dark"] .dark-mode-toggle {
+    color: #dba50e;
 }