Starting in version 16.1, theming support has been added to the Connexion and Gateway UIs. We’ve added a ‘dark’ mode in addition to the existing ‘light mode’. When starting up, the UI will check the operating system theme and automatically use either light or dark mode. You can manually toggle between light and dark mode by clicking the theme glyph in the top right corner.
Theme support has been added to most of the built-in Connexion controls commonly used by third-party device developers, however, your devices may not be able to take advantage of theming without some minor updates. Below is a guide to supporting themes in your own devices.
We have also switched almost entirely to vector images, which should provider a crisper visual appearance when running >100% scaling. We recommend you include/define your own images as we do update ours from time-to-time, however, you may use images from our vector library by adding a reference to the Connexion.Share.Ui.Images assembly and using the static resource syntax:
Vector image support has been added for the main device icons and is described at the end of this document.
Theming
By default, all native controls support theming. Using style-less controls, your devices will automatically support dark mode. It is important to not set explicit backgrounds or foregrounds unless the colors work in both light and dark mode.
If you have elements within your device UI which require customization based on theme (ie, you wish to specify different colors depending on which theme is selected) then you have two options:
Add a reference to Connexion.Share.Ui.Style and use one of our existing resources. Attached to this document are the dark.xaml and light.xaml files which define variables used within Connexion. You may dynamically reference one of these.
2. Use code-behind to detect the theme (and when it changes) and use xaml bindings/styles to set the resources. In your viewmodel (or view class) you can use the IThemeProvider interface to hook theme infrastructure.
