From 4de4e0790f9a642432992433789c260c9421b8b5 Mon Sep 17 00:00:00 2001
From: Lukas Harbarth <lukas.harbarth@sap.com>
Date: Wed, 1 Apr 2026 09:41:51 +0200
Subject: [PATCH] docs: add forced colors mode section & simplify SB
 forced-color-adjust rule

---
 .storybook/preview-head.html    |  8 ++++----
 docs/knowledge-base/Styling.mdx | 22 ++++++++++++++++++++++
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index f957ff1189a..f15e08c71bd 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -1,8 +1,8 @@
 <style>
-  html[data-sap-theme]:not([data-sap-theme*='hc']),
-  /*fallback*/
-  html:not([data-sap-theme]) {
-    forced-color-adjust: none;
+  @media (forced-colors: active) {
+    html {
+      forced-color-adjust: none;
+    }
   }
 
   body {
diff --git a/docs/knowledge-base/Styling.mdx b/docs/knowledge-base/Styling.mdx
index 0eddb5908aa..3229cc5c7f9 100644
--- a/docs/knowledge-base/Styling.mdx
+++ b/docs/knowledge-base/Styling.mdx
@@ -29,6 +29,28 @@ Components currently only available in the `ui5/webcomponents-react` repo, are n
 `@ui5/webcomponents` components come with globally applied scrollbar styles.
 If you want to opt-out of this behavior, you can add the `.ui5-content-native-scrollbars` class to the `body` of the page. You can find out more about this in the [ui5/webcomponents documentation](https://ui5.github.io/webcomponents/docs/advanced/scrollbars-customization/).
 
+## Forced Colors Mode
+
+In [forced colors mode](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust) (e.g. Windows High Contrast), the user agent automatically overrides component colors to meet accessibility needs.
+If you need to opt out of this behavior for specific elements, you can use the `forced-color-adjust` CSS property:
+
+```css
+html {
+  forced-color-adjust: none;
+}
+```
+
+By setting `forced-color-adjust` to `none`, the element's colors will not be adjusted by the user agent in forced colors mode.
+You can also scope this to individual components instead of the entire page. Wrapping the rule in a `@media (forced-colors: active)` query is functionally equivalent, but makes the intent more explicit in your code:
+
+```css
+@media (forced-colors: active) {
+  .myComponent {
+    forced-color-adjust: none;
+  }
+}
+```
+
 ## Changing CSS Variables
 
 You can override SAP theming CSS variables on specific web component selectors to customize their appearance: