Theming the CycleCloud User Interface

CycleCloud's theme may be customized to better match your organization's look and feel. In order to create a theme, some knowledge of Cascading Style Sheets (CSS) is required.

Creating a Theme

To create your own theme, browse to the config/web directory of your installation and edit the file theme.css. This file contains CSS variables which may be modified to customize colors, images, and other CSS properties.

While it is possible to override other CSS rules using this file, it is not recommended. Only the variables listed in theme.css will be supported across different versions.

The directory config/web may also be used to serve content such as images, which may be referenced in your CSS. All files placed in this directory will be served under the URL static/config/web.

For example, to change the logo to a custom image my-logo-icon.png, first copy the image into config/web, then add the following to theme.css:

:root {
    --theme-header-logo-url: url("static/config/web/my-logo-icon.png");
}

Enabling a Theme

By default, theming is disabled. To enable your theme, log in to the user interface as a super user and navigate to the Settings page. Open the Theme settings and toggle the Custom Theme checkbox to enable or disable your theme. Refresh your web browser to view the changes.

You may also enable/disable theming from the command line. Run the following commands in your installation directory.

To enable a theme:

./cycle_server theme enable

To disable a theme:

./cycle_server theme disable

Modifying the Brand

To change the brand (Azure CycleCloud) that appears in the header, log in to the user interface as a super user and navigate to the Settings page. Open the Theme settings and modify the brand text. Note that you must refresh your web browser to view the new brand.