Bug 1988635 - Disable theme colors in forced-colors mode r=morgan,emilio,rpl

Differential Revision: https://phabricator.services.mozilla.com/D269692

Author: jaredhirsch

toolkit/modules/LightweightThemeConsumer.sys.mjs

@@ -227,6 +227,9 @@ export function LightweightThemeConsumer(aDocument) {
   this.darkThemeMediaQuery = this._win.matchMedia("(-moz-system-dark-theme)");
   this.darkThemeMediaQuery.addListener(this);
 
+  this.forcedColorsMediaQuery = this._win.matchMedia("(forced-colors)");
+  this.forcedColorsMediaQuery.addListener(this);
+
   const { LightweightThemeManager } = ChromeUtils.importESModule(
     "resource://gre/modules/LightweightThemeManager.sys.mjs"
   );
@@ -252,7 +255,10 @@ LightweightThemeConsumer.prototype = {
   },
 
   handleEvent(aEvent) {
-    if (aEvent.target == this.darkThemeMediaQuery) {
+    if (
+      aEvent.target == this.darkThemeMediaQuery ||
+      aEvent.target == this.forcedColorsMediaQuery
+    ) {
       this._update(this._lastData);
       return;
     }
@@ -262,10 +268,10 @@ LightweightThemeConsumer.prototype = {
         Services.obs.removeObserver(this, "lightweight-theme-styling-update");
         Services.ppmm.sharedData.delete(`theme/${this._winId}`);
         this._win = this._doc = null;
-        if (this.darkThemeMediaQuery) {
-          this.darkThemeMediaQuery.removeListener(this);
-          this.darkThemeMediaQuery = null;
-        }
+        this.darkThemeMediaQuery?.removeListener(this);
+        this.darkThemeMediaQuery = null;
+        this.forcedColorsMediaQuery?.removeListener(this);
+        this.forcedColorsMediaQuery = null;
         break;
     }
   },
@@ -303,7 +309,7 @@ LightweightThemeConsumer.prototype = {
     })();
 
     let theme = useDarkTheme ? themeData.darkTheme : themeData.theme;
-    if (!theme) {
+    if (!theme || this.forcedColorsMediaQuery?.matches) {
       theme = { id: DEFAULT_THEME_ID };
     }
     let builtinThemeConfig = lazy.BuiltInThemeConfig.get(theme.id);

toolkit/mozapps/extensions/test/browser/browser.toml

@@ -163,6 +163,9 @@ skip-if = ["os == 'linux' && os_version == '24.04' && processor == 'x86_64' && d
 
 ["browser_task_next_test.js"]
 
+["browser_theme_forced_colors.js"]
+skip-if = ["os != 'win'"] # Forced-colors is only supported on Windows
+
 ["browser_theme_undo.js"]
 
 ["browser_updateid.js"]

toolkit/mozapps/extensions/test/browser/browser_theme_forced_colors.js

@@ -0,0 +1,50 @@
+/* Any copyright is dedicated to the Public Domain.
+   https://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { LightweightThemeManager } = ChromeUtils.importESModule(
+  "resource://gre/modules/LightweightThemeManager.sys.mjs"
+);
+
+add_task(async function test_forced_colors_themes() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["ui.useAccessibilityTheme", 0]],
+  });
+
+  const THEME_ID = "theme@mochi.test";
+  let theme = ExtensionTestUtils.loadExtension({
+    manifest: {
+      browser_specific_settings: { gecko: { id: THEME_ID } },
+      name: "test theme",
+      theme: {
+        colors: {
+          frame: "red",
+          tab_background_text: "blue",
+        },
+      },
+    },
+    useAddonManager: "temporary",
+  });
+  await theme.startup();
+
+  let docEl = window.document.documentElement;
+  Assert.ok(docEl.hasAttribute("lwtheme"), "LWT attribute should be set");
+
+  await SpecialPowers.pushPrefEnv({
+    set: [["ui.useAccessibilityTheme", 1]],
+  });
+
+  Assert.equal(
+    LightweightThemeManager.themeData.theme.id,
+    THEME_ID,
+    "The theme manager should indicate that the theme is still active"
+  );
+  Assert.ok(!docEl.hasAttribute("lwtheme"), "LWT attribute should not be set");
+  Assert.ok(
+    window.matchMedia("(forced-colors)").matches,
+    "should be in forced-colors mode"
+  );
+
+  await theme.unload();
+});