From c76b790aa91d217dcafdafa9a270726ed5a190cb Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Fri, 25 Oct 2024 17:57:01 +0300 Subject: [PATCH] docs: turn off forced colors mode in website (#10085) 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: https://github.com/SAP/ui5-webcomponents/issues/9436 https://github.com/SAP/ui5-webcomponents/issues/9917 --- docs/09-FAQ.md | 22 +++++++++++++++++++ .../website/src/components/Editor/index.js | 12 ++++++---- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/docs/09-FAQ.md b/docs/09-FAQ.md index a7eb39d82879..323255cc0d05 100644 --- 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. \ No newline at end of file diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js index 50cd61d240bc..43490ff342de 100644 --- 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("", `