From 8f7eb9f1615e901994e911caeb939515443d9a7a Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 20 Aug 2026 07:11:57 +0200
Subject: [PATCH] enhance(ui): forced colors mode enhancements (#38991)

Improve various UI elements while in [forced color
mode](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors).
---
 web_src/css/base.css             | 10 ++++++++++
 web_src/css/modules/checkbox.css | 23 +++++++++++++++++++++++
 web_src/css/modules/label.css    |  7 +++++++
 web_src/css/repo.css             |  6 ++++++
 4 files changed, 46 insertions(+)

diff --git a/web_src/css/base.css b/web_src/css/base.css
index fdcf55848d8..5611e9bb87c 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -224,6 +224,16 @@ progress::-moz-progress-bar {
   background-color: var(--color-accent);
 }
 
+@media (forced-colors: active) {
+  progress {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+  progress::-webkit-progress-value {
+    background: CanvasText;
+  }
+}
+
 * {
   caret-color: var(--color-caret);
 }
diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css
index a90082c1a7a..b986301f3b4 100644
--- a/web_src/css/modules/checkbox.css
+++ b/web_src/css/modules/checkbox.css
@@ -172,6 +172,29 @@ input[type="checkbox"]:indeterminate::before {
   background: var(--color-primary) !important;
 }
 
+@media (forced-colors: active) {
+  input[type="checkbox"]:checked,
+  input[type="checkbox"]:indeterminate {
+    background: CanvasText;
+    border-color: CanvasText;
+  }
+  input[type="checkbox"]:disabled:checked,
+  input[type="checkbox"]:disabled:indeterminate {
+    background: GrayText;
+    border-color: GrayText;
+  }
+  input[type="radio"]:disabled:checked {
+    border-color: GrayText;
+  }
+  .ui.toggle.checkbox label::before {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+  .ui.toggle.checkbox label::after {
+    background: CanvasText;
+  }
+}
+
 label.gt-checkbox {
   display: inline-flex;
   align-items: center;
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 4be3f32a7e6..a0c1f43e6ea 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -305,3 +305,10 @@ it can also be rendered as flex by adding flex-related classes (the general ".it
   filter: grayscale(0.5);
   opacity: 0.5;
 }
+
+@media (forced-colors: active) {
+  .ui.label {
+    outline: 1px solid CanvasText;
+    outline-offset: -1px;
+  }
+}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 1ab1e579767..b2f5f717025 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -720,6 +720,12 @@ td .commit-summary {
   left: 0;
 }
 
+@media (forced-colors: active) {
+  .repository.branches .commit-divergence .bar {
+    background: CanvasText;
+  }
+}
+
 .repository.commits .header .search input {
   font-weight: var(--font-weight-normal);
   padding: 5px 10px;