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

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 given to 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 Workspace.

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.


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.

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