posted on Tue, Apr 28 '20 under tag:

Did you know there is a CSS media query called prefers-color-scheme that websites can use to switch to dark mode automatically? How about going fully dark in Gnome Shell and Firefox?

I was reading Smashing Magazine’s article on implementing dark mode using styled components in react and I saw that StackOverflow has recently made it a feature. There is a nice blog post by them on how they actually developed it starting from design mocks.

I immediately logged into my stackoverflow settings and found that there were three options.

  1. Light
  2. System
  3. Dark

I could get done with dark, but what does “System” do? How do we make the system tell we prefer dark mode?

In Android 10 and above there is a quicktile toggle to switch to dark mode. But, is this possible in Linux/Gnome Shell too?

I did a quick search and found a neat article on how to switch to dark theme in Gnome Shell. It essentially boils down to switching to “Adwaita-dark” theme using gnome-tweaks.

And there I had it. Stackoverflow was dark as per system theme.

In Firefox themes, there are again 3 options - “Default”, “Light”, and “Dark”. If you choose “Default” it automatically chooses the system’s dark/light.

As Aaron Shekey says on the SO blog, though, it is pretty difficult on the eyes to have everything in dark, especially web content.

Like what you are reading? Subscribe (by RSS, email, mastodon, or telegram)!