Construct 3 allows theme addons, which simply add some custom stylesheets to the document. This allows a great deal of flexibility in customising the appearance of the Construct 3 editor. Any features of CSS can be used to alter the UI appearance. You can use browser developer tools to identify the classes and DOM structure used in the editor, and override the styles Construct 3 applies by default in your own stylesheet.
Themes are based on the same .c3addon file that plugins and behaviors use, although with fewer necessary files. As you can see in the theme SDK download, all you need are
addon.json, an icon, and a stylesheet. Note your addon metadata must also contain a list of
stylesheets — this is just a list of the CSS files to add to the document when your theme is applied.
As with other kinds of addon, you can test themes as developer addons for quicker development.
Tips for developing themes
- Avoid making significant alterations to layout. In many cases Construct 3's code assumes certain layout of elements. Additionally it is time consuming to test layout changes work across every part of the UI. For example Construct 3 has over 50 dialogs, and testing all the dialogs still appear correctly after a change is a lot of work. On the other hand, cosmetic changes like colors and borders are usually safe.
- Be sure to also test your theme on mobile. Construct 3 uses different paradigms and layouts in a number of places when adapting to smaller mobile displays, and you should check your theme still appears correctly in that mode.
- Be wary of styles that could have a performance impact. For example heavy use of shadows, effects (such as blurs or other filters) or animations, could be taxing on the CPU or GPU. Fewer people will use your theme if it slows down their device, so try to make sure your styles are used efficiently.
Once you have installed a theme addon, you can start using it by selecting it from the Settings dialog. Note this involves restarting Construct 3 twice: once when the addon is installed, after which it appears in the Settings dialog, and then again after selecting it in the Settings dialog.