Darkmode HTMLViewer

Is Darkmode possible with HTMLViewer in 2019R3.2?

I can do all the other controls with IOSExtensions but not the HTMLViewer. Am I wasting my time or just taking the wrong approach or is it out of my hands because it is loading a web page and there needs to be an alternate Darkmode web page for it to load?

Martin what I do is set my iOSHTMViewer to invisible while the page is loading – and I have a visible progress spinner instead – and then when the page has been loaded I show the iOSHTMLViewer. The effect of this is that the iOSView is shown in the correct colour for the light/dark mode (eg white/black) because that’s the default behaviour and so long as the web page you’re loading also respects the light/dark mode on the device then, when it is shown, it all looks right.

1 Like

Thanks Jason, I’ll give that a try :slight_smile:

No Luck with that. I have a constant with the HTML code in it, no mention of color or background code.
The HTMLViewer is in a container. I made the viewer invisible loaded the page and the made the viewer visible. Result was black text on white background??

My solution just preserves the light/dark mode scheme of the iOSView because the iOSHTMLViewer either cannot or does not. But if your concern is making the HTML page that you load support the light/dark mode setting on the device then that’s up to the HTML code that you load.

Understood, you just have to write separate pages for dark mode

if color.IsDarkMode = true then
  HTMLViewer1.LoadPageXC(kHtmliPadDark)
else
  HTMLViewer1.LoadPageXC(kHtmliPad)
end if

That’s one solution but not the only solution. You can also have a single page that switches between light and dark mode using CSS/JavaScript.

3 Likes

Ok @JasonTait you have towed me into another rabbit hole :slight_smile:
If I have the following how do I call .dark-mode from xojo?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 25px;
  background-color: white;
  color: black;
  font-size: 18px;
}

.dark-mode {
  background-color: black;
  color: white;
}
</style>
</head>
<body>

That’s not how dark mode in CSS is handled. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

2 Likes

Thanks Tim, my html skills are very basic I’ll investigate further :slight_smile:

@Martin_Fitzgibbons I’m not a web dev so I asked one of ours :slight_smile:. He suggested this guide: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web. If you scroll to the “Dark Mode at the Operating System Level” section they have code snippets.

Ok I have this but how do you connect the CSS @media to the ? The tutorial goes on about toggling with a javascript button, assuming that isn’t necessary?

        <!DOCTYPE html>
        <html>
        <head>
        <style type=“text/css”>
        .day   { background: #eee; color: black; }
        .night { background: #333; color: white; }

        @media (prefers-color-scheme: dark) {
          .day.dark-scheme   { background:  #333; color: white; }
          .night.dark-scheme { background: black; color:  #ddd; }
        }

        @media (prefers-color-scheme: light) {
          .day.light-scheme   { background: white; color:  #555; }
          .night.light-scheme { background:  #eee; color: black; }
        }

        </style>
        </head>
        <body font: -apple-system-body;>

The CSS @media query responds automatically to the view. You can do other neat things with media queries like style for print vs screen. You shouldn’t need to do anything more than define the different styling for dark mode.

Correct, they’re just showing how to force if you want to.

So there isn’t something I’m missing as it isn’t giving darkmode in a browser or simulator

<!DOCTYPE html>
<html>
<head>
<style type=“text/css”>
.day   { background: #eee; color: black; }
.night { background: #333; color: white; }

@media (prefers-color-scheme: dark) {
  .day.dark-scheme   { background:  #333; color: white; }
  .night.dark-scheme { background: black; color:  #ddd; }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme   { background: white; color:  #555; }
  .night.light-scheme { background:  #eee; color: black; }
}

</style>
</head>
<body font: -apple-system-body;>

<p style="font-size:22px;">This is Darkmode.</p>

</body>
</html>

Well, none of your CSS applies to a p element. Try this super basic example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
	/* White in light mode */
	background-color: #fff;
}

@media (prefers-color-scheme: dark) {
	body {
		/* Black in dark mode */
		background-color: #000;
	}
}

</style>
</head>
<body font: -apple-system-body;>

<p style="font-size:22px;">This is Darkmode.</p>

</body>
</html>

Thanks Tim that worked and if I add ’ color: white; ’ it gives the correct lightmode and darkmode text

Should there be a delay in display from using CSS instead of having separate constants containing dark and light mode code?

I had the same question. And thanks to Tim’s post, I, too, was able to make my html look correct in dark mode. In case it helps someone, here’s the header for my html:

<head>
<style type="text/css">
body 
{
	/* White in light mode */
	background-color: White;
	color: Black;
        font-family:sans-serif;font-size:36px;
}

@media (prefers-color-scheme: dark)
 {
	body 
	{
		/* Black in dark mode */
		background-color: Black;
		color: White;
		font-family:sans-serif;font-size:36px;
	}
}
</style>
</head>
1 Like