Dark Mode Support and Bootstrap 5

You can now create web applications with Xojo that respects users’ Dark Mode preference with Bootstrap 5.

There is a new WebSession.ColorMode property you can use. It will be set as Auto by default, meaning it will match the user’s OS appearance preference, but it can also be forced to Light or Dark. It can be changed at runtime and per session.

While not everyone likes Dark Mode, some of your end users will appreciate this. Due to medical circumstances, they might actually need it, so please consider adding support even if you don’t like dark interfaces.

If you want to enable Dark Mode in your previous projects, you will have to manually enable the setting in the Shared Build Settings section (which is turned on by default on new projects):

Color Groups can also be used nearly everywhere, and they will be used in the IDE preview when you toggle between Light and Dark Mode:

In order get Dark Mode support ready for Web, we had to upgrade our internal Bootstrap dependency from v4.6.1 to v5.3.0, which is a huge leap by itself. Bootstrap 5 comes with a refreshed color palette, new components, modernized existing controls and bug fixes. Please check our previous Bootstrap 5 is Coming to the Xojo Web Framework blog post.

If your application wasn’t using a custom Bootstrap Theme (bootstrap.min.css), everything should look more or less the same except for the subtle color palette differences and rounder buttons. Bootstrap 4 themes aren’t supported in Bootstrap 5, please replace it with a v5 theme if needed. Not every theme supports Dark Mode, but the one included in Xojo does.

If you are a theme builder, please check the Bootstrap’s Color Modes documentation. You can also find free Bootstrap 5 themes available at Bootswatch.

We also want to send a big thank you to our third party developers for their effort adapting their Open Source and Commercial plugins and controls to Bootstrap 5. You can learn about what they offer at the Xojo Extras Store and in the Open Source Projects page in the Xojo Documentation.

Accessibility

Navigating and using web applications with the keyboard makes everyone’s life easier. In Xojo 2023r2 we’ve upgraded WebPagination and WebBreadcrumb controls, which are composed of more than one focusable item. Your users will be able to properly use the tab key to go through them.

We plan to continue working on improving Accessibility. Please open a new Issue if you find anything that can help you and your end users.

WebListBox

DataTables, the internal dependency we use for bringing your tables to life, has been upgraded from v1.10.20 to v1.13.4. This recent version includes support for Bootstrap 5 and a few bug fixes that some users were facing in their web projects.

You can now disable your WebListBox by setting its Enabled property to False so your users won’t be able to interact with it. And also, if you were missing this feature that’s in the DesktopListBox, you can now add Variant tags to your columns, using the new WebListBox.ColumnTagAt.

Last but not least, this control comes with a visual Inline Editor, like in its Desktop counterpart:

WebChart

Chart.js, the underlying library we use for WebChart, has been upgraded from v2.9.3 to v4.2.1. Again, we’ve done everything we could on our side so you don’t have to do anything.

The only exception is with the WebChart.OverrideOptions event. If you are currently using it, you’ll have to check the library documentation as the internal options JSON has changed.

You can expect the new DesktopChart features to be working on WebChart, like configuring how the lines look like (including the endpoints), background images or prefix and suffixes. Read New Additions to DesktopChart, MobileChart and WebChart to learn more.

Web SDK

If you are using third party controls, you will notice some of them now have a custom icon in the IDE Library. But even more important, they will use less memory at runtime.

Are you developing Open Source or Commercial Web SDK controls? Remember there is a dedicated Web SDK forum where you can ask any questions you may have.

IDE Performance and Improved CSS Support

Bootstrap 5 makes use of the latest CSS features. We took the opportunity to rethink our CSS parser and improve its performance at the same time. As a result, the IDE preview looks even closer to what you see in the browser, and we render everything faster.

Wrapping Up

Over 50 bug fixes and features were included just for Xojo Web in Xojo 2023r2. Please find a full list in the Release Notes. read more about Bootstrap 5 and updates to WebChart on the Xojo Programming Blog. We are looking forward to hearing your thoughts and seeing what you’re building with Xojo! See you in the forum!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.

For most Xojo users, this update won’t require any changes at all to your existing projects. For those that create their own controls using the Web SDK, there will likely be a minor bit of work.

Dark Mode Support

The Web framework is currently the only Xojo framework that doesn’t support Dark Mode. Fortunately, Bootstrap 5 does. As with Desktop targets, users of your web projects will be able to decide between the light and dark modes. We plan for this to work identically to the way it works for your Desktop projects now. There will be a Supports Dark Mode Build Setting that will be off by default for existing projects and on by default for new ones.

More than Dark Mode

Visually, Bootstrap 5 comes with some subtle changes. For example the blue color it uses is still blue… but not that blue, helping to increase the contrast of your buttons.

You may notice that the buttons are a little bit rounder by default, following the latest design trends.

The look and feel of some input controls, like checkboxes and radio buttons, will be more similar between different browsers and operating systems.

Bootstrap 5 also includes new components and features, like Accordion and Offcanvas. These may find their way into future releases via the Web framework or from one of the third-party control developers.

Finally, Bootstrap 5 no longer depends on jQuery and it makes use of the latest CSS features which brings us to the next section.

Potential Migration Challenges

We’ve made it so most Xojo users won’t need to make any changes to their web projects. For example, we’ve adapted the Breadcrumb control to look like Bootstrap 4 by default. Generally speaking, if you are using the default theme and you aren’t using third-party controls, you won’t need to do anything special.

However, if you are currently using a custom Bootstrap 4 theme that uses a custom bootstrap.min.css file, it may not work properly. If you’ve downloaded the theme from a website such as Bootswatch, you can download an updated Bootstrap 5 compatible theme from the same site. Bootstrap 5 themes are actually easier to find than those for v4.

We are announcing this change to v5 in advance to allow third-party library developers the time to adapt their code and make use of the new Bootstrap 5 HTML and JavaScript API. If you rely upon any third-party controls for your web projects, you will need to upgrade them when new Bootstrap 5-compatible versions become available.

To make the migration as smooth as possible for everyone, we will continue including jQuery and provide independent betas, prior to releasing a version of Xojo with Bootstrap 5.

In the Bootstrap 5 Migration Guide you can find an extensive list of changes and improvements since Bootstrap 4.6.

If you have any questions, please feel free to ask on the Forum. Users attending the Xojo Developer Conference can also meet and talk in person with Xojo engineers, about this or any other topic.

The Web SDK can help, giving you the opportunity to build anything. In 2022r4 we are adding more examples, to help you start building your custom controls.

Here is the list of the new examples we’ve added in this release.

Custom Button

This is a highly configurable custom button, where you can set any width, height and the border radius.

It is probably the simplest control you can create, but it will help you to practice. This example also demonstrates everything you will need to draw your controls in the Xojo IDE layout editor.

There are plenty of comments in every SDK event to help you get started.

Custom Select

This is an alternative to the WebPopupMenu control, built from scratch using the Web SDK. It also makes use of the DrawControlInLayoutEditor event and contains plenty of comments.

It uses the same techniques we are using for the first example, in a more complex control.

Bootstrap Toast

While in the other examples we are using plain JavaScript, this one demonstrates how to use TypeScript for coding your controls. TypeScript is the language we use to compile our own web controls, and what we also recommend to build them.

As this control needs a folder structure, you can find this example in this path:

Extras > WebSDK > Examples > Bootstrap Toast

This is a special control, as it doesn’t works like the other visual controls. Like a WebDialog, you will need to drop the control into your WebPage. Whenever you want to display a Toast, you’ll have to call a method.

Conclusion

Building your own controls will open a new world of possibilities. If you want to start with your first one, I recommend you to try to recreate the Custom Button example from scratch, with your own code.

In the Web SDK folder, you can also find the WebSDK Docs PDF document, that will help you to understand better what each event does, when and why.

Are you planning to create your own custom controls? Let us know in the forum!

Ricardo has always been curious about how things work. Growing up surrounded by computers he became interested in web technologies in the dial-up connections era. Xojo has been his secret weapon and language of preference since 2018. When he’s not online, chances are he will be scuba diving … or crocheting amigurumis. Find Ricardo on Twitter @piradoiv.