added support for dark mode

src/baby_monitor/static/log-diaper.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Log Diaper Change - Baby Monitor</title>
+    <link rel="stylesheet" href="/dark-mode.css" />
+    <script src="/theme-init.js"></script>
     <style>
       * {
         margin: 0;
@@ -15,7 +17,7 @@
         font-family:
           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
           Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background-color: var(--bg-primary);
         min-height: 100vh;
         display: flex;
         justify-content: center;
@@ -24,22 +26,22 @@
       }
 
       .container {
-        background: white;
+        background: var(--bg-secondary);
         border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        box-shadow: var(--shadow-md);
         padding: 40px;
         max-width: 500px;
         width: 100%;
       }
 
       h1 {
-        color: #333;
+        color: var(--text-primary);
         margin-bottom: 10px;
         font-size: 28px;
       }
 
       .subtitle {
-        color: #666;
+        color: var(--text-secondary);
         margin-bottom: 30px;
         font-size: 14px;
       }
@@ -51,7 +53,7 @@
       label {
         display: block;
         margin-bottom: 8px;
-        color: #333;
+        color: var(--text-primary);
         font-weight: 600;
         font-size: 14px;
       }
@@ -60,20 +62,28 @@
       select {
         width: 100%;
         padding: 12px;
-        border: 1px solid #ddd;
+        border: 2px solid var(--border-color, #ddd);
         border-radius: 6px;
         font-size: 14px;
         transition: border-color 0.2s;
+        background-color: var(--input-bg);
+        color: var(--input-text);
       }
 
       input:focus,
       select:focus {
         outline: none;
-        border-color: #667eea;
+        border-color: #f093fb;
+      }
+
+      input[readonly] {
+        opacity: 0.6;
+        cursor: default;
       }
 
       .button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        background: var(--gradient-pink);
+        background-color: #f093fb;
         color: white;
         border: none;
         padding: 12px 24px;
@@ -90,7 +100,7 @@
 
       .button:hover {
         transform: translateY(-2px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+        box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);
       }
 
       .button:active {
@@ -137,25 +147,25 @@
 
       .help-text {
         font-size: 12px;
-        color: #666;
+        color: var(--text-secondary);
         margin-top: 4px;
       }
 
       .loading {
         text-align: center;
         padding: 20px;
-        color: #666;
+        color: var(--text-secondary);
       }
 
       .section-title {
-        color: #666;
+        color: var(--text-secondary);
         font-size: 13px;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.5px;
         margin: 25px 0 15px 0;
         padding-top: 15px;
-        border-top: 1px solid #eee;
+        border-top: 1px solid var(--border-lighter);
       }
 
       .section-title:first-of-type {
@@ -299,7 +309,6 @@
                   id="childName"
                   value="${child.name}"
                   readonly
-                  style="background-color: #f5f5f5; cursor: default;"
                 />
                 <input type="hidden" id="childSelect" name="childSelect" value="${child.id}" />
               `;