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:

A JSON configuration file that defines what and how to configure it.
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):

{
"filename": "C:\\Integrations\\Workspace\\custom\\assets\\customthemes.css",
"favicon": "myfavicon.ico",
"allowUsersToSwitchTheme": true,
"allowBuiltInThemes": true,
"themeOverriden": true,
"defaultTheme": "MyOwnTheme",
"lightMode": "MyOwnTheme",
"darkMode": "MyOwnDarkTheme",
"productName": "Product Name",
"themes": [
{
"class": "MyOwnTheme",
"name": "My Own Theme (light mode)"
},
{
"class": "MyOwnDarkTheme",
"name": "My Own Theme (dark mode)"
}
]
}

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.

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

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

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

Thinfinity Workspace 7: Personalize Your Workspace with Custom Themes

Theme customization API in Thinfinity® Workspace

Introduction

Customization Files

JSON Configuration File

Structure of the CSS Customization File

Conclusion

Related Articles

What's New on Thinfinity Remote Workspace 8

Real-Time License Usage Management via Licensing API

How to Upgrade from Previous Versions

How to Enable H264 in Thinfinity Workspace

How to Install and Configure Thinfinity Workspace in Agent Mode