Dark mode unless explicitely disabled (sorry)

5 files changed, 25 insertions, 16 deletions

diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
index f87f6f32..27793e42 100644
--- a/public/_locales/en/messages.json
+++ b/public/_locales/en/messages.json
@@ -790,6 +790,9 @@
     "hideDonationLink": {
         "message": "Hide Donation Link"
     },
+    "lightModeOptionsPage": {
+        "message": "Light Mode On Options Page"
+    },
     "helpPageThanksForInstalling": {
         "message": "Thanks for installing SponsorBlock."
     },
diff --git a/public/options/options.html b/public/options/options.html
index 993e7090..b889f356 100644
--- a/public/options/options.html
+++ b/public/options/options.html
@@ -278,6 +278,18 @@
 					<div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
 				</div>
 
+				<div data-type="toggle" data-sync="lightMode">
+					<div class="switch-container">
+						<label class="switch">
+							<input id="lightMode" type="checkbox" checked>
+							<span class="slider round"></span>
+						</label>
+						<label class="switch-label" for="lightMode">
+							__MSG_lightModeOptionsPage__
+						</label>
+					</div>
+				</div>
+
 				<div data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
 					<div class="switch-container">
 						<label class="switch">
diff --git a/src/config.ts b/src/config.ts
index de7a0218..a5d95c0f 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -52,6 +52,7 @@ interface SBConfig {
     },
     scrollToEditTimeUpdate: boolean,
     categoryPillUpdate: boolean,
+    lightMode: boolean,
 
     skipKeybind: Keybind,
     startSponsorKeybind: Keybind,
@@ -207,6 +208,7 @@ const Config: SBObject = {
         autoSkipOnMusicVideos: false,
         scrollToEditTimeUpdate: false, // false means the tooltip will be shown
         categoryPillUpdate: false,
+        lightMode: false,
 
         /**
          * Default keybinds should not set "code" as that's gonna be different based on the user's locale. They should also only use EITHER ctrl OR alt modifiers (or none).
diff --git a/src/help.ts b/src/help.ts
index 4c101c64..a3d7a9f8 100644
--- a/src/help.ts
+++ b/src/help.ts
@@ -9,16 +9,12 @@ window.addEventListener('DOMContentLoaded', init);
 async function init() {
     utils.localizeHtmlPage();
 
-    //switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
-    if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
-            !(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
-                                                    navigator.userAgent.includes("Windows NT 6") ||
-                                                    navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14") &&
-            !navigator.userAgent.includes("OPR/") && !navigator.userAgent.includes("Edg/")))
-        document.documentElement.setAttribute("data-theme", "light");
-
     await utils.wait(() => Config.config !== null);
 
+    if (Config.config.lightMode) {
+        document.documentElement.setAttribute("data-theme", "light");
+    }
+
     if (!showDonationLink()) {
         document.getElementById("sbDonate").style.display = "none";
     }
diff --git a/src/options.ts b/src/options.ts
index 4597c2cd..a1ab85f0 100644
--- a/src/options.ts
+++ b/src/options.ts
@@ -20,14 +20,6 @@ window.addEventListener('DOMContentLoaded', init);
 async function init() {
     utils.localizeHtmlPage();
 
-    //switch to light mode when requested, except for Chrome on Linux or older Windows/Mac versions, where Chrome doesn't support themes
-    if (window.matchMedia("(prefers-color-scheme: light)")?.matches &&
-            !(navigator.vendor == "Google Inc." && (navigator.userAgent.includes("Linux") ||
-                                                    navigator.userAgent.includes("Windows NT 6") ||
-                                                    navigator.userAgent.includes("Mac OS X") && navigator.userAgent.match(/Mac OS X [^)]+/)[0] < "Mac OS X 10_14") &&
-            !navigator.userAgent.includes("OPR/") && !navigator.userAgent.includes("Edg/")))
-        document.documentElement.setAttribute("data-theme", "light");
-
     // selected tab
     if (location.hash != "") {
         const substr = location.hash.substring(1);
@@ -58,6 +50,10 @@ async function init() {
 
     await utils.wait(() => Config.config !== null);
 
+    if (Config.config.lightMode) {
+        document.documentElement.setAttribute("data-theme", "light");
+    }
+
     if (!showDonationLink()) {
         document.getElementById("sbDonate").classList.add("hidden");
     }