In my endeavor to incorporate the latest CSS prefers-color-scheme media query into my website, I encountered a challenge. I have an img (image) element featuring a very dark blue image, which clashes poorly with the new dark mode setting.
Is there a simple way to switch the image source based on this CSS media query?
I explored the option of employing two img elements and toggling their display based on the media query. However, this approach feels somewhat messy and comes with drawbacks like both images being downloaded by the browser.
An alternative idea was to utilize a CSS trick involving background-image, but I find this even less appealing than managing visibility through multiple img elements.
While using JavaScript is undoubtedly a solution, I am hesitant due to compatibility concerns. Some users may disable JavaScript in certain browsers, thus rendering a JavaScript-based solution impractical for this particular site.
Are there any other methods available to achieve the desired outcome besides those mentioned above?