Basic support for forced colors/high contrast mode

stylesheets/_mixins.scss

@@ -173,20 +173,8 @@
     -webkit-mask-origin: $mask-origin;
   }
   background-color: $color;
-}
-
-@mixin header-icon-white($svg) {
-  @include color-svg($svg, $color-white-alpha-80);
-  &:focus,
-  &:hover {
-    @include color-svg($svg, $color-white);
-  }
-}
-@mixin header-icon-black($svg) {
-  @include color-svg($svg, $color-black-alpha-40);
-  &:focus,
-  &:hover {
-    @include color-svg($svg, black);
+  @media (forced-colors: active) {
+    background-color: WindowText;
   }
 }
 
@@ -220,6 +208,10 @@
 
 @mixin popper-shadow() {
   box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3), 0px 0px 8px rgba(0, 0, 0, 0.05);
+
+  @media (forced-colors: active) {
+    border: 1px solid WindowText;
+  }
 }
 
 @mixin button-reset {
@@ -232,6 +224,10 @@
   cursor: pointer;
   outline: inherit;
   text-align: inherit;
+
+  @media (forced-colors: active) {
+    border: 1px solid WindowText;
+  }
 }
 
 @mixin staged-attachment-close-button {

stylesheets/_modules.scss

@@ -2294,6 +2294,7 @@ button.ConversationDetails__action-button {
     }
 
     @include keyboard-mode {
+      border: none;
       &:focus {
         border-color: $color-ultramarine;
         outline: none;

stylesheets/components/Avatar.scss

@@ -88,6 +88,10 @@
     -webkit-mask-size: 62%;
     background-color: var(--fg);
 
+    @media (forced-colors: active) {
+      background-color: WindowText;
+    }
+
     &--direct {
       -webkit-mask-image: url('../images/icons/v2/profile-outline-20.svg');
       -webkit-mask-size: 60%;

stylesheets/components/LeftPaneDialog.scss

@@ -82,6 +82,10 @@
     background-color: $color-white;
     -webkit-mask-size: contain;
 
+    @media (forced-colors: active) {
+      background-color: WindowText;
+    }
+
     &--relink {
       -webkit-mask: url('../images/icons/v2/link-broken-16.svg') no-repeat
         center;
@@ -121,6 +125,13 @@
       display: block;
       width: 100%;
       height: 100%;
+
+      @media (forced-colors: active) {
+        background-color: WindowText;
+        @include dark-theme {
+          background-color: WindowText;
+        }
+      }
     }
 
     &:hover,
@@ -130,6 +141,21 @@
     &:active {
       background-color: $color-white-alpha-20;
     }
+
+    @media (forced-colors: active) {
+      &:hover,
+      &:focus,
+      &:active {
+        background-color: none;
+      }
+      @include dark-theme {
+        &:hover,
+        &:focus,
+        &:active {
+          background-color: none;
+        }
+      }
+    }
   }
 
   &__message {
@@ -173,10 +199,18 @@
 
     .LeftPaneDialog__icon {
       background-color: $color-black;
+
+      @media (forced-colors: active) {
+        background-color: WindowText;
+      }
     }
 
     .LeftPaneDialog__close-button::before {
       background-color: $color-black;
+
+      @media (forced-colors: active) {
+        background-color: WindowText;
+      }
     }
   }
 

stylesheets/components/ReactionPickerPicker.scss

@@ -123,6 +123,13 @@
         @include dark-theme {
           background: $color-gray-15;
         }
+
+        @media (forced-colors: active) {
+          background-color: WindowText;
+          @include dark-theme {
+            background: WindowText;
+          }
+        }
       }
     }
   }