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": {
"message": "Hide Donation Link"
},
"lightModeOptionsPage": {
"message": "Light Mode On Options Page"
},
"helpPageThanksForInstalling": {
"message": "Thanks for installing SponsorBlock."
},

View file

@ -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">

View file

@ -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).

View file

@ -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";
}

View file

@ -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");
}