looking for: https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust i have this code HTML in test.html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
<div class="box">
<h1>Title</h1>
</div>
<br>
<div class="box forced">
<h1>Title</h1>
</div>
</body>
</html>
and this CSS in style.css file:
.box {
border: 5px solid grey;
background-color: #ccc;
width: 300px;
margin: 20px;
padding: 10px;
text-color: black;
}
@media (forced-colors: active) {
.forced {
forced-color-adjust: none;
}
}
Both files in same directory. CSS is detected. Well, i upload this two files in remote and for test i make a post in facebook.
When i click in this post, i open test.html inside FACEBOOK BROWSER IN-APP and display in darkmode in both cases text in white.
The box with css class .forced should be allow to display text in black color but so not is!
In general i have a background color like near yellow and to have forced black color in white not help if user try to read.
So i ask, as i can solve this problem?
Thanks very much.
just want communicate which i have solved the problem with:
Thanks again.