update colours to use system color in forced-color mode

okTurtles · Dec 2, 2024 · 1714b92 · 1714b92
1 parent a0e3128
commit 1714b92
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/frontend/assets/style/_mixins.scss b/frontend/assets/style/_mixins.scss
@@ -55,7 +55,7 @@ $payment-table-desktop-bp: 1290px;
   }
 }
 
-@mixin forced-color-mode {
+@mixin if-forced-color-mode {
   @media (forced-colors: active) {
     @content;
   }

diff --git a/frontend/views/components/modal/ModalClose.vue b/frontend/views/components/modal/ModalClose.vue
@@ -37,8 +37,8 @@ export default ({
   cursor: pointer;
   background-color: $general_1;
 
-  @include forced-color-mode {
-    border: 1px solid $white;
+  @include if-forced-color-mode {
+    border: 1px solid buttonborder;
   }
 
   @include tablet {
@@ -91,10 +91,9 @@ export default ({
     transition: transform 0.15s ease-in;
     transform: translateX(-50%) translateY(-50%) rotate(45deg);
     transform-origin: center center;
-    forced-color-adjust: none;
 
-    @include forced-color-mode {
-      background-color: $white;
+    @include if-forced-color-mode {
+      background-color: buttonborder;
     }
   }
 

diff --git a/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue b/frontend/views/containers/chatroom/image-viewer/PreviewImageArea.vue
@@ -489,8 +489,8 @@ img.c-preview-image {
     border-radius: 0.5rem;
     opacity: 0.675;
 
-    @include forced-color-mode {
-      border: 1px solid $white;
+    @include if-forced-color-mode {
+      border: 1px solid buttonborder;
       opacity: 1;
     }
   }
@@ -523,10 +523,10 @@ img.c-preview-image {
   ::v-deep input.sInput {
     forced-color-adjust: none;
 
-    @include forced-color-mode {
+    @include if-forced-color-mode {
       background: none;
-      border: 1px solid $white;
-      color: $white;
+      border: 1px solid buttonborder;
+      color: buttonborder;
     }
   }
 }