Skip to main content

Run Theme

You have the freedom to personalize the look and feel of the RUN interface by crafting your application with a unique color palette and custom assets. To get started, access the Run module and navigate to the Theme tab. The available customization options are described below.

1. Signup page​

Within the Signup page, you can customize colors, the background, and the displayed logo. You may choose an image, a video, or a solid color for the background. Any adjustments applied to the Signup page will also extend to the Sign-in page.

tip

You can upload the image files for the background and logo on TagoIO's file storage service.

2. Sidebar & Navigation bar​

The Sidebar and the Navigation bar are the main components used to route users through the application.

2.1 Sidebar​

The Sidebar contains the vertical menu housing your sidebar buttons and the dashboard list. Personalizing the background color ensures that icons and text automatically adapt their colors for optimal contrast and readability.

2.2 Navigation bar​

The Navigation bar is the top horizontal menu that displays the logo, notifications and the account menu. (Remaining content not visible in the provided screenshot.)

2.3 Navigation Bar Customization​

You can customize both the color of the navigation bar and its elements. Additionally, you have the option to set a custom background image for the navigation bar. The image can be adjusted using the following fit options:

  • Full – the image occupies the full width of the bar, with its height limited to match the bar’s height.
  • Cover – the image occupies the full width of the bar.
  • Contain – the image occupies the full height of the bar.

You can also enable a Repeat option to create repeating patterns and adjust the Opacity to blend the image seamlessly with the background color.

2.4 Account Menu​

The account menu allows users to access account‑related features and is located on the navigation bar. You have the option to add new items into this menu, such as text entries, links to URLs, or your own dashboards.

3. Page Header & Background​

The page header displays the title of the module you are using in TagoRUN. It is available on desktop platforms; on mobile devices it is replaced by the navigation bar.

The page background reflects the module that you are using. Since dashboards have their own color settings, modifying these colors will change the appearance for notifications and account settings. Icons and text automatically adjust their colors to maintain contrast and readability. However, if you change a dashboard title, color, or icon, those changes take precedence over the default styling.

4. Buttons​

You can customize the buttons shown on the platform, tailoring their appearance to match your overall theme.

5. General Elements​

General elements such as form fields, dropdowns, loading indicators, and other UI components can be customized to maintain visual consistency across the application.