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

Variable	Default Value	Scope
--hover-bgcolor	#F2F2F2	Profile hover, float menu, items hover.
--header-bgcolor	--primary-bgcolor	App header.
--toolbar-bgcolor	--tertiary-bgcolor	Toolbar.
--sidepanel-header-bgcolor	--header-bgcolor	Side Panel header.
--sidepanel-bgcolor	--secondary-bgcolor	Side Panel background color.
--menu-bgcolor	--secondary-bgcolor	Side menu.
--dialog-bgcolor	--secondary-bgcolor	-
--submenu-bgcolor	--tertiary-bgcolor	-
--light-mode-entity-bg	#5DB3E216	Profile background with custom icon. Replace light-mode with the appropriate theme class: --MyOwnTheme-entity-bg. This is a dynamic class and is built from the theme class that uses it
--bg-image	url("%=@BASEURL%>__themes__/BackgroundImg.png "	URL of the main panel background image. Replace BackgroundImg.png with the appropriate filename.
--bg-size	contain	Size of the background image: auto/contain/cover/inherit/initial/revert/unset.
--bg-blend-mode	none	Background image blend mode (See demo).

Buttons

Variable	Default Value	Scope
--button-bgcolor	--primary-color	Background color of the primary action button.
--button-txtcolor	#FFFFFF	Text color.
--button-bgcolor-h	--dark-primary-color	Background color on hover.
--button-txtcolor-h	#FFFFFF	Text color on hover.
--outline-button-color	--button-bgcolor	Text color and border of the secondary action button.
--outline-button-bgcolor-h	--button-bgcolor-h	Background color on hover.
--outline-button-color-h	--button-txtcolor-h	Text color on hover.
--special-button	#FFFFFF	-
--switcher-button	#ADADAD	-

Texts

Variable	Default Value	Scope
--primary-txtcolor	--bgcolor	Menu, general texts, Access Profile names.
--secondary-txtcolor	#ADADAD	Clearer texts, for example the icons that appear below the Access Profiles.
--heading-color	--dark-primary-color	Headers.
--border-color	#ADADAD	Borders.
--light-border-color	#C4C4C4	Lighter borders.
--separator	#B2B2B2	Separators.

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

Variable	Default Value	Scop
--table-header-bgcolor	--hover-bgcolor	Table header background color.
--table-body-bgcolor	--secondary-bgcolor	Table body background color.
--table-body-bgcolor-h	--tertiary-bgcolor	Background color of rows on hover.

Extras

Variable	Default Value	Description
--disabled	#ADADAD	Disabled buttons or texts.
--danger	#DC4847	Errors, Danger buttons.
--alert	#F17C1C	Warnings.
--allowed	#4ECC64	Success messages.
--shadow-color	#00000019	Shadows.

Logos

Variable	Default Value	Scope
--desktop-logo	url("<%=@BASEURL%>__themes_ _/YourLogo.svg ")	Replace YourLogo.svg with the name of the appropriate file. Remember that this file must be located in the folder defined for the .css file. It will be used in the product portal where the connections are displayed.
--mobile-logo	url("<%=@BASEURL%>_ _themes__/YourMobileLogo.svg ")	Logo used in the header in mobile and in the connections with the semi-folded side menu.
--login-logo	url("<%=@BASEURL%>__themes__/YourLogo.svg ")	Logo on the login box.
--logo-bg-size	contain	Logo size: auto/contain/cover/inherit/initial/revert/unset

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.