[FIX] web_dark_mode Fix device dependent

Previously, device dependent was strictly frontend and was set only if the
color_scheme cookie had not already been set. This meant that it was useless
unless you cleared your cookies.
This fix implements two separete methods of detecting device preference:
1) Server side
Adds request for Sec-CH-Prefers-Color-Scheme hint and uses it to serve up
the correct asset bundle on the first load. This is mostly just for Chromium
browsers.
2) Client side
If Sec-CH-Prefers-Color-Scheme is None, client side js will check
user.settings.dark_mode_device_dependent which, thanks to moving these prefs
to res_users_settings is already loaded without a separate orm call, if true
it will then check device preference and current cookie. If resetting the cookie
is required, it will then trigger a reload. This is, of course, very bad, as it
causes flicker and loads the assets twice, but thankfully it ony happens the first
time you login or enable device dependent, or if you switch your device's system
theme. This only applies to Firefox, Safari, or to Chromium browsers if the
user has enabled anti fingerprinting settings.

Sec-CH-Prefers-Color-Scheme docs are here:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Sec-CH-Prefers-Color-Scheme

Author: ljmnoonan

web_dark_mode/models/__init__.py

@@ -1,4 +1,4 @@
 # © 2022 Florian Kantelberg - initOS GmbH
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
-from . import ir_http, res_users
+from . import ir_http, res_users, res_users_settings

web_dark_mode/models/ir_http.py

@@ -1,4 +1,5 @@
 # © 2022 Florian Kantelberg - initOS GmbH
+# © 2026 Liam Noonan - Pyxiris
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 from odoo import models
@@ -9,22 +10,55 @@ class IrHttp(models.AbstractModel):
     _inherit = "ir.http"
 
     def color_scheme(self):
-        scheme = request.httprequest.cookies.get("color_scheme")
-        if scheme:
-            return scheme
+        target_scheme, existing_scheme = self._get_color_scheme()
+        if target_scheme:
+            return target_scheme
+        elif existing_scheme:
+            return existing_scheme
         else:
-            return "light"
+            return super().color_scheme()
 
     @classmethod
-    def _set_color_scheme(cls, response):
-        scheme = request.httprequest.cookies.get("color_scheme")
+    def _get_color_scheme(cls):
         user = request.env.user
-        user_scheme = "dark" if getattr(user, "dark_mode", None) else "light"
-        device_dependent = getattr(user, "dark_mode_device_dependent", None)
-        if (not device_dependent) and scheme != user_scheme:
-            response.set_cookie("color_scheme", user_scheme)
+        existing_scheme_cookie = None
+        target_scheme = None
+
+        if user and user._is_internal():
+            # Existing
+            existing_scheme_cookie = request.httprequest.cookies.get("color_scheme")
+            browser_preference_header = request.httprequest.headers.get(
+                "Sec-CH-Prefers-Color-Scheme"
+            )
+            browser_scheme = (
+                browser_preference_header
+                if browser_preference_header in ("dark", "light")
+                else None
+            )
+            # User preference
+            user_scheme = "dark" if getattr(user, "dark_mode", None) else "light"
+            user_device_dependant_scheme = getattr(
+                user, "dark_mode_device_dependent", None
+            )
+
+            if user_device_dependant_scheme:
+                if browser_scheme and existing_scheme_cookie != browser_scheme:
+                    target_scheme = browser_scheme
+
+            elif existing_scheme_cookie != user_scheme:
+                target_scheme = user_scheme
+
+        return target_scheme, existing_scheme_cookie
+
+    @classmethod
+    def _set_color_scheme(cls, response):
+        target_scheme, _ = cls._get_color_scheme()
+        if target_scheme:
+            response.set_cookie("color_scheme", target_scheme)
 
     @classmethod
     def _post_dispatch(cls, response):
         cls._set_color_scheme(response)
+        response.headers.add("Vary", "Sec-CH-Prefers-Color-Scheme")
+        response.headers.add("Accept-CH", "Sec-CH-Prefers-Color-Scheme")
         return super()._post_dispatch(response)

web_dark_mode/models/res_users.py

@@ -1,4 +1,5 @@
 # © 2022 Florian Kantelberg - initOS GmbH
+# © 2026 Liam Noonan - Pyxiris
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
 
@@ -8,8 +9,14 @@
 class ResUsers(models.Model):
     _inherit = "res.users"
 
-    dark_mode = fields.Boolean()
-    dark_mode_device_dependent = fields.Boolean("Device Dependent Dark Mode")
+    dark_mode = fields.Boolean(
+        related="res_users_settings_id.dark_mode", readonly=False
+    )
+    dark_mode_device_dependent = fields.Boolean(
+        related="res_users_settings_id.dark_mode_device_dependent",
+        readonly=False,
+        string="Device Dependent Dark Mode",
+    )
 
     @property
     def SELF_READABLE_FIELDS(self):

web_dark_mode/models/res_users_settings.py

@@ -0,0 +1,14 @@
+# © 2022 Florian Kantelberg - initOS GmbH
+# © 2026 Liam Noonan - Pyxiris
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo import fields, models
+
+
+class ResUsersSettings(models.Model):
+    _inherit = "res.users.settings"
+
+    # These fields should be here in order to be accessible via in js
+    # as user.settings.dark_mode, etc.
+    dark_mode = fields.Boolean()
+    dark_mode_device_dependent = fields.Boolean()

web_dark_mode/static/src/js/switch_item.esm.js

@@ -23,13 +23,23 @@ export const colorSchemeService = {
     dependencies: ["orm", "ui"],
 
     async start(env, {orm, ui}) {
-        registry.category("user_menuitems").add("darkmode", darkModeSwitchItem);
-
-        if (!cookie.get("color_scheme")) {
-            const match_media = window.matchMedia("(prefers-color-scheme: dark)");
-            const dark_mode = match_media.matches;
-            cookie.set("color_scheme", dark_mode ? "dark" : "light");
-            if (dark_mode) browser.location.reload();
+        // This is only for browsers like Firefox and Safari that do not support
+        // Sec-CH-Prefers-Color-Scheme. Browsers that do support it will have already
+        // set the correct cookie value on first request due to server side handling
+        // in ir.http.
+        if (user.settings.dark_mode_device_dependent === true) {
+            const device_preference = window.matchMedia("(prefers-color-scheme: dark)")
+                .matches
+                ? "dark"
+                : "light";
+            if (cookie.get("color_scheme") !== device_preference) {
+                cookie.set("color_scheme", device_preference);
+                // This will cause a bit of flicker as odoo loads the wrong assets
+                // before it can determine the browser system color scheme.
+                browser.location.reload();
+            }
+        } else {
+            registry.category("user_menuitems").add("darkmode", darkModeSwitchItem);
         }
 
         return {

web_dark_mode/tests/__init__.py

@@ -1,4 +1,4 @@
 # © 2022 Florian Kantelberg - initOS GmbH
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
 
-from . import test_dark_mode
+from . import test_ir_http

web_dark_mode/tests/test_dark_mode.py

@@ -0,0 +1,155 @@
+# © 2022 Florian Kantelberg - initOS GmbH
+# © 2026 Liam Noonan - Pyxiris
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+
+from odoo.tests import HttpCase, new_test_user, tagged
+
+HOST = "127.0.0.1"
+
+
+@tagged("post_install", "-at_install")
+class TestColorScheme(HttpCase):
+    def setUp(self):
+        super().setUp()
+        self.test_portal_user = new_test_user(
+            self.env, "test_portal_user", groups="base.group_portal"
+        )
+        self.test_internal_user = new_test_user(
+            self.env, "test_internal_user", groups="base.group_user"
+        )
+        self.test_internal_user.write(
+            {
+                "dark_mode": False,
+                "dark_mode_device_dependent": False,
+            }
+        )
+
+    # Non internal user -> skip logic, do nothing
+    def test_01_non_internal_user_ignored(self):
+        self.authenticate(self.test_portal_user.login, self.test_portal_user.login)
+        response = self.url_open("/my")
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertNotIn(
+            "color_scheme",
+            cookie_header,
+            "Color scheme logic should not run for non-internal users",
+        )
+
+    # No user preference, no cookie -> set light
+    def test_02_no_user_settings_no_cookie(self):
+        self.opener.cookies.clear()
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        response = self.url_open("/odoo")
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertIn("color_scheme=light", cookie_header)
+        self.assertEqual(self.opener.cookies.get("color_scheme"), "light")
+
+    # No user preference, light cookie -> do nothing
+    def test_03_no_user_settings_light_cookie(self):
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        self.opener.cookies.set("color_scheme", "light", domain=HOST, path="/")
+        response = self.url_open("/odoo")
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertNotIn(
+            "color_scheme",
+            cookie_header,
+            "The server should not set the cookie if already exists and is correct",
+        )
+        self.assertEqual(self.opener.cookies.get("color_scheme"), "light")
+
+    # User dark, cookie light -> set dark
+    def test_04_user_dark_cookie_light(self):
+        self.test_internal_user.write(
+            {
+                "dark_mode": True,
+                "dark_mode_device_dependent": False,
+            }
+        )
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        self.opener.cookies.set("color_scheme", "light", domain=HOST, path="/")
+        response = self.url_open("/odoo")
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertIn("color_scheme=dark", cookie_header)
+        self.assertEqual(self.opener.cookies.get("color_scheme"), "dark")
+
+    # User dark, cookie dark -> do nothing
+    def test_05_user_dark_cookie_dark(self):
+        self.test_internal_user.write(
+            {
+                "dark_mode": True,
+                "dark_mode_device_dependent": False,
+            }
+        )
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        self.opener.cookies.set("color_scheme", "dark", domain=HOST, path="/")
+        response = self.url_open("/odoo")
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertNotIn(
+            "color_scheme",
+            cookie_header,
+            "The server should not set the cookie if already exists and is correct",
+        )
+        self.assertEqual(self.opener.cookies.get("color_scheme"), "dark")
+
+    # User dev dep + dark, browser none, cookie none -> do nothing
+    def test_06_user_dev_dep_browser_none_cookie_none(self):
+        self.test_internal_user.write(
+            {
+                "dark_mode": True,
+                "dark_mode_device_dependent": True,
+            }
+        )
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        headers = {"Sec-CH-Prefers-Color-Scheme": None}
+        response = self.url_open("/odoo", headers=headers)
+        cookie_header = response.headers.get("Set-Cookie", "")
+        # This also makes sure that device dependent is overruling regular dark mode
+        self.assertNotIn(
+            "color_scheme",
+            cookie_header,
+            "The server should not set the cookie as it will be set by client side js",
+        )
+
+    # User dev dep, browser light, cookie light -> do nothing
+    def test_07_user_dev_dep_browser_light_cookie_light(self):
+        self.test_internal_user.write(
+            {
+                "dark_mode": True,
+                "dark_mode_device_dependent": True,
+            }
+        )
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        self.opener.cookies.set("color_scheme", "light", domain=HOST, path="/")
+        headers = {"Sec-CH-Prefers-Color-Scheme": "light"}
+        response = self.url_open("/odoo", headers=headers)
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertNotIn(
+            "color_scheme",
+            cookie_header,
+            "The server should not set the cookie if already exists and is correct",
+        )
+        self.assertEqual(self.opener.cookies.get("color_scheme"), "light")
+
+    # User dev dep, browser dark, cookie light -> set dark
+    def test_08_user_dev_dep_browser_dark_cookie_light(self):
+        self.test_internal_user.write(
+            {
+                "dark_mode": False,
+                "dark_mode_device_dependent": True,
+            }
+        )
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        self.opener.cookies.set("color_scheme", "light", domain=HOST, path="/")
+        headers = {"Sec-CH-Prefers-Color-Scheme": "dark"}
+        response = self.url_open("/odoo", headers=headers)
+        cookie_header = response.headers.get("Set-Cookie", "")
+        self.assertIn("color_scheme=dark", cookie_header)
+        self.assertEqual(self.opener.cookies.get("color_scheme"), "dark")
+
+    def test_09_vary_headers(self):
+        self.authenticate(self.test_internal_user.login, self.test_internal_user.login)
+        response = self.url_open("/odoo")
+        self.assertIn("Sec-CH-Prefers-Color-Scheme", response.headers.get("Vary", ""))
+        self.assertIn(
+            "Sec-CH-Prefers-Color-Scheme", response.headers.get("Accept-CH", "")
+        )