Skip to content

Commit 196c1af

Browse files
DaUmegaDaUmega
committed
added css exclusions to universal dark mode toggle
1 parent 4ef494c commit 196c1af

File tree

4 files changed

+48
-8
lines changed

4 files changed

+48
-8
lines changed

‎WFCalculator/script.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,9 @@ document.getElementById("goBackBtn").addEventListener("click", () => {
103103
const SESSION_INIT = "dmInitialized", SESSION_USER_TOGGLED = "dmUserToggled";
104104
let applyTimer = 0, observer = null;
105105

106+
// USER CONFIG: array of CSS selectors or elements that dark mode should ignore
107+
const EXCLUDE_ELEMENTS = ["#my-special-div123", ".no-dark123"];
108+
106109
// insert stylesheet once
107110
if (!document.getElementById(STYLE_ID)) {
108111
const s = document.createElement("style");
@@ -130,11 +133,19 @@ document.getElementById("goBackBtn").addEventListener("click", () => {
130133
}
131134
const brightness = rgb => rgb ? (rgb[0]*299 + rgb[1]*587 + rgb[2]*114)/1000 : 255;
132135

136+
function isExcluded(el) {
137+
if (!EXCLUDE_ELEMENTS || !EXCLUDE_ELEMENTS.length) return false;
138+
return EXCLUDE_ELEMENTS.some(sel => {
139+
if (typeof sel === "string") return el.matches(sel);
140+
return el === sel;
141+
});
142+
}
143+
133144
function applyDark() {
134145
clearTimeout(applyTimer);
135146
applyTimer = setTimeout(() => requestAnimationFrame(() => {
136147
document.querySelectorAll("body *").forEach(el => {
137-
if (el.dataset.dmProcessed) return;
148+
if (el.dataset.dmProcessed || isExcluded(el)) return;
138149
try {
139150
el.dataset.dmOriginalStyle = el.getAttribute("style") || "";
140151
const cs = getComputedStyle(el), bg = cs.backgroundColor || "", fs = parseFloat(cs.fontSize || 0);
@@ -184,7 +195,6 @@ document.getElementById("goBackBtn").addEventListener("click", () => {
184195
sessionStorage.setItem(SESSION_USER_TOGGLED, "1");
185196
localStorage.setItem(STORAGE_KEY, enabled ? "true" : "false");
186197
if (enabled) {
187-
// one-time transition on first toggle
188198
BODY.classList.add("dm-transition");
189199
applyDark();
190200
startObserver();

‎loanCalculator/script.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,9 @@ document.getElementById("goBackBtn").addEventListener("click", () => {
218218
const SESSION_INIT = "dmInitialized", SESSION_USER_TOGGLED = "dmUserToggled";
219219
let applyTimer = 0, observer = null;
220220

221+
// USER CONFIG: array of CSS selectors or elements that dark mode should ignore
222+
const EXCLUDE_ELEMENTS = ["#my-special-div123", ".no-dark123"];
223+
221224
// insert stylesheet once
222225
if (!document.getElementById(STYLE_ID)) {
223226
const s = document.createElement("style");
@@ -245,11 +248,19 @@ document.getElementById("goBackBtn").addEventListener("click", () => {
245248
}
246249
const brightness = rgb => rgb ? (rgb[0]*299 + rgb[1]*587 + rgb[2]*114)/1000 : 255;
247250

251+
function isExcluded(el) {
252+
if (!EXCLUDE_ELEMENTS || !EXCLUDE_ELEMENTS.length) return false;
253+
return EXCLUDE_ELEMENTS.some(sel => {
254+
if (typeof sel === "string") return el.matches(sel);
255+
return el === sel;
256+
});
257+
}
258+
248259
function applyDark() {
249260
clearTimeout(applyTimer);
250261
applyTimer = setTimeout(() => requestAnimationFrame(() => {
251262
document.querySelectorAll("body *").forEach(el => {
252-
if (el.dataset.dmProcessed) return;
263+
if (el.dataset.dmProcessed || isExcluded(el)) return;
253264
try {
254265
el.dataset.dmOriginalStyle = el.getAttribute("style") || "";
255266
const cs = getComputedStyle(el), bg = cs.backgroundColor || "", fs = parseFloat(cs.fontSize || 0);
@@ -299,7 +310,6 @@ document.getElementById("goBackBtn").addEventListener("click", () => {
299310
sessionStorage.setItem(SESSION_USER_TOGGLED, "1");
300311
localStorage.setItem(STORAGE_KEY, enabled ? "true" : "false");
301312
if (enabled) {
302-
// one-time transition on first toggle
303313
BODY.classList.add("dm-transition");
304314
applyDark();
305315
startObserver();

‎ptracker/script.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -580,6 +580,9 @@ document.getElementById("goBackBtn").onclick = () => window.location.href = "../
580580
const SESSION_INIT = "dmInitialized", SESSION_USER_TOGGLED = "dmUserToggled";
581581
let applyTimer = 0, observer = null;
582582

583+
// USER CONFIG: array of CSS selectors or elements that dark mode should ignore
584+
const EXCLUDE_ELEMENTS = [".period"];
585+
583586
// insert stylesheet once
584587
if (!document.getElementById(STYLE_ID)) {
585588
const s = document.createElement("style");
@@ -607,11 +610,19 @@ document.getElementById("goBackBtn").onclick = () => window.location.href = "../
607610
}
608611
const brightness = rgb => rgb ? (rgb[0]*299 + rgb[1]*587 + rgb[2]*114)/1000 : 255;
609612

613+
function isExcluded(el) {
614+
if (!EXCLUDE_ELEMENTS || !EXCLUDE_ELEMENTS.length) return false;
615+
return EXCLUDE_ELEMENTS.some(sel => {
616+
if (typeof sel === "string") return el.matches(sel);
617+
return el === sel;
618+
});
619+
}
620+
610621
function applyDark() {
611622
clearTimeout(applyTimer);
612623
applyTimer = setTimeout(() => requestAnimationFrame(() => {
613624
document.querySelectorAll("body *").forEach(el => {
614-
if (el.dataset.dmProcessed) return;
625+
if (el.dataset.dmProcessed || isExcluded(el)) return;
615626
try {
616627
el.dataset.dmOriginalStyle = el.getAttribute("style") || "";
617628
const cs = getComputedStyle(el), bg = cs.backgroundColor || "", fs = parseFloat(cs.fontSize || 0);
@@ -661,7 +672,6 @@ document.getElementById("goBackBtn").onclick = () => window.location.href = "../
661672
sessionStorage.setItem(SESSION_USER_TOGGLED, "1");
662673
localStorage.setItem(STORAGE_KEY, enabled ? "true" : "false");
663674
if (enabled) {
664-
// one-time transition on first toggle
665675
BODY.classList.add("dm-transition");
666676
applyDark();
667677
startObserver();

‎script.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,9 @@ document.getElementById("copyBTC").addEventListener("click", () => {
8686
const SESSION_INIT = "dmInitialized", SESSION_USER_TOGGLED = "dmUserToggled";
8787
let applyTimer = 0, observer = null;
8888

89+
// USER CONFIG: array of CSS selectors or elements that dark mode should ignore
90+
const EXCLUDE_ELEMENTS = ["#my-special-div123", ".no-dark123"];
91+
8992
// insert stylesheet once
9093
if (!document.getElementById(STYLE_ID)) {
9194
const s = document.createElement("style");
@@ -113,11 +116,19 @@ document.getElementById("copyBTC").addEventListener("click", () => {
113116
}
114117
const brightness = rgb => rgb ? (rgb[0]*299 + rgb[1]*587 + rgb[2]*114)/1000 : 255;
115118

119+
function isExcluded(el) {
120+
if (!EXCLUDE_ELEMENTS || !EXCLUDE_ELEMENTS.length) return false;
121+
return EXCLUDE_ELEMENTS.some(sel => {
122+
if (typeof sel === "string") return el.matches(sel);
123+
return el === sel;
124+
});
125+
}
126+
116127
function applyDark() {
117128
clearTimeout(applyTimer);
118129
applyTimer = setTimeout(() => requestAnimationFrame(() => {
119130
document.querySelectorAll("body *").forEach(el => {
120-
if (el.dataset.dmProcessed) return;
131+
if (el.dataset.dmProcessed || isExcluded(el)) return;
121132
try {
122133
el.dataset.dmOriginalStyle = el.getAttribute("style") || "";
123134
const cs = getComputedStyle(el), bg = cs.backgroundColor || "", fs = parseFloat(cs.fontSize || 0);
@@ -167,7 +178,6 @@ document.getElementById("copyBTC").addEventListener("click", () => {
167178
sessionStorage.setItem(SESSION_USER_TOGGLED, "1");
168179
localStorage.setItem(STORAGE_KEY, enabled ? "true" : "false");
169180
if (enabled) {
170-
// one-time transition on first toggle
171181
BODY.classList.add("dm-transition");
172182
applyDark();
173183
startObserver();

0 commit comments

Comments
 (0)