File tree Expand file tree Collapse file tree 2 files changed +8
-46
lines changed Expand file tree Collapse file tree 2 files changed +8
-46
lines changed Original file line number Diff line number Diff line change 54
54
navmenu . classList . remove ( 'site-navigation-open' ) ;
55
55
} ) ;
56
56
}
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
-
101
57
} ) ( ) ;
Original file line number Diff line number Diff line change 8
8
</txp:smd_thumbnail>
9
9
<txp:else />
10
10
<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>
12
15
<txp:else />
13
16
<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
17
</txp:if_yield>
29
32
</txp:smd_thumbnail>
30
33
<txp:else />
31
34
<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>
33
39
<txp:else />
34
40
<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 />">
35
41
</txp:if_yield>
You can’t perform that action at this time.
0 commit comments