feat(style): more styling options, commented out light theme

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;

src/components/NumberSelector.css

@@ -43,6 +43,6 @@
 }
 
 .numberSelector .choice.selected {
-    color: var(--text);
+    color: var(--choice-active-text, var(--text));
-    background-color: var(--choice-hover);
+    background-color: var(--choice-active);
 }

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;