[Editor] When in HCM, don't apply light/dark color in the comment buttons (bug 1977269)

Add fix the color name to use in HCM.

web/app.js

@@ -445,14 +445,15 @@ const PDFViewerApplication = {
     const container = appConfig.mainContainer,
       viewer = appConfig.viewerContainer;
     const annotationEditorMode = AppOptions.get("annotationEditorMode");
-    const pageColors =
+    const hasForcedColors =
       AppOptions.get("forcePageColors") ||
-      window.matchMedia("(forced-colors: active)").matches
-        ? {
-            background: AppOptions.get("pageColorsBackground"),
-            foreground: AppOptions.get("pageColorsForeground"),
-          }
-        : null;
+      window.matchMedia("(forced-colors: active)").matches;
+    const pageColors = hasForcedColors
+      ? {
+          background: AppOptions.get("pageColorsBackground"),
+          foreground: AppOptions.get("pageColorsForeground"),
+        }
+      : null;
 
     let altTextManager;
     if (AppOptions.get("enableUpdatedAddImage")) {
@@ -521,7 +522,8 @@ const PDFViewerApplication = {
             eventBus,
             linkService,
             overlayManager,
-            ltr
+            ltr,
+            hasForcedColors
           )
         : null;
 

web/comment_manager.css

@@ -84,15 +84,15 @@
     --comment-button-focus-outline-color: light-dark(#0062fa, #00cadb);
 
     @media screen and (forced-colors: active) {
-      --comment-button-bg: Canvas;
+      --comment-button-bg: ButtonFace;
       --comment-button-fg: ButtonText;
-      --comment-button-hover-bg: Canvas;
-      --comment-button-hover-fg: Highlight;
-      --comment-button-active-bg: Canvas;
-      --comment-button-active-fg: Highlight;
+      --comment-button-hover-bg: SelectedItemText;
+      --comment-button-hover-fg: SelectedItem;
+      --comment-button-active-bg: SelectedItemText;
+      --comment-button-active-fg: SelectedItem;
       --comment-button-border-color: ButtonBorder;
       --comment-button-active-border-color: ButtonBorder;
-      --comment-button-hover-border-color: Highlight;
+      --comment-button-hover-border-color: SelectedItem;
       --comment-button-box-shadow: none;
       --comment-button-focus-outline-color: CanvasText;
       --comment-button-selected-bg: ButtonBorder;

web/comment_manager.js

@@ -34,13 +34,16 @@ class CommentManager {
 
   #sidebar;
 
+  static #hasForcedColors = null;
+
   constructor(
     commentDialog,
     sidebar,
     eventBus,
     linkService,
     overlayManager,
-    ltr
+    ltr,
+    hasForcedColors
   ) {
     const dateFormat = new Intl.DateTimeFormat(undefined, {
       dateStyle: "long",
@@ -56,6 +59,7 @@ class CommentManager {
       dateFormat
     );
     this.#popup.sidebar = this.#sidebar;
+    CommentManager.#hasForcedColors = hasForcedColors;
   }
 
   setSidebarUiManager(uiManager) {
@@ -110,10 +114,12 @@ class CommentManager {
   }
 
   static _makeCommentColor(color, opacity) {
-    return findContrastColor(
-      applyOpacity(...color, opacity ?? 1),
-      CSSConstants.commentForegroundColor
-    );
+    return this.#hasForcedColors
+      ? null
+      : findContrastColor(
+          applyOpacity(...color, opacity ?? 1),
+          CSSConstants.commentForegroundColor
+        );
   }
 
   destroy() {