Thinfinity Workspace 7: Personalize Your Workspace with Custom Themes

New Theme Customization API in Thinfinity Workspace

Product: Thinfinity Workspace 
Version: 7 and later


The new Theme Customization API in Thinfinity Workspace version 7 allows users to personalize the visual style of the entire interface with options such as Light, Dark and Blue themes, as well as the ability to create fully customized themes, enabling "white labeling" of Workspace through configuration and use of CSS.

Out of the box, any user will be able to choose the color layout from these options:

Light: This is the default theme when the main theme of the operating system (or browser) is in light mode.

Dark : This is the complement to the light theme and the default theme when the operating system (or browser) is in dark mode.

Blue : This is an alternative to Dark mode. This mode must be selected from the Theme selector, although it can be configured by default or to replace the Dark theme if we choose Automatic.

Default Theme

The default theme is Automatic. Thinfinity Workspace detects the layout defined in Windows (Settings/Personalization/Colors) and uses its light or dark theme, depending on what is selected in the operating system.
However, there is a way to redefine the way all users see Thinfinity Workspace.
This functionality can be extended and used to implement "white labeling" of Workspace. This customization allows changes to be applied to
  • The product logo.
  • The favicon displayed in the browser bar/tab.
  • The palette of custom colors and styles to be applied to the interface.
It also allows you to define other topics, such as
  • Adding one or more themes to the list.
  • Which theme to apply by default.
  • Which theme to use when Automatic is selected (i.e., replacements for light and dark modes).
  • Whether the user can choose the theme.
  • Whether the user can use the predefined themes in Thinfinity Workspace .
All of this customization is based on a configuration file that defines what and how to configure it, and a CSS file based on an API of styles that are applied to each of the pages and sections of Thinfinity Workspace .

Customization Files

There are two files involved in the customization:
  1. A configuration file (JSON).
  2. A style file (CSS) with the definitions to be used.

The configuration is defined in the file custom-themes.json and should be placed in this path:
C:\ProgramData\Cybele Software\Thinfinity\Workspace\DB\custom-themes.json
This JSON file is the Configuration File, and it is structured as follows (shown using sample data)
  1. {
  2. "filename": "C:\\Program Files\\Thinfinity\\Workspace\\Custom\\customtheme.css",
  3. "allowUsersToSwitchTheme": true,
  4. "allowBuiltInThemes": true,
  5. "favicon": "favicon.ico",
  6. "defaultTheme": "MyOwnLightTheme",
  7. "lightMode": "MyOwnLightTheme",
  8. "darkMode": "MyOwnDarkTheme",
  9. "themes": [
  10. {
  11. "name": "My Own Theme",
  12. "class": "MyOwnLightTheme"
  13. },{
  14. "name": "My Own Dark Theme",
  15. "class": "MyOwnDarkTheme"
  16. }
  17. ]
  18. }



Use / meaning



Full path to the css file containing the style sheet. Assets such as images, logos, backgrounds, favicon, etc. should be placed in the same folder.The name given to this file is not important, as Thinfinity Workspace will then apply it as  __themes__/custom-theme.css.



Specifies whether the user is allowed to customize Thinfinity Workspace.



Specifies whether the predefined themes are enabled in Thinfinity Workspace.



Name of the favicon.ico file that replaces the Thinfinity Workspace favicon. This file should be in the same path as the custom css file (the one in the filename field).



Name of the CSS class representing the theme that will be applied by default.



Name of the CSS class that represents the light theme to be applied when Automatic is selected and the operating system is in light mode.



Name of the CSS class that represents the dark theme to be applied when Automatic is selected and the operating system is in dark mode.



Contains one or more themes to add to the list of available themes for the user to choose from. Each element contains the name to be included in the theme selector and the CSS class to be applied to the pages.The example above shows the two options added to the existing ones, which can be selected explicitly or by selecting Automatic and changing the OS style, since both classes are also defined as lightMode and darkMode.

Structure of the Customization CSS

Thinfinity Workspace "themes" take advantage of the existence of CSS variables that, when applied internally, define the appearance of the entire interface.
The customization of the interface is mainly based on the redefinition of these CSS variables (we detail them all below). To apply them to a theme, it is necessary to create a CSS class (its name must match the theme class shown in the JSON example above). Inside the curly brackets of the class, you need to add the variables you want to override with their replacement value.
One detail to note is that all theme classes must be loaded into a single css file.
In the example below, we show how the CSS file should look like to create two custom themes that only change some colors.

  1. .MyOwnLightTheme {  
  2.    --primary-color: #00b0b9;
  3.    --secondary-color: #000000;
  4.    --tertiary-color: #6d2077;
  5.     --dark-primary-color: #00464a;
  6.     --light-primary-color:#cceff1;
  7.     --login-logo: url("<%=@BASEURL%>__themes__/LoginLogoLight.png");
  8.     --desktop-logo: url("<%=@BASEURL%>__themes__/DesktopLogolight.png");
  9.     --mobile-logo: url("<%=@BASEURL%>__themes__/MobileLogoLight.png");
  10. }
  11. .MyOwnDarkTheme {
  12.      --primary-color: #ca212f;
  13.      --secondary-color: #000000;
  14.      --tertiary-color: #6d2077;
  15.      --dark-primary-color: #b63a3a;
  16.      --light-primary-color:#ffe8a7;
  17.      --login-logo: url("<%=@BASEURL%>__themes__/LoginLogoDark.png");
  18.      --desktop-logo: url("<%=@BASEURL%>__themes__/DesktopLogoDark.png");
  19.      --mobile-logo: url("<%=@BASEURL%>__themes__/MobileLogoDark.png");
  20. }

In this double example you can also see that the path to the images is special: this path is then replaced by Thinfinity Workspace and the files are searched for in the folder specified in the JSON file mentioned above.
As you can see in the example above, 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.


Default value:   #007DC1 

Buttons, links, highlights, icons.   

Default value:   #004468  
Hover on buttons, titles, active tabs. 

Default value:    #CEE8F6   

Hover on menus, dark-primary-color background. 

Default value:    #4ecc64  
Default value:    #da9963

Background Colors

Default value:   #DBDBDB 

Background of the main panel of all views. 


Default value:  #FFFFFF 

Profiles, pop ups, sidebars, table-body. 

Default value:    #F2F2F2

Toolbars  , Table-headers, table-footer, accordion-tabs, overlays, hover-rows. 


Default value:   #F2F2F2  

Profile hover, float menu items hover. 


Default value:  --primary-bgcolor  

App header. 


Default value:   --tertiary-bgcolor  



 Default value:   --header-bgcolor                           
 Default value:   --secondary-bgcolor                          
Default value:  --secondary-bgcolor  

Side menu. 


Default value:    --secondary-bgcolor 
  Default value:    --tertiary-bgcolor
  Default value:    --secondary-bgcolor 
Default value:   #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.


Default value:    url("<%=@BASEURL%>__themes__/BackgroundImg.png ") 

Url of the main panel background image. Replace "BackgroundImg.png" with the appropriate filename.
Default value:    contain
Size of the background image (auto / contain / cover / inherit / initial / revert / unset). 
Default value:   none


Default value:    --primary-color

Background color of the primary action button. 


 Default value:   #FFFFFF 

Text color. 

Default value:   --dark-primary-color 

Background color on hover.


Default value: #FFFFFF 

Text color on hover. 

Default value:    --button-bgcolor 

Text color and border of the secondary action button. 


Default value:   --button-bgcolor-h 

Background color on hover. 


Default value:   --button-txtcolor-h  
Text color on hover. 

Default value:   #FFFFFF 

Default value:    #ADADAD


Default value:   --primary-color                          
Default value:    #5db4e2 


Default value:    --dark-primary-color 
Text and border color. 


Default value:   --light-primary-color                           

Background color. 



Default value:    --bgcolor
Menu, general texts, profile names, etc. 

Default value:   #ADADAD  

Clearer texts, for example the icons that appear below in the profiles. 


Default value:   --dark-primary-color  




Default value:   #ADADAD 



Default value:   #C4C4C4  

Lighter borders. 

Default value:   #B2B2B2 




Default value:   --hover-bgcolor  

Table header background color. 
Default value:   --secondary-bgcolor  
Table body background color. 

Default value:  --tertiary-bgcolor  

Background color of rows on hover. 


Default value:   #FFFFFF 

Inputs background color 

  Default value:   --secondary-bgcolor 
 Default value:   #616161  

Text color inside input 

Default value:    --secondary-bgcolor
Input panel background color as selected 


Default value:    url("<%=@BASEURL%>__themes_ _/YourLogo.svg ")   

Replace "YourLogo.svg" with the name of the appropriate file. Remember that these files must be located in the folder defined for the .css file. It will be used in the product portal where the connections are displayed.
Default value:    url("<%=@BASEURL%>_ _themes__/YourMobileLogo.svg ")  

Logo used in the mobile header and in the connections with the semi-folded side menu.
Default value:    url("<%=@BASEURL%>__themes__/YourLogo.svg ") 

Logo on the login box. 
Default value:   contain  

Logo size. (auto / contain / cover / inherit / initial / revert / unset) 


-- light-mode -border-color 
Default value:   #ADADAD 
Graphics border color 
-- light-mode -text-color 
Default value:   #616161 
Graphics text color 
-- light-mode -grid-color 
Default value:   #DBDBDB 

Grid color in the graphics background 
-- light-mode -sessions-color 
Default value:   --secondary-color 
Default session color in secondary color 
-- light-mode -connections-color 
Default value:  --primary-color  

Default connections in primary color 


Default value:  #ADADAD

Disabled buttons or texts. 
Default value:  #DC4847

Errors, Danger buttons. 
Default value:   #F17C1C  

Default value:  #4ECC64 

Success messages. 

Default value:    #00000019 



Using the configuration file and CSS-based API, Thinfinity Workspace allows users to customize their experience with different themes, from default options to fully personalized interfaces, allowing for extensive visual customization of the product logo, favicon, color palette and styles, providing a more personalized and branded user experience.

If you have any further inquiries or need additional support, please do not hesitate to reach out to us . Our team is always available to help address any questions or concerns you may have.

    • Related Articles

    • What's New on Thinfinity Remote Workspace 7

      Introduction Welcome to our comprehensive guide to the Thinfinity® Workspace 7. This article will introduce you to the product's groundbreaking features, new connection protocols, and enhanced user experience. Thinfinity® Workspace 7 is the epitome ...
    • How to Upgrade from Previous Versions

      Doc Type: How-to Product: Thinfinity Workspace Version: 7 and above This document will guide you through the process of upgrading to Thinfinity Workspace 7 from previous versions. Key Factors to Consider Before Upgrading Profiles and user ...
    • How to create an RDP connection using Agent mode in Thinfinity Workspace

      Introduction This document will guide you through the process of configuring an RDP connection using Agent mode. The Workspace Agent provides a convenient solution for establishing Remote Desktop Protocol (RDP) connections without opening inbound ...
    • How to Install Thinfinity Workspace PWA on a Windows PC

      Product: Thinfinity Workspace Versions: 7 and later Introduction This guide is designed to easily walk you through the installation process of the Progressive Web App for Thinfinity Workspace 7. What is a PWA? A progressive web application (PWA) is a ...
    • How to Install and Configure IIS as a Reverse Proxy with Thinfinity Workspace/VirtualUI

      Product: Thinfinity Workspace/VirtualUI Version: 7 and later Introduction This guide will walk you through the step-by-step process of installing and configuring Microsoft Internet Information Services (IIS) as a powerful Reverse Proxy Server in ...