Detect dark mode from WebAPI control

SDKs Web SDK
1

I am finally looking at the WebSDK again to give it a chance so I will probably be firing some questions here as I go.

(Your new Video and Example is much better than anything that was there before for the Web 2 SDK)

So questions at the moment.

  1. Is there way for the Web control in the Type script to know if we are in dark mode ?

  2. Lets say I was making a button (which I am not but its simpler to explain like that). And I wanted the button to have Picture, which you set in the Xojo property browser just like you set Boolean property. Then in the end in the WebSDK it ends up drawn on HTML Canvas object in the Type script. How do you get Picture property over to there ?

Thanks

Björn

1 Like
2

Thanks Björn.

This should do the trick in current version:

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

We’re planning to add Dark Mode and Color Groups support for Web in R2.

There will be also a XojoSession.deviceIsDark, so you won’t have to check it manually.

1 Like
3

Thanks !.

How about the picture in question 2 ? Is that possible at all ?

4

Whoops, missed the second question. You can either use a WebPicture.URL or WebPicture.Data encoded in Base64.

You can then use the encoded Base64 data like this:

<img src="data:image/png;base64,iVB0...">

Or as a background image, using CSS:

background-image: url(data:image/png;base64,VSIADfI...)
5

Just for some background, HTMLCanvas is a little tricky in that the picture has to exist in the browser’s cache before it can be drawn. What the WebCanvas does is schedule a refresh whenever a picture arrives at the browser.

1 Like