Phil Ewels
06/25/2026, 8:40 AMmashehu
06/25/2026, 8:47 AMthemed-picture-element in the page source. can do the samePhil Ewels
06/25/2026, 8:48 AMmashehu
06/25/2026, 8:51 AM// Based on mode set media to '(prefers-color-scheme: light),(prefers-color-scheme: dark)'
// for all sources with matching theme, otherwise set to 'not all'
private updatePictureTheme(
mode: ColorModeWithAuto,
sourcesLight: HTMLSourceElement[],
sourcesDark: HTMLSourceElement[],
) {
if (mode === 'light') {
this.toggleSources({off: sourcesDark, on: sourcesLight})
} else if (mode === 'dark') {
this.toggleSources({off: sourcesLight, on: sourcesDark})
}
}
private toggleSources({off, on}: {off: HTMLSourceElement[]; on: HTMLSourceElement[]}) {
for (const source of on) {
source.setAttribute('media', '(prefers-color-scheme: light),(prefers-color-scheme: dark)')
}
for (const source of off) {
source.setAttribute('media', 'not all')
}
}Phil Ewels
06/25/2026, 8:54 AMPhil Ewels
06/25/2026, 9:22 AMPhil Ewels
06/25/2026, 9:48 AMPhil Ewels
06/25/2026, 9:49 AMmashehu
06/25/2026, 9:50 AMPhil Ewels
06/25/2026, 10:01 AMmashehu
06/25/2026, 11:57 AM