Customizing Theme Styles

Customization involves redefining the application’s color palette and replacing its images.

The following code is a complete example of the default Light theme. Many of its colors reference predefined CSS variables in RGB or RGBA format, which can be easily replaced. This example also shows the required CSS file structure for building a custom theme.

Below is the complete list of available variables, their default values, and usage examples.

.MyOwnTheme {
    --primary-color: #YourPrimary;
    --dark-primary-color: #DarkPrimary;
    --primary-bgcolor: #DBDBDB;
    --login-logo: url("<%=BASEURL%>__themes__/LoginLogo.png");
    --desktop-logo: url("<%=BASEURL%>__themes__/DesktopLogo.png");
    --mobile-logo: url("<%=BASEURL%>__themes__/LoginLogo.png");
}

.MyOwnDarkTheme {
    --primary-color: #YourPrimary;
    --dark-primary-color: #DarkPrimary;
    --primary-bgcolor: #000000;
    --login-logo: url("<%=BASEURL%>__themes__/LoginLogo-white.png");
    --desktop-logo: url("<%=BASEURL%>__themes__/DesktopLogo-white.png");
    --mobile-logo: url("<%=BASEURL%>__themes__/LoginLogo-white.png");
}

It is not necessary to redefine all variables. By default, the Light theme is applied; any definitions added will simply overwrite the redefined values. Redefining the values shown in the example above is enough to quickly change the appearance of the interface.

Core Theme Variables

Secondary Styling Rules

CSS Overrides

Even if certain elements are not defined among those configured through variables, Thinfinity Workspace allows new styles to be applied to other interface elements.