🦊 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:

color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;
color-scheme: only light;

/* Global values */
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;

Support For lh And rlh Units

The new units will be useful for you, if you use all the tricks around line height to align stuff with the text height.

For example to adjust icon size and position displayed next to the text.

lh is an accronym for line height, while rlh for root line height.

User Activation API

The idea behind the API is the ability to recognize if a user interacts or interacted with the app.

For example when you want to double check if it’s rather a real user, or want to rule out bots feom your analytics.