Skip to content

Commit

Permalink
docs: turn off forced colors mode in website (#10085)
Browse files Browse the repository at this point in the history
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: #9436 #9917
  • Loading branch information
ilhan007 authored Oct 25, 2024
1 parent b5e596e commit c76b790
Show file tree
Hide file tree
Showing 2 changed files with 30 additions and 4 deletions.
22 changes: 22 additions & 0 deletions docs/09-FAQ.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
12 changes: 8 additions & 4 deletions packages/website/src/components/Editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
`)
}
Expand Down Expand Up @@ -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}),
Expand Down Expand Up @@ -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"];
}
Expand All @@ -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"];
}
Expand Down

0 comments on commit c76b790

Please sign in to comment.