All the browsers DevTools have a way of emulating color modes. The are essentially faking the system preference at the application level. Here’s where those controls are located and another nice tool.
There is an already-classic @scope demo about theme colors. Let’s recap that and then I’ll show how it relates to any situation with modifier classes. (The @scope rule is a newish feature in CSS that is everywhere-but-Firefox, but is in Interop 2025, so shouldn’t be too long to be decently usable.) There are lots of […]
A CSS Custom Property can be used to tweak colors darker when shown on light and lighter when shown on dark, making them pop in both cases.
One approach to color modes it to do it all in CSS with prefers-color-scheme media queries and/or the light-dark() function. A user toggle can be a future improvement.
You can keep it chill and just use HTML email to apply a nice typeface, reign in the line length, use real links, and honor dark mode.
The website has the most control, since that’s what applies the CSS. But browsers also have a Dark/Light/System setting, and that can fall through to the OS/Device.
There has been a fresh round of enthusiasm and writing around light mode / dark mode support for the web lately. I think it’s driven partially by the new light-dark() function in CSS (CSS Color Module Level 5 spec) that makes it easier to declare values that change depending on the mode. Here’s the basic […]
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
