Refining code and design

2 files changed, 13 insertions, 11 deletions

diff --git a/src/pages/options/youtube/youtube.html b/src/pages/options/youtube/youtube.html
index 15688873..6facdb4c 100644
--- a/src/pages/options/youtube/youtube.html
+++ b/src/pages/options/youtube/youtube.html
@@ -60,6 +60,14 @@
 
         <div id="invidious">
             <div class="some-block option-block">
+                <h4>Theme</h4>
+                <select id="invidious-theme">
+                    <option value="dark">Dark</option>
+                    <option value="light">Light</option>
+                </select>
+            </div>
+
+            <div class="some-block option-block">
                 <h4>Player Style</h4>
                 <select id="invidious-player-style">
                     <option value="invidious">Invidious</option>
@@ -67,11 +75,6 @@
                 </select>
             </div>
 
-            <div class="some-block option-block">
-                <h4>Dark mode</h4>
-                <input id="invidious-dark-mode" type="checkbox" checked />
-            </div>
-
             <div class="some-block">
                 <h4>Volume: <span id="volume-value">50%</span></h4>
                 <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
@@ -90,10 +93,9 @@
             <div class="some-block option-block">
                 <h4>Video Quality</h4>
                 <select id="video-quality">
-                    <option value="">Default</option>
                     <option value="hd720">720p</option>
                     <option value="medium">480p</option>
-                    <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
+                    <option value="dash">DASH (adaptive quality)</option>
                     </option>
                 </select>
             </div>
diff --git a/src/pages/options/youtube/youtube.js b/src/pages/options/youtube/youtube.js
index c1d526da..5c909578 100644
--- a/src/pages/options/youtube/youtube.js
+++ b/src/pages/options/youtube/youtube.js
@@ -32,9 +32,9 @@ disableYoutubeElement.addEventListener("change",
     (event) => youtubeHelper.setDisableYoutube(!event.target.checked)
 );
 
-let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
-invidiousDarkModeElement.addEventListener("change",
-    (event) => youtubeHelper.setInvidiousDarkMode(event.target.checked)
+let invidiousThemeElement = document.getElementById("invidious-theme");
+invidiousThemeElement.addEventListener("change",
+    (event) => youtubeHelper.setInvidiousTheme(event.target.options[invidiousThemeElement.selectedIndex].value)
 );
 
 let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
@@ -86,7 +86,7 @@ invidiousVideoQualityElement.addEventListener("change",
 
 youtubeHelper.init().then(() => {
     disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
-    invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
+    invidiousThemeElement.checked = youtubeHelper.getInvidiousTheme();
     persistInvidiousPrefsElement.checked = youtubeHelper.getPersistInvidiousPrefs();
     invidiousVolumeElement.value = youtubeHelper.getInvidiousVolume();
     invidiousVolumeValueElement.textContent = `${youtubeHelper.getInvidiousVolume()}%`;