aumera-on-screen-widget 0.0.18 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/df-btn.js +9 -0
- package/package.json +1 -1
package/df-btn.js
CHANGED
|
@@ -139,6 +139,9 @@
|
|
|
139
139
|
showNotification: false,
|
|
140
140
|
};
|
|
141
141
|
|
|
142
|
+
// Track if dark mode was explicitly requested via HTML attribute
|
|
143
|
+
const hasExplicitDarkBackground = !!wrapper.getAttribute("backgroundDark");
|
|
144
|
+
|
|
142
145
|
// Initial config from HTML attributes with fallback to defaults
|
|
143
146
|
const config = {
|
|
144
147
|
src: wrapper.getAttribute("src"),
|
|
@@ -151,6 +154,7 @@
|
|
|
151
154
|
background: wrapper.getAttribute("background") || defaultConfig.background,
|
|
152
155
|
backgroundDark:
|
|
153
156
|
wrapper.getAttribute("backgroundDark") || defaultConfig.backgroundDark,
|
|
157
|
+
hasDarkMode: hasExplicitDarkBackground,
|
|
154
158
|
fontColor: wrapper.getAttribute("fontColor") || defaultConfig.fontColor,
|
|
155
159
|
fontColorDark:
|
|
156
160
|
wrapper.getAttribute("fontColorDark") || defaultConfig.fontColorDark,
|
|
@@ -219,6 +223,8 @@
|
|
|
219
223
|
config.background = settings.oswColourBackgroundLight || config.background;
|
|
220
224
|
config.backgroundDark =
|
|
221
225
|
settings.oswColourBackgroundDark || config.backgroundDark;
|
|
226
|
+
// Update hasDarkMode if GraphQL provides dark background
|
|
227
|
+
config.hasDarkMode = config.hasDarkMode || !!settings.oswColourBackgroundDark;
|
|
222
228
|
config.fontColor = settings.oswColourFontLight || config.fontColor;
|
|
223
229
|
config.fontColorDark = settings.oswColourFontDark || config.fontColorDark;
|
|
224
230
|
config.showNotification =
|
|
@@ -487,6 +493,7 @@
|
|
|
487
493
|
}
|
|
488
494
|
}
|
|
489
495
|
|
|
496
|
+
${config.hasDarkMode ? `
|
|
490
497
|
@media (prefers-color-scheme: dark){
|
|
491
498
|
.df-btn {
|
|
492
499
|
background-color: ${config.backgroundDark || "#171717"}
|
|
@@ -517,6 +524,7 @@
|
|
|
517
524
|
border-top: 6px solid ${config.backgroundDark || "#171717"};
|
|
518
525
|
}
|
|
519
526
|
}
|
|
527
|
+
` : ''}
|
|
520
528
|
|
|
521
529
|
@keyframes shake {
|
|
522
530
|
0%, 100% { transform: translateX(0); }
|
|
@@ -758,6 +766,7 @@
|
|
|
758
766
|
maxBtn.className = "maximize-minimize-btn";
|
|
759
767
|
const maximized = btn.classList.contains("df-maximized");
|
|
760
768
|
const isDarkMode =
|
|
769
|
+
config.hasDarkMode &&
|
|
761
770
|
window.matchMedia &&
|
|
762
771
|
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
763
772
|
maxBtn.innerHTML = `<img class="maximize-minimize-icon" src="${origin}/assets/${
|