If the system is in dark mode, the changes can be easily applied using CSS, using
View my blog post onDark modeIf you want to learn more about it.
Today, I ran into a problem-how to change the image defined in HTML instead of CSS rules?
We can use
pictureLabel to package
<picture> <source srcset="dark.png" media="(prefers-color-scheme: dark)"> <img src="light.png"> </picture>
If dark mode is supported and enabled, then
dark.pngThe picture will be used as
The mark is well supported, and older browsers that do not implement the mark or dark mode will fall back to the position where the mark is displayed.
It is important to note that the browser will not download 2 pictures under any circumstances: if it is in dark mode, in this example, it will only download 2 pictures.
dark.pngPicture, if it is in light color mode, it will only download
light.png, So bandwidth is not wasted.
Download mine for freeHTML manual
More HTML tutorials:
- Introduction to HTML
- HTML `iframe` tag
- HTML table
- HTML `video` tag
- HTML `audio` tag
- HTML tags for text
- HTML table
- HTML `img` tag
- HTML `a` tag
- HTML `picture` tag
- HTML `figure` tag
- HTML container tags
- Accessibility on the web
- How to create comments in HTML
- How to change HTML image URL in dark mode
- Responsive image using `srcset`
- Change icon in dark mode