Fix HCM coloring on dark mode

Author: arai-a

res/css/style.css

@@ -46,9 +46,9 @@ body {
     * These variable can be declared in any rule, as long as their value is still
     * a valid color (which means we can use `light-dark()` or any other color functions).
     * The colors can be applied on SVG icons with `filter: url(#--var-name)` */
-    --button-icon-color: ButtonText;
-    --button-icon-hover-color: SelectedItem;
-    --button-icon-active-color: SelectedItem;
+    --button-icon-color: ButtonText !important;
+    --button-icon-hover-color: SelectedItem !important;
+    --button-icon-active-color: SelectedItem !important;
   }
 }
 

src/components/shared/FilterNavigatorBar.css

@@ -162,13 +162,13 @@
 
 @media (forced-colors: active) {
   .filterNavigatorBar {
-    --internal-background-color: ButtonFace;
-    --internal-hover-background-color: SelectedItemText;
-    --internal-hover-color: SelectedItem;
-    --internal-active-background-color: SelectedItemText;
-    --internal-selected-background-color: SelectedItem;
-    --internal-selected-color: SelectedItemText;
-    --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg);
+    --internal-background-color: ButtonFace !important;
+    --internal-hover-background-color: SelectedItemText !important;
+    --internal-hover-color: SelectedItem !important;
+    --internal-active-background-color: SelectedItemText !important;
+    --internal-selected-background-color: SelectedItem !important;
+    --internal-selected-color: SelectedItemText !important;
+    --internal-separator-img: url(../../../res/img/svg/scope-bar-separator-hcm-light.svg) !important;
   }
 
   .filterNavigatorBarItem {

src/components/shared/TreeView.css

@@ -38,10 +38,10 @@
 
 @media (forced-colors: active) {
   .treeView {
-    --internal-row-toggle-button-color: ButtonText;
-    --internal-row-toggle-button-active-color: SelectedItem;
-    --internal-selected-row-toggle-button-color: SelectedItemText;
-    --internal-selected-row-toggle-button-active-color: ButtonText;
+    --internal-row-toggle-button-color: ButtonText !important;
+    --internal-row-toggle-button-active-color: SelectedItem !important;
+    --internal-selected-row-toggle-button-color: SelectedItemText !important;
+    --internal-selected-row-toggle-button-active-color: ButtonText !important;
   }
 }
 

src/components/timeline/Selection.css

@@ -225,9 +225,9 @@
   }
 
   .timelineSelection {
-    --grippy-range-background-color: ButtonText;
-    --grippy-range-border-color: ButtonBorder;
-    --grippy-range-hover-background-color: SelectedItem;
+    --grippy-range-background-color: ButtonText !important;
+    --grippy-range-border-color: ButtonBorder !important;
+    --grippy-range-hover-background-color: SelectedItem !important;
     --selection-outbound-opacity: 0.6;
   }