Bug: Dark mode not applied to WebEngine content on Niri + Wayland (non-GNOME)

[raphamzn]

Bug: Dark mode not applied to WebEngine content on Niri + Wayland (non-GNOME)

Environment

Key	Value
OS	CachyOS (Arch-based)
ZapZap version	6.3.3 (installed via AUR/paru)
Compositor	Niri (Wayland)
Shell	Noctalia
GPU	NVIDIA RTX 4050 (notebook)
Qt platform	QT_QPA_PLATFORM=wayland

---

Description

When setting the theme to Dark (or Adaptive with the system in dark mode), the native ZapZap UI (sidebar, menus) correctly switches to dark, but the WhatsApp Web content (messages area) remains in light mode.

The D-Bus portal correctly reports color-scheme = 1 (dark):

gdbus call --session \
  --dest org.freedesktop.portal.Desktop \
  --object-path /org/freedesktop/portal/desktop \
  --method org.freedesktop.portal.Settings.Read \
  "org.freedesktop.appearance" "color-scheme"
# Returns: (<<uint32 1>>,)

---

Steps to Reproduce

1. Run ZapZap on a Wayland compositor without GNOME (e.g. Niri, Hyprland)
2. Go to Settings → Appearance and set theme to Dark
3. Observe: sidebar/menus are dark, but the messages/chat area remains light

---

Expected Behavior

Both the native UI and the WhatsApp Web content area should render in dark mode.

---

Root Cause

In zapzap/webengine/PageController.py, the set_theme_dark method explicitly disables ForceDarkMode on the WebEngine profile:

def set_theme_dark(self):
    self.profile().settings().setAttribute(
        QWebEngineSettings.WebAttribute.ForceDarkMode, False)  # ← disables dark rendering
    self.runJavaScript("document.body.classList.add('dark');")

The classList.add('dark') JS call alone is not sufficient — WhatsApp Web's React app overrides or ignores this class after its own initialization cycle, resulting in the chat area staying in light mode.

---

Fix

Changing ForceDarkMode to True in set_theme_dark resolves the issue completely:

def set_theme_dark(self):
    self.profile().settings().setAttribute(
        QWebEngineSettings.WebAttribute.ForceDarkMode, True)  # ← enable
    self.runJavaScript("document.body.classList.add('dark');")

---

Additional Notes

• The issue affects only the QWebEngineView content area, not the Qt UI elements
• Setting ForceDarkMode = True alongside classList.add('dark') works correctly without any visual side effects
• xdg-desktop-portal-gtk is running and gsettings color-scheme is set to prefer-dark
• The same issue likely affects other non-GNOME Wayland compositors (Hyprland, Sway, etc.)

[marcs-sus]

I'm having the same problem using it in NixOS with Hyprland.

[rafatosta]

This problem happened after changes by WhatsApp Web and I still haven't found a working solution.

Unfortunately, the mentioned option causes some icons and photos to have the color inverted. This is due to how Chromium activates dark mode on pages.

QWebEngineSettings.WebAttribute.ForceDarkMode, True) # ← enable