Fixing Firefox Dark Mode Detection on dwm Arch Linux

by

Summary

Firefox (and forks like LibreWolf) does not automatically infer the system’s light/dark theme on dwm/Arch. The browser relies on a GTK + Qt theme setting or a manual preference (ui.systemUsesDarkTheme) to decide whether to expose prefers-color-scheme: dark to websites. Without configuring these, sites fall back to their default (often light) and you get a sudden “flash” when they switch to dark mode.

Root Cause

  • Missing integration layer: dwm is a minimalist window manager that does not expose a “system theme” flag to GTK/Qt or to the XDG desktop specifications.
  • Firefox reads only GTK/Qt settings: It checks gtk-theme-name (for GTK) or qt_ settings; when none are present, it assumes a light theme.
  • Preference fallback: The ui.systemUsesDarkTheme boolean defaults to 0 (light) unless explicitly set.

Why This Happens in Real Systems

  • Minimalist WM design: dwm purposefully avoids DBus services, desktop portals, or theme daemons that larger DEs (GNOME, KDE) provide.
  • No standard XDG “color-scheme” key: The XDG specifications still lack a universally‑adopted key for “dark mode” that every WM implements.
  • Browser security model: Browsers expose prefers-color-scheme only when they have a reliable source; otherwise they default to light to avoid mis‑representing the user’s intent.

Real-World Impact

  • Users see blinding flashes when a site switches from light to dark after the page loads.
  • Inconsistent UI across sites: some honor the dark mode, others stay light, leading to a jarring experience.
  • Increased power consumption on OLED panels because the browser initially renders bright content before switching.

Example or Code (if necessary and relevant)

# Create a user.js file to force dark mode in Firefox/LibreWolf
cat < ~/.mozilla/firefox/yourprofile/user.js
user_pref("ui.systemUsesDarkTheme", 1);
user_pref("layout.css.prefers-color-scheme.content-override", 1);
EOF

How Senior Engineers Fix It

  • Set the GTK theme to a dark variant (even if dwm itself stays unchanged): 
    echo "gtk-theme-name = Adwaita-dark" >> ~/.config/gtk-3.0/settings.ini
  • Create a ~/.config/gtk-4.0/settings.ini with the same entry for GTK 4 applications.
  • Explicitly override Firefox’s preference using user.js (as shown above).
  • Leverage prefers-color-scheme override:
    • layout.css.prefers-color-scheme.content-override = 1 forces sites to assume dark regardless of system detection.
  • Optional: use a tiny daemon (e.g., xsettingsd) to advertise a dark theme to X apps, satisfying Firefox’s check without a full desktop environment.

Why Juniors Miss It

  • They assume the window manager automatically propagates a system theme flag.
  • They look for a “dark mode” toggle in dwm’s config, which doesn’t exist.
  • They often forget that Firefox’s theme detection is tied to GTK/Qt settings, not the WM itself.
  • Lack of familiarity with user.js and the need to manually override browser preferences.

Leave a Comment