Dark mode versus light mode

Targets Web
1

Is it possible to allow the user to toggle between dark mode and light mode in a Xojo web application?

I wish to give the user the ability to switch.

Xojo advertises drop-in Bootstrap 5 themes, but that’s more when you push the compile button rather than when you push the preferences button once the application is already running.

The only way I can think to go around this is to have two parallel versions of the application running on the same web server and routing the traffic to the dark side or to the light side. ( Star Wars references are hereby preempted in any comments.)

2

It should be automatic though, so even if you had two servers, they’d still show what the user’s browser requests and therefore the same, unless you’re thinking about using two separate themes. If that’s your goal, I seem to remember that we added a way for developers to use different themes at runtime on user by user basis, but I’m not 100% sure any more.

Edit: darn autocomplete

1 Like
3

The following code in a Checkbox will switch between light and dark modes:


if me.Value then
  me.ExecuteJavaScript("document.body.setAttribute('data-bs-theme', 'dark');")
  
Else
  me.ExecuteJavaScript("document.body.setAttribute('data-bs-theme', 'light');")
  
  
end if

(Untested in a production project)

2 Likes
4

Yes, see WebSession.ColorMode

Example:
screencast2025-06-115PM-29-02-ezgif.com-video-to-gif-converter

Sample code:

if me.Value then
  Session.ColorMode = WebSession.ColorModes.Light
else
  Session.ColorMode = WebSession.ColorModes.Dark
end if
4 Likes
6

Very cool, I didn’t even know it was there.

How does one set the alternate colors for the controls?

7

The bootstrap theme has sections for Light and Dark mode definitions, for example:

image
image812×376 42.4 KB