🦊 Firefox 120 Released: Dark Mode, LH and Okloch Colors

Firefox is among the best browsers available on the market, and surely is an option for the people who find OS vendor browsers not sufficient.

In the latest, 120, release we get some nice features. I’ll go over them, and give you some insight what’s is about.

Setting Light And Dark Mode Colors

Firefox 120 is the first browser to support the light-dark() CSS function:

:root {
  color-scheme: light dark;
}
body {
  color: light-dark(#333b3c, #efefec);
  background-color: light-dark(#efedea, #223a2c);
}

As you can see the function takes two values, first is the color for light mode, and the second — for dark mode.

It’s quite useful, because opens up a way to have all websites displayed in an appropriate mode, once everyone will implement it.

The decision about what theme is used may be delegated to the browser and the operating system.

We can also indicate we support only one mode, also, we can incorporate theme switching in our app. All in all, all solutions are supported. The mode is controlled with color-scheme: