Arclight Automata

Fixing Chrome stuck in dark mode on Ubuntu 24.04 with Regolith (i3)

posted

My primary desktop environment is Ubuntu Linux with Regolith, which is a customization of the i3 tiling window manager and Sway.

I've been on Ubuntu 22.04 until about a month ago when I finally upgraded to 24.04 LTS (I waited for the 24.04.1 release for all the major bug fixes).

After fixing the usual major broken stuff, I noticed that in Chrome, a ton of websites were showing up in dark mode, which is not my preference. Today, I finally figured out a fix.

For starters, my Ubuntu system appearance settings are set to the default, not dark mode:

Ubuntu settings

Before making any other changes, changing my system appearance from the Settings app would not change either my Nautilus file browser (which was stuck on light mode) or websites on Chrome (which were stuck on dark mode):

❌ Nautilus: not working
❌ Chrome: not working

It's not the Nvidia drivers

Google search results currently lead to Reddit threads blaming the closed source Nvidia drivers (which I run) for the problem. Some people suggested switch to Nouveau (lol no), or upgrade to nvidia-driver-550, which I did, but nothing changed.

So, Nvidia drivers were not the problem in my case.

The fix

The first fix is from this GitHub issue comment1 on an i3 problem with GTK4 apps, which suggests creating this file:

~/.config/xdg-desktop-portal/portals.conf

with these contents:

[preferred]
default=gtk;wlr

After that change, Chrome now respects my system lightness setting, but some other local apps like Nautilus do not:

❌ Nautilus: not working
✅ Chrome: working

So, the second fix I discovered is to set the org.gnome.desktop.interface gtk-theme key to 'Default':

$ gsettings set org.gnome.desktop.interface gtk-theme 'Default'

(For some reason mine was set to2 'Yaru-dark', which is weird because Nautilus was stuck on the light theme anyway)

After this additional fix, everything works as expected:

✅ Nautilus: working
✅ Chrome: working

Testing

I tested Chrome using this handy prefers-color-scheme GitHub Pages site, which immediately changes when I change my system settings.

What's interesting is noting which popular websites took the time to make their site instantaneously and which do not. Claude, ChatGPT and the Tailwind docs do, but Google searches and YouTube require a hard refresh (shift + F5).

I have yet to build a dark mode in any of my apps, but it appears that to accomplish the instant change feature two approaches could be taken.

One, do it in plain CSS using media queries:

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: black;
    --text-color: white;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg-color: white;
    --text-color: black;
  }
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

But that would only work when deferring to system settings, and not when the user can set a preference in the app.

To support that, one would have to use JavaScript. A JavaScript approach would probably be built off of the matchMedia API:

function updateTheme() {
  const darkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  document.documentElement.setAttribute('data-theme', darkMode ? 'dark' : 'light');
}

// Listen for changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme);

// Initial check
updateTheme();

with this sample CSS:

:root[data-theme="dark"] {
  background-color: black;
  color: white;
}

:root[data-theme="light"] {
  background-color: white;
  color: black;
}

What have we learned / Linux rant

I learned of two new things' existence that I've never heard of before with this experience:

  • xdg-desktop-portal which is a "D-Bus service that allows applications to interact with the desktop in a safe way"
  • Adwaita / libadwaita which is "the design language of the GNOME desktop environment"

Reminds me of when I learned about PipeWire 2 years ago when I was neck deep into trying to figure out why my sound would occasionally stop working. It's amazing the things you discover exist when things go awry in Linux. 😆

Like, I still don't fully understand the layers upon layers of Linux's graphics or audio stacks nor do I have ANY interest in learning them3… I don't care how X11, Wayland, Compiz, i3, Sway, GNOME, KDE, Mesa, Vulkan, interact … I don't care about ALSA, PulseAudio, PipeWire, JACK, etc. … that's not to say "just work, damnit!" - I don't expect that. But the problem is, when things break, you don't even know at which bizarre interconnected layer something has broken in order to begin troubleshooting it.

And if you do try to open an issue on an issue tracker, you're likely to encounter hostile devs who (rightfully in a way) only want to troubleshoot and fix bugs that are already verified to be in scope of their specific subsystem.

It's an ancient joke about Linux's WiFi or audio not working, but it really is true that it's so nice on Windows or Mac to not have to think about this stuff because it does "just work."

Still, for programming, Linux's benefits in developer experience (DX) do vastly offset its costs in user experience (UX) for what I do. So I'll still keep drinking that garbage.

Thanks for reading! If you enjoyed this content, you can subscribe to my Youtube Channel (@ArclightAutomata), where I publish content similar to this article.

Footnotes

  1. Which in turn references this GNOME Discourse thread mentioning Adwaita ↩

  2. You can check the setting with:

    gsettings get org.gnome.desktop.interface gtk-theme

    You can also look for related settings with

    $ gsettings list-recursively org.gnome.desktop.interface | grep color
org.gnome.desktop.interface color-scheme 'default'
org.gnome.desktop.interface gtk-color-palette 'black:white:gray50:red:purple:blue:light blue:green:yellow:orange:lavender:brown:goldenrod4:dodger blue:pink:light green:gray10:gray30:gray75:gray90'
org.gnome.desktop.interface gtk-color-scheme ''
org.gnome.desktop.interface icon-theme 'hicolor'

    ↩

  3. No offense because I know what it's like (on a much smaller scale than these projects' success) to publish code for public consumption and get kicked in the ego-balls when people run into issues with it. ↩