light-ify modal

src/InputElement.svelte

@@ -47,6 +47,25 @@
     .input-status-green {
         background: #76b676;
         border-color: #76b676;
-        /* color: #232323; */
+    }
+    @media (prefers-color-scheme: light) {
+        .wordle-input-element {
+            border-color: #919191;
+            color: white
+        }
+        .input-status-input {
+            background: #f1f6f6;
+            color: black;
+            border-color: #c1c1c1;
+        }
+        .input-status-standby {
+            background: #919191;
+        }
+        .input-status-unfit {
+            background: #b2b4c2;
+        }
+        .input-status-green, .input-status-yellow, .input-status-unfit {
+            border-color: #a1a1a1;
+        }
     }
 </style>

src/Keyboard.svelte

@@ -94,5 +94,18 @@
     .kb-btn-yellow:active {
         background: #b69656 !important;
     }
+
+
+    @media (prefers-color-scheme: light) {
+        .openwordle-keyboard .openwordle-keyboard-btn {
+            background: #e1e1e1;
+        }
+        .openwordle-keyboard .openwordle-keyboard-btn:hover {
+            background: #d1d1d1;
+        }
+        .kb-btn-unfit           { background: #b1b1b1 !important; }
+        .kb-btn-unfit:hover     { background: #bababa !important; }
+        .kb-btn-unfit:active    { background: #c1c1c1 !important; }
+    }
     
 </style>

src/modal/Modal.svelte

@@ -60,4 +60,15 @@
 
         animation: openwordle-modal-backdrop-fade-in 250ms ease;
     }
+
+    @media (prefers-color-scheme: light) {
+        .openwordle-modal-backdrop {
+            background: radial-gradient(#00000010 50%, #00000060);
+        }
+        .openwordle-modal {
+            background: #e1e1e1;
+            color: black;
+            border-color: #c0c0c0;
+        }
+    }
 </style>

src/modal/ModalButton.svelte

@@ -30,4 +30,11 @@
     .openwordle-modal-button:active {
         background: #121212;
     }
+
+    @media (prefers-color-scheme: light) {
+        .openwordle-modal-button {
+            background: #e1e1e1;
+            border-color: #f1f1f1
+        }
+    }
 </style>

src/modal/ModalFooter.svelte

@@ -8,4 +8,10 @@
         border-top: 1px solid #202020;
         border-radius: 0 0 16px 16px;
     }
+    @media (prefers-color-scheme: light)  {
+        .openwordle-modal-footer {
+            background: #e1e1e1;
+            border-top-color: #c0c0c0;
+        }
+    }
 </style>

src/modal/ModalTitle.svelte

@@ -12,4 +12,10 @@
         box-shadow: 0 0 1px #30303010;
         border-radius: 16px 16px 0 0;
     }
+    @media (prefers-color-scheme: light)  {
+        .openwordle-modal-title {
+            background: #e1e1e1;
+            border-bottom-color: #c0c0c0;
+        }
+    }
 </style>