From 6b95c2fb75a44eab0199632e5e65606ff3d6a589 Mon Sep 17 00:00:00 2001
From: Richard Wong <richard@richardwong.io>
Date: Sun, 17 Mar 2024 00:07:01 +0900
Subject: [PATCH] style: changed color for box background and icons depending
 on light or dark mode

---
 src/VerseSampler.css   | 14 +++++++++++++-
 src/VerseValidator.css | 13 +++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/VerseSampler.css b/src/VerseSampler.css
index f68947e..14469e3 100644
--- a/src/VerseSampler.css
+++ b/src/VerseSampler.css
@@ -15,4 +15,16 @@
 
 .test-count-box-label {
   padding: 5px
-}
\ No newline at end of file
+}
+
+@media (prefers-color-scheme: dark) {
+  .rct-icon {
+    color: white;
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  .rct-icon {
+    color: black;
+  }
+}
diff --git a/src/VerseValidator.css b/src/VerseValidator.css
index 1488305..6c49476 100644
--- a/src/VerseValidator.css
+++ b/src/VerseValidator.css
@@ -63,7 +63,16 @@
   width: 80%;
 }
 
-.correct {
-  background-color: #e6ffe6; /* Change the background color as needed */
+
+
+@media (prefers-color-scheme: light) {
+  .correct {
+    background-color: #e6ffe6; /* Change the background color as needed */
+  }
 }
 
+@media (prefers-color-scheme: dark) {
+  .correct {
+    background-color: #495749; /* Change the background color as needed */
+  }
+}