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/components/Progress.css b/src/components/Progress.css
index a0116519..eb7e9d73 100644
--- a/src/components/Progress.css
+++ b/src/components/Progress.css
@@ -24,7 +24,7 @@
 .progress .bar {
     width: 13rem;
     max-width: 100%;
-    background-color: #35363D;
+    background-color: var(--content);
     border-radius: 10px;
     height: 7px;
     display: inline-block;
diff --git a/src/components/Title.css b/src/components/Title.css
index c5691634..5e749821 100644
--- a/src/components/Title.css
+++ b/src/components/Title.css
@@ -12,7 +12,7 @@
 }
 .title-size-small {
     font-size: 1.1rem;
-    color: #afb1b8;
+    color: var(--text-secondary);
 }
 
 .title-accent {
diff --git a/src/components/TypeSelector.css b/src/components/TypeSelector.css
index 39273f17..80902e74 100644
--- a/src/components/TypeSelector.css
+++ b/src/components/TypeSelector.css
@@ -13,7 +13,7 @@
     position: absolute;
     width: 100%;
     bottom: 0;
-    background-color: #3a3c46;
+    background-color: var(--content);
     height: 4px;
     border-radius: 2px;
 }
@@ -27,14 +27,14 @@
     align-items: center;
     text-align: center;
     box-sizing: border-box;
-    color: #585A67;
+    color: var(--text-tertiary);
     font-weight: bold;
     cursor: pointer;
     user-select: none;
 }
 
 .typeSelector .choice:hover { 
-    color: #afb1b8;
+    color: var(--text-secondary);
 }
 
 .typeSelector .choice.selected {
diff --git a/src/components/VideoElement.css b/src/components/VideoElement.css
index bb829039..cff2fd1d 100644
--- a/src/components/VideoElement.css
+++ b/src/components/VideoElement.css
@@ -1,6 +1,6 @@
 .videoElement {
     width: 100%;
-    background-color: #111117;
+    background-color: var(--content);
     border-radius: 5px;
 }
 
diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
index 381fb27c..f1aa506a 100644
--- a/src/components/VideoElement.js
+++ b/src/components/VideoElement.js
@@ -27,8 +27,6 @@ export function VideoElement({ streamUrl, loading }) {
         hls.loadSource(streamUrl);
     }, [videoRef, streamUrl, loading])
 
-    // TODO make better loading/error/empty state
-
     if (error)
         return (<VideoPlaceholder>Your browser is not supported</VideoPlaceholder>)
 
@@ -36,7 +34,7 @@ export function VideoElement({ streamUrl, loading }) {
         return <VideoPlaceholder>Loading episode...</VideoPlaceholder>
     
     if (!streamUrl || streamUrl.length === 0)
-        return <videoPlaceholder>No video selected</videoPlaceholder>
+        return <VideoPlaceholder>No video selected</VideoPlaceholder>
 
     return (
         <video className="videoElement" ref={videoRef} controls autoPlay />
diff --git a/src/index.css b/src/index.css
index 59379657..c2586220 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,6 +1,4 @@
 :root {
-
-  /* TODO finish theming for entire css */
   --theme-color: #E880C5;
   --theme-color-text: var(--theme-color);
   
@@ -11,6 +9,7 @@
 
   --text: white;
   --text-secondary: #BCBECB;
+  --text-tertiary: #585A67;
 
   --content: #36363e;
   --content-hover: #3C3D44;
@@ -18,12 +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;
diff --git a/src/views/Search.css b/src/views/Search.css
index 983bd086..0e0a9932 100644
--- a/src/views/Search.css
+++ b/src/views/Search.css
@@ -29,7 +29,7 @@
     margin: 0;
 }
 .topRightCredits a:hover, .topRightCredits a:active {
-    color: #f19fd6;
+    color: var(--theme-color);
     text-decoration: none;
 }