Switching Images when Changing System Theme---
date: Apr 26, 2022
Following system color scheme in HTML easily achieved since the availability of
prefers-color-scheme in CSS. This website also uses it to automatically switch themes. But right now I need to switch images according to the color scheme.
- Some places requires no JapaScripts, thus unable to implement.
After some more digging, I discovered this article on WebKit blog. As mentioned in this article, we can use
<picture> to achieve the goal:
Just simply replace
dark.jpg to the desired image path and it works like a charm.
One thing I am worried about is whether it supports other browsers like chromium-based ones. After testing in Microsoft Edge and Brave, the code do work on both chromium-based browsers.