Switching Images when Changing System Theme

---
date: Apr 26, 2022
tags:
- HTML
language: English
---

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.

A quick search online reveals that most solutions are using JavaScript to achieve the goal, which would be not ideal. This is because:

  1. My major goal is to reduce the usage of JavaScript on this site, so user can still visit the website without losing experience;
  2. 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:

1
2
3
4
<picture>
<source srcset="dark.jpg" media="(prefers-color-scheme: dark)">
<img src="light.jpg">
</picture>

Just simply replace light.jpg and 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.

Navigation


Creative Commons License

Unless specified, all the articles are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.


It uses a self-hosted Open Web Analytics to get insights. Click here to optout.

The site is powered by Hexo. The source code of this website is here, so that you can see the spaghetti code behind my blog.


Main | Blog | Comic | Podcasts (Preparing) | RSS | Sitemap
2008 - 2022 | Patrick WU Jinming