diff options
| -rw-r--r-- | public/_locales/en/messages.json | 3 | ||||
| -rw-r--r-- | public/options/options.html | 12 | ||||
| -rw-r--r-- | src/config.ts | 2 | ||||
| -rw-r--r-- | src/help.ts | 12 | ||||
| -rw-r--r-- | src/options.ts | 12 |
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"); } |