ColorGroups

Now available for Android, ColorGroups are a way to have a color that can differ between light mode and dark mode. There are three types of ColorGroups: Single, Dual and Named. Add a ColorGroup to your project using Insert->ColorGroup.

A Single ColorGroup is not really a group, it is just a single color. A Dual ColorGroup has separate colors for light and dark mode. A Named ColorGroup gets the color from the system or, in the case of Android, the app theme. You can see the available options in the Android submenu.

For the most part you can use ColorGroups just like you can with other project types. Android does have one addition, the ColorGroup.ToColor() method lets you specifically convert a ColorGroup to a Color. Normally this is done automatically by Operator_Convert, but support for that in Android is still young and this method serves as a workaround should you run into issues with it.

In the Inspector for controls with ColorGroup properties, such as MobileButton.CaptionColor, you can use the ColorGroup selector to manually choose a Color or a ColorGroup:

In addition to working with ColorGroups as project items, you can also create ColorGroups in code:

Var cg1 As New ColorGroup()
cg1.AddColorPair(ColorGroup.Platforms.Mobile, Color.Blue, Color.Teal)

You can also use Android system color names to create a named color:

Var cg2 As New ColorGroup()
cg1.AddNamedColor(ColorGroup.Platforms.Mobile, "holo_purple")

Refer to the Android docs for R.color to see what the system color names are. Keep in mind that not all names are available on all versions Android OS.

For more about ColorGroups, refer to the documentation.

Dark Mode Support

ColorGroups are particularly useful with dark mode and starting with 2025r1, Android projects now default to having Supports Dark Mode switched on.

Several controls have been improved to work better in dark mode at runtime.

In addition, the Android Layout Editor has been improved to look better when working in dark mode and now shows controls with dark mode variants.

Download the latest Xojo release and get access to these new features and more.

Paul learned to program in BASIC at age 13 and has programmed in more languages than he remembers, with Xojo being an obvious favorite. When not working on Xojo, you can find him talking about retrocomputing at Goto 10 and on Mastodon @lefebvre@hachyderm.io.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

DarkMode

All of the chart types now have the ability to render themselves properly in both light and dark modes. For that to happen, using different colors for data representation when the light or dark modes are enabled, all you need to do is assign ColorGroup instances instead of Color values when creating the DataChart instance.

For example, this snippet of code will create two data sets using ColorGroup instances for the values:

Var dsInflaction As New ChartLinearDataset("Dollar", New colorGroup(Color.red, Color.orange), True, dollar)
Var dsTemp As New ChartLinearDataset("Euro", New colorgroup(Color.blue, Color.white), True, euro)

And this is how it is rendered in light and dark modes:

More Grid Flexibility

We added three new properties the the Chart control itself to better handle the way you want the chart grid to be rendered:

• IsGridVisible
• IsYAxisVisible
• IsXAxisVisible

For example, in previous releases you needed to set the GridColor property to Color.Clear to avoid the drawing of the grid lines in the chart. Now, you can set the GridColor to any other color you (or your app user) may want, and simply control if the grid is rendered or not setting the IsGridVisible property to the True/False boolean value.

In addition to the grid itself, you have the flexibility to decide if the rendered chart will display the X or the Y axis along their values through the IsXAxisVisible and the IsYAxisVisible boolean properties. As with the IsGridVisible property, you can change these values at runtime and the chart will be updated accordingly:

Inline Labels

Also, starting with Xojo 2024r2, for all the chart representations based on a ChartCircularDataset, you will be able to decide if you want the Labels to be rendered inline in addition to these rendered by default in the upper section of the chart, or instead of these. This can get a better identification of the label representing every Pie chart section, requiring less screen space.

In order to display the Inline labels all you need to do is set the ChartCircularDataset.HasInlineLabels property to True.

Conclusion

As always, we look forward to keep improving Charts and see how do you use them in you Xojo developed apps and solutions!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Supporting dark mode with Win32 controls is never an easy exercise, but if you’ve been following along with our work to modernize our Windows framework with XAML, then you may have already updated your apps with the XAML TabView control that natively supports dark mode.

Simply plug this bit of XAML into our DesktopXAMLContainer Content property and you’ve got yourself a modern looking TabPanel that already supported dark mode even before we did.

<winui:TabView>
	<winui:TabView.TabItems>
		<winui:TabViewItem Header="Tab 1">
			<StackPanel>
				<TextBlock Text="This is Tab 1" Margin="5"/>
				<Button Content="Button 1" Margin="5"/>
				<CheckBox Content="Checkbox 1" IsChecked="True" Margin="5"/>
			</StackPanel>
		</winui:TabViewItem>
		<winui:TabViewItem Header="Tab 2">
			<StackPanel>
				<TextBlock Text="This is Tab 2" Margin="5"/>
				<TextBox Text="Enter text here" Margin="5"/>
				<ComboBox Margin="5">
					<ComboBoxItem Content="Item 1"/>
					<ComboBoxItem Content="Item 2"/>
					<ComboBoxItem Content="Item 3"/>
				</ComboBox>
			</StackPanel>
		</winui:TabViewItem>
	</winui:TabView.TabItems>
</winui:TabView>

While people debate on which mode (light or dark) they prefer to work in, you can ultimately control whether you want to support dark mode or not in your app by toggling the “Supports Dark Mode” build setting. For an example on how to dynamically switch between dark and light mode in your app using XAML, see the XAML ButtonStyling example project and the RequestedTheme property.

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

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. For Web projects, there is now 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.

If you are still curious about Bootstrap 5 specifically, you can view the Bootstrap 5 Migration Guide where 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.

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.

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.

Depending on your flavor of Linux (in this example we’re using Gnome on Ubuntu 20.04), you can change themes from your Settings/Appearance sidebar:

And for those interested in other themes, you can also change themes at the command line:

gsettings set org.gnome.desktop.interface gtk-theme 'Yaru-dark'

Xojo will be able to determine which themes are dark mode savvy. Now you are ready to enjoy the dark side of Linux along with Xojo!

William Yu grew up in Canada learning to program BASIC on a Vic-20. He is Xojo’s resident Windows and Linux engineer, among his many other skills. Some may say he has joined the dark side here in the USA, but he will always be a Canadian at heart.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

While not perfect, Microsoft has always provided enough capabilities (for the most part) to get Win32 controls themed for dark mode. Some Win32 controls they even themed correctly from the beginning when Microsoft first introduced dark mode on Windows. However, there are a few controls that are not supported in dark mode, such as TabPanels, autocompleting ComboBoxes, and DateTimePicker.

To opt into dark mode, just enable it in the shared build settings (by default this is enabled).

Not ready for dark mode? Simply disable that option and your app will continue to operate in light mode as before. When you are ready for dark mode, make any necessary image adjustments and make sure to use the appropriately themed colors (for example Color.TextColor) in places that need it. For dark mode customization use the Color.IsDarkMode to check if the OS is in dark mode. To theme colors differently between light and dark mode, add a ColorGroup and assign them to the controls that need them. Once you’re done with your tweaks, enjoy the dark side of Windows!

For additional capabilities, you can disable dark mode theming (even when you have the dark mode support enabled) in your app by setting up the XOJO_WIN32_DARKMODE_DISABLED environment variable (either set to “true” or “1”) in your App.Opening event.

Learn more in the Xojo Documentation.

Improved Overall Speed
One of the most obvious areas that hurt people with large projects is the speed of the IDE itself. We worked on a number of pain points to improve the overall IDE experience. Specifically, we were looking for things which by themselves were not too bad, but in a cumulative effect they could take large chunks out of your day.

One such area was in saving text projects. Now you wouldn’t think that there was much room for improvement here, since it’s just File I/O right? We found an optimization point in the way we save Bookmarks and Breakpoints, which in the IDE project represents a huge savings when making lots of changes. In our case, we went from 30 seconds down to 1, and for someone who insists on saving before every run, it makes a huge difference.

We also optimized drawing in the Navigator, and that change resulted in huge overall speed increases in many parts of the IDE, from selecting large number of items in the Navigator itself, making changes to multiple items, to even just typing code in the code editor.

Improved Tab Management
Tabs have been broken in one way or another for a long time. They finally got some TLC this cycle and we think you’re going to be much happier with the way they work now. We’ve rewritten the logic surrounding how tabs are chosen when you take an action which results in a new location request and made the behavior consistent, no matter where that request comes from. Whether that’s a Go To Location request or a search or clicking on an error result. The rules are applied in the following order:

1. If there is at least one locked tab which matches the Go To target, the first one will be used (left to right).
2. If there is at least one unlocked tab which matches the Go To target, the first one will be replaced.
3. If the current tab is unlocked, it will be replaced with the new location.
4. If there are any unlocked tabs, the first one will be replaced.
5. If none of the above conditions are met, a new tab will be created for the target location.

NOTE: Debugger Tabs are never eligible as a Go To target. This may seem obvious, but it wasn’t always true before. Now it is. Debugger tabs are also locked by default and cannot be unlocked.

The only exceptions to these rules are the Open In New Tab rules. That is, if you right-click on an item and select Open In New Tab or you double-click on an item with the “Double-click opens item in new tab” preference set, they will always open a new tab for you.

Once you start using the new logic, I think you’ll agree that it’s much more intuitive and you won’t feel like the IDE is constantly switching contexts on you. Personally I find that I’m using fewer tabs than in previous versions because I’m more confident that the objects I opened will still be there when I get back.

MacOS Dark Mode Layout Editor Toggling
On macOS 10.14 and above we’ve added a new toolbar button which allows you to quickly switch the Window you are editing between light and dark mode. No more switching your entire OS just to see how your app will look in the other mode.

Navigator Contextual Menu
We’ve done some cleanup work here to make it more obvious what you can and can’t do with objects in the Navigator. Gone are all of the disabled items that were not “in-context” for the currently selected item because, well duh, they’re not “in-context”. We’ve also enhanced the Edit Superclass and Edit Subclass menus. Edit Superclass now shows the entire superclass hierarchy, including things that you can’t edit (disabled of course) so you can track down common parentage. The Edit Subclass menu has been alphabetized so you don’t have to read the entire list just to find all of the items that begin with “c”.

Code Editor Contextual Menu
This menu has also gotten some love and attention. First of all, the menu has been reorganized so that the menu groups are based on the context of the thing that you’ve clicked on and the object where the code itself lives.

Group 1: Just like previous versions of the IDE, Cut, Copy, Paste, Delete and Select All are still at the top of the menu. They’re a common thing for mouse oriented users and we don’t want to hurt that functionality.

Group 2: The next group is for things that are for accessing or modifying the object that you’re currently editing. This is where you’ll find the Switch To menu for directly accessing the other code items within the current item.

We’ve also added two new submenus to this section that are specifically for copying the event and delegate signatures of the thing you’ve clicked on. For example if your code refers to a URLConnection object, you can now right-click on URLConnection and select Add Method > From Event > ContentReceived and the IDE will automatically add a method to the current object with the same signature including the object itself for use with AddHandler! In this case, you’d end up with a method that looks like this:

URLConnection_ContentReceived(obj As URLConnection, URL As String, HTTPStatus As Integer, content As String)

Then you could type something like:

AddHandler h.ContentReceived, AddressOf URLConnection_ContentReceived

Delegates work the same way, albeit without including the object reference in the method signature. No more flipping back and forth between your current code and the target object or Language Reference to copy the signatures!

Group 3: If it exists, this group is for things that are specific to the object or instance of the object that you clicked on in the code editor. This is where you’ll see the “Find” and “Go To” menu items for finding other uses of or going to the definition of an item, respectively.

Group 4: This group is for selection and code-specific tools including the Insert Color command, Standardize Format and the Wrap In menus for wrapping the current selection if an #If #EndIf or While/Wend block. This section also sports the menu for converting the current selection to a Constant or a Method.

Group 5: From here you can toggle Breakpoints and Bookmarks

Group 6: Help and Language Reference access.

For more information about the changes in 2019r2, read the full Release Notes.

Things like drag and drop (from other sources and also to other sources), undoing the picture assigned, moving the control instances around the parent RectControl (or Window), reacting to DarkMode changes on macOS, and properly resizing the picture so it fits in the Canvas area while keeping its original aspect ratio are implemented in AXImageCanvas, among other features.

Of course, AXImageCanvas abstracts the user from everything related to the usual CRUD operations associated with a Database backend: Creating a new Record, Retrieving the Picture from a record, Updating the Picture of an existing record, and Deleting the Picture for the designated record. All of this trying to mimic the easiness of use we are used to when using the standard Xojo framework itself.

The user only needs to assign, paste or drop the Picture to display … and AXImageCanvas takes care of the rest.

So, for example, the binding behavior to a database is implemented in a way that tries to emulate one of the most appreciated features for Xojo users in the past: DataControl.

The user only needs to set the database instance they want to use (it may be a MySQL/MariaDB, PostgreSQL or SQLite database instance), the name of the table they want to use, the name of the column to store the pictures and (optionally) the name of the column to store the original path to a picture read from a FolderItem.

Even if there is only set the column to store the original Picture FolderItem path, then it will not save the Picture data itself, and it will recover the picture later to display based on the saved path information. This alleviates the database data overload for some use cases, when the developer of a solution prefers not to store the picture data in the database itself, just the path pointing to it.

The class is also smart enough to abstract the user from all the SQL queries it would have to write in function of the database engine used. It is completely transparent, as it is the navigation through the database records even if their IDs are not consecutive (this is a mandatory requirement: the table has to have an ID column).

The logic put in the class also gathers information about the database table itself, if for example it only has the two columns set to the instance (Picture column and Picture source path column; plus the mandatory ID column), then the Delete Record action will effectively delete the record from the assigned database table; otherwise, if the table has more columns, it will NOT delete the record, because it’s something you probably wouldn’t want to do … and it simply updates the displayed record to empty (nullify) the information for the Picture and (optionally) the Picture Path columns, keeping thus the rest of the record data intact.

As for PostgreSQL database, there are two paths that can be taken regarding storing Pictures. We can say that the first one is the usual path, storing the Picture data itself in a column table (valid for data not exceeding 1 GB) and through Large Objects (pg_largeobject) via the previous acquisition of an OID value. AXImageCanvas uses the first technique.

In addition, it also properly deals with record navigation for all the supported databases engines even if the records IDs are not consecutive; and when the records navigation is set to the “wrap around” mode, it does it also correctly for all of the supported databases engines.

Another common quirk it deals with answers one of the usual questions: Database Server disconnections due to the timeout. AXImageCanvas takes care of it when the connection is lost and if it is something not transient, then properly raises the exception so it can be cached by the application logic.

But one of the most important things is that everything can be configurable through the properties shown in the Inspector Panel of the Xojo IDE, for the maximum simplicity in the AXImageCanvas setup; and also via code to give the maximum flexibility at runtime when the application is in use, so it can react to things like changing the database engine, or simply disabling things like moving or resizing the control among others.

Pictures and Drawing Speed

What about redrawing concerns? This is something that AXImageCanvas also takes care of. It applies several image caching techniques while keeping the set Picture at its full resolution.

This allows, for example, abstracting you from what you can see displayed in the AXImageCanvas control at the desired size, from what you can do with the original Picture itself: from previewing it (something you can do simply pressing the space bar when the AXImageCanvas has the focus), getting more information about the Picture and (optionally) original FolderItem (press the ‘I’ key for that while the AXImageCanvas instance has the focus), or any other operation your app would want to do, like for example exporting the picture to other format.

In this sense, it also takes into consideration the operations done with the control itself during the redrawing or control size changes, minimizing the writing to the Database to the strictly necessary (always, of course, there is a database associated with the instance).

The Goals

To summarize, AXImageCanvas tries to be the simplest solution when dealing with Pictures and (optionally) its storage on databases. Just drop as many instances as you need in your layout, set the behaviour through the Inspector Panel Properties (even setting the initial picture to display) … and you’re done! The best part is that the behaviour will be the same for Windows, macOS and Linux deployed Desktop applications, both in 32 and 64 bits.

Of course, you can download the Xojo Project Example and try it yourself! This is a fully functional demo without restrictions. I’d be glad to hear from you about suggestions or features you would want to be included for better fit your needs!

Javier Rodri­guez has been the Xojo Spanish Evangelist since 2008, he’s also a Developer, Consultant and Trainer who has be using Xojo since 1998. He manages AprendeXojo.com and is the developer behind the GuancheMOS plug-in for Xojo Developers, GuancheID, AXImageCanvas, Markdown Parser for Xojo, HTMLColorizer for Xojo and the Snippery app, among others.

Download mp3.

Show Notes

• tvOS 13
• iOS 13
• iPad OS
• Mac Pro
• MacOS Catalina
• Xojo iOS Dark Mode Support

Every year we watch Apple’s WWDC keynote address to see what new features are coming in macOS and iOS that we’ll want or need to support. Last year it was Dark Mode in macOS Mojave. We knew from the moment we saw it that we both wanted and needed to support it.

While at first glance it seemed easy enough, but it was a non-trivial task. Supporting it in the Xojo framework so that you could support it in your apps was fairly straightforward. Supporting it for the Xojo IDE itself, however, was another matter entirely. The IDE has a lot of graphic images that needed to be duplicated and updated so that it would look great under Dark Mode. As a result, Dark Mode ended up consuming nearly an entire release cycle.

When adding Dark Mode support for macOS, we planned ahead so that should it be added (or something like it) to other platforms we support, we’d be prepared. This is also part of what made Dark Mode support a far more significant job.

Prior to yesterday’s keynote, we were fairly certain that Dark Mode support would be announced for iOS 13. Fortunately, with all the work we have already done to support Dark Mode in the Xojo framework, adding it for our iOS framework is a trivial task. For those of you anxious to add it to your iOS apps, fear not.

To activate dark mode in Mojave, go to System Preferences, click General and select the “dark” appearance. The entire UI will switch to a darker, more muted color scheme which can be easier on the eyes, especially at night.

Here is what the Xojo IDE looks like in dark mode:

In order for your apps to support dark mode you’ll have to rebuild them with Xojo 2018r3 with its support for dark mode. Once you open your project in 2018r3 go to Shared Build Settings and turn on the Supports Dark Mode property:

Note: This property defaults to OFF for existing projects and ON for new projects.

This will automatically cause the Xojo built-in controls to switch to dark mode when you run your app in dark mode on Mojave. Here is Eddie’s Electronics running in dark mode:

For your own graphics and custom controls you may need to update your drawing code so that you use darker colors and icons when in dark mode. There is now a new IsDarkMode global method that you can check to see if your app is running in dark mode so that you can choose a different color or image.

The App.AppearanceChanged event is called when the user switches between light and dark modes or when the accent color changes. You can use this to tell your UI to update or redraw as necessary.

Read more about this change and others coming to Xojo graphics and the IDE in this post. To learn how you can update your apps to work in dark mode, refer to the Dark Mode topic in the documentation.

With Apple’s announcements at WWDC 2018 and the introduction of dark mode it was time to revisit our graphics and the overall appearance of the IDE again. Here are some things which contribute to the changes that have been made and ones that you will see in the coming months.

Dropping macOS 10.9

Xojo 2018r3 drops support for macOS 10.9 and as the last version which had the skeuomorphic design elements all of our supported OS’s now have the flatter modern design. It’s not that this has held anything up per se, but it’s a good reminder that “it’s time”. 

To that end, we have taken that opportunity to remove some of the graphics that make the IDE look out of place and doing so subtly lowers the memory footprint and accelerates drawing of the IDE itself across all platforms. We’re also using a variation of Apple’s image templates which has somewhat reduced the on-disk footprint of the IDE itself.

macOS Dark Mode

Apple’s addition of a darker variant of the visual “Aqua” theme in macOS means that we needed to do an audit and update of several of our base framework controls so that your apps would render correctly as well as ours. 

Events

While it probably won’t be used very often (how often does one change themes while running a piece of software, besides the novelty of seeing it happen), we added an event to the App class named AppearanceChanged to notify you when the user changes from light to dark or changes their accent color. This is a good place to clear any graphic or color caches which contain theme specific UI graphics. 

Methods

There is also a new global method called IsDarkMode(Boolean) which will return True if your app is running with the Dark Mode theme on macOS 10.14 or higher. If your app is running on 10.13 or lower or in light mode on 10.14, IsDarkMode will return False.

Build Settings

Enabling Dark Mode in your apps is as easy as flipping a switch in the Shared Build Settings. Unfortunately, because Apple made the assumption that most apps would “just work” versions of your apps compiled with older versions of Xojo will either need to be recompiled with Xojo 2018r3 or you’ll need to push out a new version with a plist entry to prevent macOS 10.14 from showing your app dark in Dark Mode. 

Testing

When testing apps for use with Mojave’s dark mode, I seriously suggest that you test on a system that allows you to see the translucency effects of dark mode. Virtual Machines are usually really handy for testing, but in this case, Parallels Desktop 14, VirtualBox 5.2 and VMWare Fusion 11 do not show the subtleties of dark mode.

Colors

One of our goals at Xojo is to remove some of the headaches involved with the minutiae of each OS that you deploy for and to that end, we wanted to make drawing custom controls easier too. What this means is that the built-in global colors are largely theme aware now and will change depending on whether your app is running in light or dark mode on macOS. This affects things like TextColor, FillColor, FrameColor, HighlightColor, etc, so if you use those methods when drawing in pictures and canvases, you will want to audit that code. If you want a specific color, you should use a color constant. For instance, use &c000000 if you want black because TextColor will now return white in Dark Mode. 

In terms of the framework controls themselves, we are taking this opportunity to make some changes to make your apps appear better in the macOS 10.10+ ecosystem. Ever notice that a Label control and the text portion of a CheckBox or RadioButton control are not exactly the same color? Going forward, the default colors of controls which should automatically change between Light and Dark modes will do that. So if you have a Label using the default color of &c00000000 (Black with Transparency = 0), the color that is actually used is what Apple calls labelColor. It’s still black, but is a tiny bit translucent. TextFields and TextAreas will automatically change text, placeholder, selection and background colors to match the Apple prescribed colors for automatic Light/Dark compatibly. We think you’ll find that building your apps with 2018r3 will largely make them just behave and appear the way you expected them to.

IMPORTANT NOTE: These color and framework changes affect how your apps draw on all versions of macOS, so make sure you try them out on your 10.10 through 10.14 VMs before shipping!

Eating our own dog food

One thing we hear from users every so often is the desire for Xojo to use our own products for building apps. As most of you know the IDE itself is written in Xojo, but we also have several other apps (big and small) that are written in Xojo.

• Feedback – Our bug reporting system
• Xorders – Our internal order system
• Lingua – The Xojo localization app
• Remote Debugger – The remote debugger stubs for desktop and console

While the 2018r3 cycle was in progress, all four of these projects got updated for Mojave’s Dark Mode and definitely helped us find framework rendering bugs early on in the pre-release process.

What about Windows and Linux?

The TL;DR version is that we’re still looking into it. 

Currently there are several different ways to change Windows 7, 8 and 10 to use a dark interface, not all of which are compatible with the Xojo Framework controls and the Windows 10 2018 Fall Update promised yet another way but that ended up only being for UWP. We are looking into which method gets you the most “bang for the buck” so to speak.