Published 📅: ....
Last modified 📝: ....
Share this post on BlueskySee discussion on Bluesky
The other day Dan Abramov posted asking how folks have handled showing visual graphics from tools like TLDraw / Excalidraw on a webpage that uses a light and a dark theme, to which I replied with a quick tip that I have used in the past (albeit it's been a while since I've utilized this trick). I figured I'd expand a bit more on the trick here in a short blog post!
I've written a similar blog post about selecting custom favicons based on media queries, this trick works in effectively the same way but for inline images!
The trick is to use the <picture> HTML element, and to use two <source>'s, one for the light theme image and the other for the dark theme image.
Example:
<picture>
<source
srcset="/dark-theme-image.png"
media="(prefers-color-scheme: dark)"
/>
<source
srcset="/light-theme-image.png"
media="(prefers-color-scheme: light)"
/>
<img src="/fallback-asset.png" alt="<descriptive-text-here>" />
</This will then use the media query on each <source> to render the correct image based on the prefers-color-scheme media query. So if the user prefers a dark color scheme then it will render the first source, otherwise it will render the second source. The final <img /> element is used as a fallback if the browser doesn't support the <picture> element.
The <picture> element is pretty powerful - you can use any kind of media query within the media attribute, and the browser will pick the first one that matches in the list (almost like a <Switch /> component).
Matt Hamlin
@matthamlin.me
Loading...
Loading comments...
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Published: ....
Published: ....
A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!
Published: ....
A few thoughts on what to do after you launch a new project
Published: ....
A quick tip for creating roundup or summary notes based on other notes in Obsidian using the Dataview plugin!