That is just for testing.
I would like the text in the light areas of the image to appear black in both dark and light mode.
Reworked your html a bit, this works fine on companion app and when compiled.
You need to ensure the order of your text/background settings is in the correct order, set the specific texts last, after handling the colour mode change.
getcoloursright.aia (34.4 KB)
keepBlack.html.txt (3.1 KB)
1 Like
Indeed, both html files define the color of the text displayed on the light surface of the image in both light and dark mode.
However, in one case, none of the html files work perfectly, i.e. the color of the text appearing on the light surface of the image is black in light mode (which is of course readable) but white in dark mode (which is not readable).
This happens when I have Display / More Dark mode options / Individual apps / switch on these apps in my phone's settings, while Adjust text and backgrounds automatically is switched off.
With this setting on the Android phone, when the application is turned on in the Individual apps location, and therefore in dark mode, the text appearing on the light surface of the image remains white even if we set it to black in CSS in dark mode. So, is there a CSS solution so that in this case the text remains black in front of the light surface of the image?
If you are setting your app to Dark theme, you simply set the colour of the specific texts in your text properties. Given you can only set the Dark theme when developing, you, the developer, have control over the colour of texts in any given theme.
You could again use the webviewstring to indicate the app theme to the html/css/js
1 Like
To give you a bit more control, here is your background image as css/html
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Demo Background</title>
<style>
.outer {
background-color: #B18E35;
color: black;
width:100%;
height: 30vh;
padding-top: 1em;
width:fit-content;
}
.text_outline {
background-color: white;
color: black;
border-radius: 15px;
padding: 0.5em;
margin: 1em;
font-weight:bold;
width:fit-content;
}
.filler {
height:5vh;
}
</style>
<body>
<div class="outer">
<div class="text_outline">THIS IS THE 1ST TEXT OVER THE IMAGE</div>
<div class="text_outline">THIS IS THE 2ND TEXT OVER THE IMAGE</div>
<div class="filler"></div>
<div class="text_outline">THIS IS THE 3RD TEXT OVER THE IMAGE</div>
</div>
</body>
</html>
1 Like
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.