# Customize Themes in io.Connect Desktop **URL:** \ **Category:** io.Connect Desktop\ **Tags:** Knowledge-base, tech-blog\ **Created:** [July 31, 2025, 9:00pm UTC](https://community.interop.io/t/customize-themes-in-io-connect-desktop/16 "2025-07-31T21:00:00Z")\ **Posts on this page:** 1\ **Page:** 1
**Author:** ![Georgi\_G](https://yyz2.discourse-cdn.com/flex028/user_avatar/community.interop.io/georgi_g/32/184_2.png) [@Georgi\_G](https://community.interop.io/u/Georgi_G)\ **Post date:** [July 31, 2025, 9:00pm UTC](https://community.interop.io/t/customize-themes-in-io-connect-desktop/16/1 "2025-07-31T21:00:00Z")
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](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](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](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/a2bc69f05cae80e3188b0bcff07f8a392e07df9a.png) ### **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](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/092bd259280b973367c0f760ffb01d5dc03b7265.png) `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](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/b2737019c70f53e0960d954982b29ccf5be53387.png) which will remove the selector from the menu in the screenshot below: ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/8dd72cd5d8d1ebe285757e3db46a093d4c674694.png) 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](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](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/3a0f43969841be8b90bc241349684691acf9445a.png) ### **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](https://docs.interop.io/desktop/reference/javascript/themes/index.html#API-list) ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/f45c725e146b4c04ba3303a327dd72409b5131b7.png) 1. Programmatically set the Theme on click using [the `select()` method of the Themes API](https://docs.interop.io/desktop/reference/javascript/themes/index.html#API-select) ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/a165b2cf95f24e3a704d26ad013ddd732c0bdfc3.png) ### **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:](https://docs.interop.io/desktop/developers/configuration/themes/index.html#theme_properties) ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/99581be28387869aeca3ac778de98264aed78eeb.jpeg) And then test changing your theme in your Windows personalization settings: ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/27f5940eb85a2cee8f5c08ac08d8c2d32f6abc5b.jpeg) ## **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](https://docs.interop.io/desktop/developers/configuration/themes/index.html#theme_properties). ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/727cde25688046bb07dbabc3a72e6bc2c045f518.jpeg) 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](https://docs.interop.io/desktop/reference/javascript/themes/index.html#API-getCurrent) ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/5ee7b14de0c5184a09928983eb2e56d97043ca5c.png) And subscribe for Theme changes using [the `onChanged()` method of the Themes API](https://docs.interop.io/desktop/reference/javascript/themes/index.html#API-onChanged) ![image](https://canada1.discourse-cdn.com/flex028/uploads/interopio/original/1X/e13f2cb6daf6fcc7c6ffe54a0d7c720257f9b0a8.jpeg) 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](https://docs.interop.io/browser/reference/javascript/themes/index.html#API-list) B. Programmatically set the Theme on click using [the `select()` method of the Themes API](https://docs.interop.io/browser/reference/javascript/themes/index.html#API-select) ## **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](https://docs.interop.io/browser/reference/javascript/themes/index.html#API-getCurrent) B. Subscribe for Theme changes using [the `onChanged()` method of the Themes API](https://docs.interop.io/browser/reference/javascript/themes/index.html#API-onChanged) ## **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/developers/configuration/themes/index.html) [https://docs.interop.io/desktop/assets/configuration/themes.json](https://docs.interop.io/desktop/assets/configuration/themes.json) [https://docs.interop.io/desktop/reference/javascript/themes/index.html](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/capabilities/windows/themes/index.html) [https://docs.interop.io/browser/reference/javascript/themes/index.html](https://docs.interop.io/browser/reference/javascript/themes/index.html) [https://docs.interop.io/browser/developers/platform-styles/index.html](https://docs.interop.io/browser/developers/platform-styles/index.html)