From 4158bfdb7b5fcd0569f701eb36d2d63fac5e746a Mon Sep 17 00:00:00 2001
From: blek <me@blek.codes>
Date: Wed, 6 Sep 2023 21:15:14 +1000
Subject: [PATCH] light-ify modal

---
 src/modal/Modal.svelte       | 11 +++++++++++
 src/modal/ModalButton.svelte |  7 +++++++
 src/modal/ModalFooter.svelte |  6 ++++++
 src/modal/ModalTitle.svelte  |  6 ++++++
 4 files changed, 30 insertions(+)

diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
index 1e951a6..0ec70eb 100644
--- a/src/modal/Modal.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/modal/ModalButton.svelte b/src/modal/ModalButton.svelte
index 6c9c464..e1bde75 100644
--- a/src/modal/ModalButton.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/modal/ModalFooter.svelte b/src/modal/ModalFooter.svelte
index 8dff93d..275477b 100644
--- a/src/modal/ModalFooter.svelte
+++ b/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>
\ No newline at end of file
diff --git a/src/modal/ModalTitle.svelte b/src/modal/ModalTitle.svelte
index b2417ed..7693be0 100644
--- a/src/modal/ModalTitle.svelte
+++ b/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>
\ No newline at end of file