Thinfinity Workspace 7: Personalize Your Workspace with Custom Themes

Theme customization API in Thinfinity® Workspace

Product: Thinfinity Workspace                
Version: 7 and later

Introduction


The theme customization API in Thinfinity Workspace allows users to personalize the visual style of the entire interface.  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 how all users see Thinfinity Workspace.

This functionality can be extended and used to implement white labeling in Thinfinity 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:\\Integrations\\Workspace\\custom\\assets\\customthemes.css",
  3. "favicon": "myfavicon.ico",
  4. "allowUsersToSwitchTheme": true,
  5. "allowBuiltInThemes": true,  
  6. "themeOverriden": true,
  7. "defaultTheme": "MyOwnTheme",
  8. "lightMode": "MyOwnTheme",
  9. "darkMode": "MyOwnDarkTheme",
  10. "productName": "Product Name",
  11. "themes": [
  12. {
  13. "class": "MyOwnTheme",
  14. "name": "My Own Theme (light mode)"
  15. },
  16. {
  17. "class": "MyOwnDarkTheme",
  18. "name": "My Own Theme (dark mode)"
  19. }
  20. ]
  21. }


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

productName
text
Text to show in the browser title bar, or as tab window content, when the user opens multiple web pages in a single window. 

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 CSS Customization File 

There is a default main theme (the one used for Light mode) that applies to all components of Thinfinity Workspace interface. The basic idea of customization is to redefine the color palette of the application and if necessary, the replacements for the images. However, given the nature of CSS, other classes can be easily overwritten if desired.
 
Below you will find a complete example of the theme for the Light mode, which will be used as the default. As you will see, many of the colors refer to other predefined CSS variables, which are just colors in RGB and/or RGBA format that can be easily replaced.
 
The sample code below shows the structure of the CSS file that will be used to build the custom theme. Following is the complete list of variables that can be used within the CSS file, with the default values for each and examples of use.

  1. .MyOwnTheme {
  2. --primary-color: #YourPrimary;
  3. --dark-primary-color: #DarkPrimary;
  4. --primary-background: #DBDBDB;
  5. --login-logo: url("<%=BASEURL%>__themes__/LoginLogo.png");
  6. --desktop-logo: url("<%=BASEURL%>__themes__/DesktopLogo.png");
  7. --mobile-logo: url("<%=BASEURL%>__themes__/LoginLogo.png");
  8. }
  9. .MyOwnDarkTheme {
  10. --primary-color: #YourPrimary;
  11. --dark-primary-color: #DarkPrimary;
  12. --primary-background: #000000;
  13. --login-logo: url("<%=BASEURL%>__themes__/LoginLogo-white.png");
  14. --desktop-logo: url("<%=BASEURL%>__themes__/DesktopLogo-white.png");
  15. --mobile-logo: url("<%=BASEURL%>__themes__/LoginLogo-white.png");
  16. }

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


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. 
 

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
#00000019
 
Shadows.

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 header in mobile 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) 

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 ...
    • Real-Time License Usage Management via Licensing API

      Introduction This document provides an overview of how to utilize the Licensing API to monitor and manage license usage effectively. By leveraging this API, administrators can retrieve real-time data on the number of active users and enforce user ...
    • 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 Enable H264 in Thinfinity Workspace

      Product: Thinfinity Workspace Version: 7 and later Introduction H264 is the most widely used format for efficiently capturing, compressing, and distributing high-quality video content. As such, Thinfinity Workspace must work with H264 to provide a ...
    • How to Install and Configure Thinfinity Workspace in Agent Mode

      Product: Thinfinity Workspace Version: 7 and later Introduction This document will guide you through the process of installing and configuring Thinfinity Workspace in Agent mode. The Workspace Agent provides a convenient solution for establishing ...