docs: turn off forced colors mode in website (SAP#10085)

ilhan007 · web-flow · commit c76b790aa91d · 2024-10-25T17:57:01.000+03:00
Windows Contrast themes adjust colors of UI5 Web Components which leads to poor visual. The PR fixes the issue for the playground samples setting `forced-color-adjust` to `none`. The property allows authors to opt certain elements out of forced colors mode as explained in [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust). And adds suggestion for fixing it in apps the same way. We don't own the page and we believe this is in the apps domain to set it. Fixes: SAP#9436 SAP#9917
diff --git a/docs/09-FAQ.md b/docs/09-FAQ.md
@@ -85,3 +85,25 @@ ui5-button:not(:defined), ui5-label:not(:defined) {
 ``` 
 
 Please note that the `:defined` CSS pseudo-selector is not supported by the Edge and Internet Explorer 11 browsers.
+
+**Q: How can opt out of forced colors mode. How to avoid Web Components from being adjusted by the user agent forced colors mode?**
+
+**A:** You can use the following CSS rule, based on the `forced-color-adjust` CSS prop:
+
+```CSS
+html {
+    forced-color-adjust: none;
+}
+``` 
+
+or to be more precise, you can apply the CSS rule when `forced-colors` mode is `active`:
+
+```CSS
+@media (forced-colors: active) {
+  .html {
+    forced-color-adjust: none;
+  }
+}
+``` 
+
+By setting `forced-color-adjust` to `none`, the element's colors will not be automatically adjusted by the user agent in forced colors mode.
diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js
@@ -93,7 +93,7 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
     }
   }
 
-  function addImportMap(html) {
+  function addHeadContent(html) {
     return html.replace("<head>", `
 <head>
     <script type="importmap">
@@ -105,6 +105,10 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
       *:not(:defined) {
         display: none;
       }
+
+    html {
+      forced-color-adjust: none;
+    }
     </style>
 `)
   }
@@ -231,7 +235,7 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
     let newConfig = {
       files: {
         "index.html": {
-          content: addImportMap(fixAssetPaths(_html)),
+          content: addHeadContent(fixAssetPaths(_html)),
         },
         "playground-support.js": {
           content: playgroundSupport({theme, textDirection, contentDensity, iframeId}),
@@ -263,7 +267,7 @@ ${fixAssetPaths(_js)}`,
       if (savedProject) {
         try {
           const savedConfig = JSON.parse(savedProject);
-          savedConfig["index.html"].content = addImportMap(fixAssetPaths(savedConfig["index.html"].content));
+          savedConfig["index.html"].content = addHeadContent(fixAssetPaths(savedConfig["index.html"].content));
           if (savedConfig["main.js"] && newConfig.files["main.ts"]) {
             delete newConfig.files["main.ts"];
           }
@@ -278,7 +282,7 @@ ${fixAssetPaths(_js)}`,
     if (location.pathname.includes("/play") && location.hash) {
       try {
         const sharedConfig = JSON.parse(decodeFromBase64(location.hash.replace("#", "")));
-        sharedConfig["index.html"].content = addImportMap(fixAssetPaths(sharedConfig["index.html"].content));
+        sharedConfig["index.html"].content = addHeadContent(fixAssetPaths(sharedConfig["index.html"].content));
         if (sharedConfig["main.js"] && newConfig.files["main.ts"]) {
           delete newConfig.files["main.ts"];
         }
