12.1.2 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-background: #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-background: #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

Main and General

Variable	Default Value	Scope
--primary-color	#007DC1	Buttons, links, highlights, icons.
--dark-primary-color	#004468	Hover on buttons, titles, and active tabs.
--light-primary-color	#CEE8F6	Hover on menus, dark-primary-color background.
--secondary-color	#4ECC64	-
--tertiary-color	#DA9963	-

Background Colors

Buttons

Texts

Secondary Styling Rules

Links and Menus

Variable	Default Value	Scope
--link-color	--primary-color	-
--link-color-h	#5DB4E2	-
--menu-selected-color	--dark-primary-color	Text and border color.
--menu-selected-bgcolor	--light-primary-color	Background color.

Tables

Extras

Logos

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.

Warning

These styles should be applied specifically alongside the class that defines the theme, to prevent unintended effects on other existing themes.