Skip to content

Commit 8a26eea

Browse files
committed
Remove need for JS to provide dark mode images
1 parent b334556 commit 8a26eea

File tree

2 files changed

+8
-46
lines changed

2 files changed

+8
-46
lines changed

src/assets/js/main.js

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -54,48 +54,4 @@
5454
navmenu.classList.remove('site-navigation-open');
5555
});
5656
}
57-
58-
// Dark Mode.
59-
60-
var imgPrefers = document.querySelectorAll('img.prefers-color-scheme'),
61-
isDark = window.matchMedia('screen and (prefers-color-scheme: dark)');
62-
63-
function makeImagesDark()
64-
{
65-
for (var i = 0; i < imgPrefers.length; i++) {
66-
if (imgPrefers[i].getAttribute('data-src-dark')) {
67-
imgPrefers[i].setAttribute('src', imgPrefers[i].getAttribute('data-src-dark'));
68-
}
69-
70-
if (imgPrefers[i].getAttribute('data-srcset-dark')) {
71-
imgPrefers[i].setAttribute('srcset', imgPrefers[i].getAttribute('data-srcset-dark'));
72-
}
73-
}
74-
}
75-
76-
function makeImagesLight()
77-
{
78-
for (var i = 0; i < imgPrefers.length; i++) {
79-
if (imgPrefers[i].getAttribute('data-src-light')) {
80-
imgPrefers[i].setAttribute('src', imgPrefers[i].getAttribute('data-src-light'));
81-
}
82-
83-
if (imgPrefers[i].getAttribute('data-srcset-light')) {
84-
imgPrefers[i].setAttribute('srcset', imgPrefers[i].getAttribute('data-srcset-light'));
85-
}
86-
}
87-
}
88-
89-
function toggleDarkMode(isDark)
90-
{
91-
if (isDark.matches) {
92-
makeImagesDark();
93-
} else {
94-
makeImagesLight();
95-
}
96-
}
97-
98-
toggleDarkMode(isDark);
99-
isDark.addListener(toggleDarkMode);
100-
10157
})();

src/templates/forms/misc/images.txp

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
</txp:smd_thumbnail>
99
<txp:else />
1010
<txp:if_yield name="dark-option">
11-
<img loading="lazy" class="prefers-color-scheme" width="<txp:if_yield name="set-width"><txp:yield name="set-width" /><txp:else /><txp:image_info type="w" /></txp:if_yield>" height="<txp:if_yield name="set-height"><txp:yield name="set-height" /><txp:else /><txp:image_info type="h" /></txp:if_yield>" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />" data-src-light="<txp:image_url />" data-src-dark="<txp:image_url id="<txp:yield name="dark-option" />" />">
11+
<picture>
12+
<source srcset="<txp:image_url id="<txp:yield name="dark-option" />" media="(prefers-color-scheme: dark)">
13+
<img loading="lazy" width="<txp:if_yield name="set-width"><txp:yield name="set-width" /><txp:else /><txp:image_info type="w" /></txp:if_yield>" height="<txp:if_yield name="set-height"><txp:yield name="set-height" /><txp:else /><txp:image_info type="h" /></txp:if_yield>" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />">
14+
<picture>
1215
<txp:else />
1316
<img loading="lazy" width="<txp:if_yield name="set-width"><txp:yield name="set-width" /><txp:else /><txp:image_info type="w" /></txp:if_yield>" height="<txp:if_yield name="set-height"><txp:yield name="set-height" /><txp:else /><txp:image_info type="h" /></txp:if_yield>" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />">
1417
</txp:if_yield>
@@ -29,7 +32,10 @@
2932
</txp:smd_thumbnail>
3033
<txp:else />
3134
<txp:if_yield name="dark-option">
32-
<img loading="lazy" class="prefers-color-scheme" width="<txp:if_yield name="set-width"><txp:yield name="set-width" /><txp:else /><txp:image_info type="w" /></txp:if_yield>" height="<txp:if_yield name="set-height"><txp:yield name="set-height" /><txp:else /><txp:image_info type="h" /></txp:if_yield>" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />" data-src-light="<txp:image_url />" data-src-dark="<txp:image_url id="<txp:yield name="dark-option" />" />">
35+
<picture>
36+
<source srcset="<txp:image_url id="<txp:yield name="dark-option" />" media="(prefers-color-scheme: dark)">
37+
<img loading="lazy" width="<txp:if_yield name="set-width"><txp:yield name="set-width" /><txp:else /><txp:image_info type="w" /></txp:if_yield>" height="<txp:if_yield name="set-height"><txp:yield name="set-height" /><txp:else /><txp:image_info type="h" /></txp:if_yield>" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />">
38+
<picture>
3339
<txp:else />
3440
<img loading="lazy" width="<txp:if_yield name="set-width"><txp:yield name="set-width" /><txp:else /><txp:image_info type="w" /></txp:if_yield>" height="<txp:if_yield name="set-height"><txp:yield name="set-height" /><txp:else /><txp:image_info type="h" /></txp:if_yield>" itemprop="url contentUrl" alt="<txp:image_info type="alt" />" src="<txp:image_url />">
3541
</txp:if_yield>

0 commit comments

Comments
 (0)