Customize Themes in io.Connect Desktop

io.Connect Desktop
,
1

Many users ask what are the best practices and how they can customize the look and feel of their io.Connect platform. Even though a lot of examples are already covered in the io.Connect Desktop docs here https://docs.interop.io/desktop/developers/configuration/themes/index.html and the io.Connect Browser docs here https://docs.interop.io/browser/developers/platform-styles/index.html there’s much more you can do to completely redesign both to the smallest piece and comply with your brand’s style. Below, we’ll explore some tips and examples on how to achieve that.

Defining the Available Themes

A. Default themes

You can define the available Themes in the themes.json file located in the config directory of your io.Connect Desktop installation. By default, io.Connect Desktop includes two themes: a “dark” theme (Night) and a “light” theme (Day).

image
image608×690 124 KB

B. Theme persistence

By default the selected theme is automatically persisted between io.Connect Desktop restarts.

It’s saved in a userTheme.json file located in the io.Connect Desktop’s UserData:

image
image671×169 31.7 KB

userTheme.json can also be used to Pre-select a theme programatically (but keep in mind the file is rewritten when the user swithes the theme via UI).

C. Hide the theme selector.

If we don’t want to allow users to select different themes and keep it simple, we can:

  1. Hide selector in the Tray by setting "themes": false under "tray" in system.json:

image
image586×247 52.9 KB

which will remove the selector from the menu in the screenshot below:

image
image595×715 51.6 KB

The schema definition is trayConfig.themes - you can explore the system.json properties and definitions here https://docs.interop.io/desktop/assets/configuration/system.json

  1. Hide the selector in the Launchpad → Platform Personalization. Launcher customization will be covered in a separate article.

Theme Selector UI

A. Default

Below is the io.Connect Desktop out-of-the-box Theme Selector UI

image
image638×286 21.1 KB

B. Customization

If we want to build a custom Theme Selector UI we need to:

  1. Discover the available Themes using the `list()` method of the Themes API

image
image1028×503 143 KB

  1. Programmatically set the Theme on click using the `select()` method of the Themes API

image
image1028×503 158 KB

C. Sync with OS theme changes.

If you’d like io.Connect’s theme to automatically respond to changes in the operating system’s light or dark mode preference, simply update the `syncWithDefaultOSAppMode` system setting:

image
image1035×365 85.6 KB

And then test changing your theme in your Windows personalization settings:

image
image1097×580 89.5 KB

Styling

A. Change the container design (using classic groups only)

Inside the themes.json file within the properties, you can specify the styling of the window chrome.
You can find details about the available options here.

image
image1004×579 156 KB

Changes to themes.json take effect immediately - no need to restart io.Connect Desktop. B. Applications look and feel

Applications are responsible for updating their styling in response to events emitted by the Themes API.

  1. Web apps

You can get the currently selected Theme on startup using the getCurrent() method of the Themes API

image
image981×558 117 KB

And subscribe for Theme changes using the `onChanged()` method of the Themes API

image
image1099×593 86.2 KB

  1. Other apps
  • The Themes API is currently supported only in interop.io’s JavaScript SDK. Under the hood, it uses the Shared Contexts API to propagate theme changes across the platform. If you’re working with other technologies - such as Java, .NET, or anything else - let us know your use case. We’re happy to offer guidance or explore potential support options.

Themes in io.Connect Browser

Available Themes

io.Connect Browser includes two themes: a dark theme and a light theme.

Build a Custom Theme Selector UI

A. You can discover the available Themes using the `list()` method of the Themes API

B. Programmatically set the Theme on click using the `select()` method of the Themes API

Styling Applications

The applications are responsible for updating their styling in response to events emitted by the Themes API.

A. Get the currently selected Theme on startup using the getCurrent() method of the Themes API

B. Subscribe for Theme changes using the onChanged() method of the Themes API

Persisting the Selected Theme

The selected theme is automatically persisted between io.Connect Browser restarts. It’s saved in the browser’s local storage.

More to read

This guide just scratches the surface of what’s possible with theming in io.Connect. From themes.json and system.json config changes to live updates in your web apps, you have the tools to deliver fast, consistent UI updates and fully customize your platform. Find more in the docs below and bookmark the repository for more quick tips.

io.Connect Desktop

https://docs.interop.io/desktop/developers/configuration/themes/index.html

https://docs.interop.io/desktop/assets/configuration/themes.json

https://docs.interop.io/desktop/reference/javascript/themes/index.html

io.Connect Browser

https://docs.interop.io/browser/capabilities/windows/themes/index.html

https://docs.interop.io/browser/reference/javascript/themes/index.html

https://docs.interop.io/browser/developers/platform-styles/index.html