feat: some forced color adjustments

package.json

@@ -13,8 +13,10 @@
   },
   "scripts": {
     "dev": "npm-run-all --parallel vite typesafe-i18n",
+    "dev:external": "npm-run-all --parallel vite:external typesafe-i18n",
     "dev:tauri": "tauri dev",
     "vite": "vite dev",
+    "vite:external": "vite --host",
     "build": "typesafe-i18n --no-watch && vite build",
     "build:tauri": "tauri build",
     "tauri": "tauri",

src/lib/components/ActionListItem.svelte

@@ -48,16 +48,28 @@
     padding: 8px;
 
     font-family: "Noto Sans Mono", monospace;
-    color: inherit;
-
-    background: transparent;
-    border: none;
     border-radius: 8px;
 
-    &:focus-visible {
+    @media not (forced-colors: active) {
-      color: var(--md-sys-color-on-surface-variant);
+      color: inherit;
-      background: var(--md-sys-color-surface-variant);
+
-      outline: none;
+      background: transparent;
+      border: none;
+
+      &:focus-visible {
+        color: var(--md-sys-color-on-surface-variant);
+        background: var(--md-sys-color-surface-variant);
+        outline: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      border: 1px solid ButtonBorder;
+      margin-block: 4px;
+
+      &:hover {
+        color: ActiveText;
+      }
     }
   }
 

src/lib/components/layout/ActionSelector.svelte

@@ -186,6 +186,7 @@
     height: 100%;
 
     background: rgba(0 0 0 / 60%);
+
     border: none;
   }
 
@@ -211,6 +212,11 @@
     @media (prefers-contrast: more) {
       opacity: 0.8;
     }
+
+    @media (forced-colors: active) {
+      opacity: 1;
+      color: GrayText;
+    }
   }
 
   .search-row {
@@ -235,6 +241,10 @@
 
     background: var(--md-sys-color-background);
     border-radius: 16px;
+
+    @media (forced-colors: active) {
+      border: 1px solid CanvasText;
+    }
   }
 
   input[type="search"] {
@@ -302,5 +312,9 @@
       background: var(--md-sys-color-primary);
       border-radius: 0 0 8px 8px;
     }
+
+    @media (forced-colors: active) {
+      background: Mark;
+    }
   }
 </style>

src/lib/style/form/_button.scss

@@ -19,10 +19,23 @@ button {
 
   font-family: inherit;
   font-weight: 600;
-  color: currentcolor;
 
-  background: transparent;
+  @media not (forced-colors: active) {
-  border: none;
+    color: currentcolor;
+    background: transparent;
+    border: none;
+
+    &.primary {
+      color: var(--md-sys-color-on-primary);
+      background: var(--md-sys-color-primary);
+    }
+  }
+
+  @media (forced-colors: active) {
+    border: 1px solid ButtonBorder;
+    color: ButtonText;
+  }
+
   border-radius: 32px;
 
   transition: all 250ms ease;
@@ -37,11 +50,11 @@ button {
     font-size: 24px;
 
     border-radius: 50%;
-  }
 
-  &.primary {
+    @media (forced-colors: active) {
-    color: var(--md-sys-color-on-primary);
+      padding: 2px;
-    background: var(--md-sys-color-primary);
+      margin: 2px;
+    }
   }
 
   &.compact {
@@ -49,27 +62,48 @@ button {
   }
 }
 
-label:has(input):hover,
+@media not (forced-colors: active) {
-.button:hover:not(:active),
+  label:has(input):hover,
-a:hover:not(:active),
+  .button:hover:not(:active),
-button:hover:not(:active) {
+  a:hover:not(:active),
-  filter: brightness(70%);
+  button:hover:not(:active) {
-  transition: filter 250ms ease;
+    filter: brightness(70%);
+    transition: filter 250ms ease;
 
-  &:has(:checked),
+    &:has(:checked),
-  &.active {
+    &.active {
-    filter: brightness(120%);
+      filter: brightness(120%);
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.5;
+      filter: none;
+    }
   }
+}
 
-  &:disabled,
+@media (forced-colors: active) {
-  &.disabled {
+  label:has(input) .button,
-    opacity: 0.5;
+  a button {
-    filter: none;
+    &:hover {
+      color: ActiveText;
+    }
+    &.active,
+    &:active {
+      color: SelectedItemText;
+      background: SelectedItem;
+    }
   }
 }
 
 .disabled,
 :disabled {
   pointer-events: none;
-  opacity: 0.5;
+  @media not (forced-colors: active) {
+    opacity: 0.5;
+  }
+  @media (forced-colors: active) {
+    color: GrayText;
+  }
 }

src/lib/style/scrollbar.scss

@@ -1,23 +1,25 @@
-::-webkit-scrollbar {
+@media not (forced-colors: active) {
-  width: 8px;
+  ::-webkit-scrollbar {
-  background: transparent;
+    width: 8px;
-  border-radius: 4px;
+    background: transparent;
-}
+    border-radius: 4px;
-
-::-webkit-scrollbar-thumb {
-  background: var(--scrollbar-color, white);
-  border-radius: 4px;
-  transition: all 250ms ease;
-
-  &:hover {
-    filter: brightness(120%);
   }
 
-  &:active {
+  ::-webkit-scrollbar-thumb {
-    filter: brightness(80%);
+    background: var(--scrollbar-color, white);
+    border-radius: 4px;
+    transition: all 250ms ease;
+
+    &:hover {
+      filter: brightness(120%);
+    }
+
+    &:active {
+      filter: brightness(80%);
+    }
+  }
+
+  ::-webkit-resizer {
+    display: none;
   }
 }
-
-::-webkit-resizer {
-  display: none;
-}

src/lib/style/tippy.scss

@@ -22,6 +22,17 @@ $padding: 16px;
       border-#{$placement}-color: var(--md-sys-color-surface-variant);
     }
   }
+
+  @media (forced-colors: active) {
+    color: CanvasText;
+    background-color: Canvas;
+    filter: none;
+    border: 1px solid CanvasText;
+
+    > .tippy-arrow {
+      display: none;
+    }
+  }
 }
 
 .tippy-box[data-theme~="tooltip"] {

src/routes/Footer.svelte

@@ -66,10 +66,10 @@
     <SyncOverlay />
   </div>
   <ul>
-    <li>
+    <li class="hide-forced-colors">
       <input use:action={{title: $LL.profile.theme.COLOR_SCHEME()}} type="color" bind:value={$theme.color} />
     </li>
-    <li>
+    <li class="hide-forced-colors">
       {#if $theme.mode === "light"}
         <button use:action={{title: $LL.profile.theme.DARK_MODE()}} class="icon" on:click={switchTheme}>
           dark_mode
@@ -155,6 +155,10 @@
     @media (prefers-contrast: more) {
       opacity: 0.8;
     }
+
+    @media (forced-colors: active) {
+      opacity: unset;
+    }
   }
 
   ul {
@@ -195,4 +199,10 @@
   .icon {
     font-size: 16px;
   }
+
+  @media (forced-colors: active) {
+    .hide-forced-colors {
+      display: none;
+    }
+  }
 </style>