From d2982ba391c9001ffef7c912a2c2efe89579bc2b Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:55:08 +0200
Subject: [PATCH] feat(style): more styling options, commented out light theme

---
 src/components/InputBox.css       |  2 +-
 src/components/NumberSelector.css |  4 ++--
 src/index.css                     | 25 +++++++++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/InputBox.css b/src/components/InputBox.css
index 4339c9e7..1a5944e3 100644
--- a/src/components/InputBox.css
+++ b/src/components/InputBox.css
@@ -30,7 +30,7 @@
 .inputSearchButton {
     background-color: var(--button);
     border-width: 0;
-    color: var(--text);
+    color: var(--button-text, var(--text));
     padding: .5rem 2.1rem;
 
     font-weight: bold;
diff --git a/src/components/NumberSelector.css b/src/components/NumberSelector.css
index 4f8e62f9..21de53d1 100644
--- a/src/components/NumberSelector.css
+++ b/src/components/NumberSelector.css
@@ -43,6 +43,6 @@
 }
 
 .numberSelector .choice.selected {
-    color: var(--text);
-    background-color: var(--choice-hover);
+    color: var(--choice-active-text, var(--text));
+    background-color: var(--choice-active);
 }
diff --git a/src/index.css b/src/index.css
index 4b74e5d0..c2586220 100644
--- a/src/index.css
+++ b/src/index.css
@@ -17,11 +17,36 @@
   --button: #A73B83;
   --button-hover: #9C3179;
   --button-active: #8b286a;
+  --button-text: var(--text);
 
   --choice: #2E2F37;
   --choice-hover: #45464D;
   --choice-active: #45464D;
 }
+/* @media (prefers-color-scheme: light) {
+  :root {
+    --theme-color: #457461;
+    
+    --body: white;
+    --card: #f8f9fa;
+    
+    --content: #eee;
+    --content-hover: #e7e7e7;
+  
+    --text: #333;
+    --text-secondary: #616161;
+    --text-tertiary: #aaa;
+
+    --button: #457461;
+    --button-hover: #4e836e;
+    --button-active: #437a64;
+    --button-text: white;
+
+    --choice: var(--content);
+    --choice-hover: var(--content-hover);
+    --choice-active: var(--content-hover);
+  }
+} */
 
 body, html {
   margin: 0;