Thinfinity Workspace 7: Personalize Your Workspace with Custom Themes

New Theme customization API in Thinfinity® Workspace

Product: Thinfinity Workspace                
Version: 7 and later

Introduction


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 how all users see Thinfinity Workspace.

This functionality can be extended and used to implement white labeling in 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 perform several other actions, such as:
  • Adding one or more themes to the list.
  • Selecting a default theme.
  • Selecting a theme to be used when Automatic is selected (i.e., replacements for Light and Dark modes).
  • Deciding whether the user can choose the theme.
  • Deciding whether the user can use the predefined themes in Thinfinity Workspace.

Customization files

The customization is accomplished using a set of two files:
  1. A JSON configuration file that defines what and how to configure it.
  2. A CSS file based on an API of styles that are applied to each of the pages and sections of Thinfinity Workspace.

JSON configuration file

The configuration is defined in the custom-themes.json file which should be saved in the following location: C:\ProgramData\Cybele Software\Thinfinity\Workspace\DB\custom-themes.json.

The JSON configuration file should have the following structure (sample data is shown in the example below):
  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.                           {
  15.                                     "name": "My Own Dark Theme",
  16.                                     "class": "MyOwnDarkTheme"
  17.                            }
  18. ]

Field

Type

Use / meaning

filename

text

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 of this file is not important, as Thinfinity Workspace will then apply it as themes__/custom-theme.css.

allowUsersToSwitchTheme

boolean

Specifies whether the user is allowed to customize Thinfinity Worskapce.

allowBuiltInThemes

boolean

Specifies whether the predefined themes are enabled in Thinfinity Workspace.

favicon

text

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).

defaultTheme

text

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

lightMode

text

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.

darkMode

text

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.

themes

array

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.


CSS customization file

Thinfinity Workspace "themes" take advantage of the existence of CSS variables that, when applied internally, define the appearance of the entire interface.

The interface customization is done mainly by redefining the CSS variables (for details, keep reading). To apply these customized variables 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.

Alert
IMPORTANT! All theme classes must be loaded into a single CSS file.

The example below shows a CSS file that can be used 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 the sample CSS above, you can 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.
Notes
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.

Main

Variable  
Use
--primary-color 
Default value:   #007DC1 

Buttons, links, highlights, icons.   


--dark-primary-color 
Default value:   #004468  
 
Hover on buttons, titles, active tabs. 




                               
                                
--light-primary-color 
Default value:    #CEE8F6   

Hover on menus, dark-primary-color background. 


 
 
 
--secondary-color 
Default value:    #4ecc64  
 
--tertiary-color 
Default value:    #da9963
 

Background colors

Variable  
Use
--primary-bgcolor 
Default value:   #DBDBDB 

Background of the main panel of all views. 

 

--secondary-bgcolor 
Default value:  #FFFFFF 

Profiles, pop ups, sidebars, table-body. 


 
--tertiary-bgcolor 
Default value:    #F2F2F2

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

 

--hover-bgcolor 
Default value:   #F2F2F2  

Profile hover, float menu, items hover. 

 

--header-bgcolor 
Default value:  --primary-bgcolor  

App header. 

 

--toolbar-bgcolor 
Default value:   --tertiary-bgcolor  

Toolbar. 

 

--sidepanel-header-bgcolor 
Default value:   --header-bgcolor                           
 
--sidepanel-bgcolor 
Default value:   --secondary-bgcolor                          
 
--menu-bgcolor 
Default value:  --secondary-bgcolor  

Side menu. 

 

--dialog-bgcolor 
Default value:    --secondary-bgcolor 
 
--submenu-bgcolor 
Default value:    --tertiary-bgcolor
 
--graf-bgcolor 
Default value:    --secondary-bgcolor 
 
--light-mode-entity-bg 
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.

 

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

URL of the main panel background image. Replace "BackgroundImg.png" with the appropriate filename.
 
--bg-size 
Default value:    contain
 
Size of the background image (auto / contain / cover / inherit / initial / revert / unset). 
 
--bg-blend-mode 
Default value:   none
 
Background image blend mode (Use demo https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode). 
 

Buttons

Variable  
Use
--button-bgcolor 
Default value:    --primary-color

Background color of the primary action button. 

 

--button-txtcolor 
Default value:   #FFFFFF 

Text color. 

--button-bgcolor-h 
Default value:   --dark-primary-color 

Background color on hover.

 

--button-txtcolor-h 
Default value: #FFFFFF 

Text color on hover. 

--outline-button-color 
Default value:    --button-bgcolor 

Text color and border of the secondary action button. 

 

--outline-button-bgcolor-h 
Default value:   --button-bgcolor-h 

Background color on hover. 

 

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

--special-button 
Default value:   #FFFFFF 

 
--switcher-button 
Default value:    #ADADAD

 

Links / Menu

Variable  
Use
--link-color 
Default value:   --primary-color                          
 
--link-color-h 
Default value:    #5db4e2 

 

--menu-selected-color 
Default value:    --dark-primary-color 

Text and border color. 

 

 
 
 
--menu-selected-bgcolor 
Default value:   --light-primary-color                           

Background color. 

 

Texts

Variable  
Use
--primary-txtcolor 
Default value:    --bgcolor

Menu, general texts, profile names, etc. 

 
--secondary-txtcolor 
Default value:   #ADADAD  

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

 

--heading-color 
Default value:   --dark-primary-color  

Headers. 

 

Borders

Variable  
Use
--border-color 
Default value:   #ADADAD 

Borders. 

 

--light-border-color 
Default value:   #C4C4C4  

Lighter borders. 

 
--separator 
Default value:   #B2B2B2 

Separators. 

 

Tables

Variable  
Use
--table-header-bgcolor 
Default value:   --hover-bgcolor  

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

--table-body-bgcolor-h 
Default value:  --tertiary-bgcolor  

Background color of rows on hover. 
 

Inputs

Variable  
Use
--input-bgcolor 
Default value:   #FFFFFF 

Inputs background color.                               

--header-input-bgcolor 
Default value:   --secondary-bgcolor 
 
--input-txtcolor 
Default value:   #616161  

Text color inside input.                               

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

Logos

Variable  
Use
--desktop-logo 
Default value:    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 
Default value:    url("<%=@BASEURL%>_ _themes__/YourMobileLogo.svg ")  

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

Logo on the login box. 
 
--logo-bg-size 
Default value:   contain  

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

Analytics

Variable  
Use
--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.                               
 

Extras

Variable  
Use
--disabled 
Default value:  #ADADAD

Disabled buttons or texts. 
 
--danger 
Default value:  #DC4847

Errors, Danger buttons. 
--alert 
Default value:   #F17C1C  
 
Warnings.   

--allowed 
Default value:  #4ECC64 

Success messages. 

--shadow-color 
Default value:    #00000019 

Shadows. 


Conclusion

Using the JSON 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 8

      Introduction Welcome to our comprehensive guide to the Thinfinity® Workspace 8. This article will introduce you to the product's groundbreaking features, new connection protocols, and enhanced user experience. Thinfinity Workspace 8 is the epitome of ...

    • How to Upgrade from Previous Versions

      Introduction We are excited to introduce Thinfinity® Workspace 8, the latest version of our remote access solution that offers a more user-friendly and feature-rich experience than ever before. This upgrade comes with a redesigned UX, user analytics ...

    • 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 ...

    • Remote Desktop session recording with Thinfinity® Workspace

      Introduction Imagine effortlessly reviewing remote sessions or guiding users through an application—Thinfinity Workspace turns this into a reality with session recording and playback features. Activate this capability in the Advanced tab within your ...

    • How to install Thinfinity® Workspace PWA on a Windows PC

      Introduction This article will guide you through the installation process of Thinfinity's PWA from a compatible web browser. All browsers share a relatively similar installation process; in this article, we will focus on Chrome, Edge, and Brave. What ...