Dark mode unless explicitely disabled (sorry)

This commit is contained in:
Ajay
2022-01-24 23:27:00 -05:00
parent 8455ac8b39
commit 8d5f244d2f
5 changed files with 25 additions and 16 deletions

View File

@@ -790,6 +790,9 @@
"hideDonationLink": { "hideDonationLink": {
"message": "Hide Donation Link" "message": "Hide Donation Link"
}, },
"lightModeOptionsPage": {
"message": "Light Mode On Options Page"
},
"helpPageThanksForInstalling": { "helpPageThanksForInstalling": {
"message": "Thanks for installing SponsorBlock." "message": "Thanks for installing SponsorBlock."
}, },

View File

@@ -278,6 +278,18 @@
<div class="small-description">__MSG_showTimeWithSkipsDescription__</div> <div class="small-description">__MSG_showTimeWithSkipsDescription__</div>
</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 data-type="toggle" data-toggle-type="reverse" data-sync="showDonationLink" data-no-safari="true">
<div class="switch-container"> <div class="switch-container">
<label class="switch"> <label class="switch">

View File

@@ -52,6 +52,7 @@ interface SBConfig {
}, },
scrollToEditTimeUpdate: boolean, scrollToEditTimeUpdate: boolean,
categoryPillUpdate: boolean, categoryPillUpdate: boolean,
lightMode: boolean,
skipKeybind: Keybind, skipKeybind: Keybind,
startSponsorKeybind: Keybind, startSponsorKeybind: Keybind,
@@ -207,6 +208,7 @@ const Config: SBObject = {
autoSkipOnMusicVideos: false, autoSkipOnMusicVideos: false,
scrollToEditTimeUpdate: false, // false means the tooltip will be shown scrollToEditTimeUpdate: false, // false means the tooltip will be shown
categoryPillUpdate: false, 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). * 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).

View File

@@ -9,16 +9,12 @@ window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); 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); await utils.wait(() => Config.config !== null);
if (Config.config.lightMode) {
document.documentElement.setAttribute("data-theme", "light");
}
if (!showDonationLink()) { if (!showDonationLink()) {
document.getElementById("sbDonate").style.display = "none"; document.getElementById("sbDonate").style.display = "none";
} }

View File

@@ -20,14 +20,6 @@ window.addEventListener('DOMContentLoaded', init);
async function init() { async function init() {
utils.localizeHtmlPage(); 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 // selected tab
if (location.hash != "") { if (location.hash != "") {
const substr = location.hash.substring(1); const substr = location.hash.substring(1);
@@ -58,6 +50,10 @@ async function init() {
await utils.wait(() => Config.config !== null); await utils.wait(() => Config.config !== null);
if (Config.config.lightMode) {
document.documentElement.setAttribute("data-theme", "light");
}
if (!showDonationLink()) { if (!showDonationLink()) {
document.getElementById("sbDonate").classList.add("hidden"); document.getElementById("sbDonate").classList.add("hidden");
} }