Theme JSON Configuration File

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

The JSON configuration file should have the following structure:

//Example with sample data

{
    "filename": "C:\\Integrations\\Workspace\\custom\\assets\\customthemes.css",
    "favicon": "myfavicon.ico",
    "allowUsersToSwitchTheme": true,
    "allowBuiltInThemes": 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	Description
`filename`	text	Full path to the .css file containing the style sheet. Place assets such as images, logos, backgrounds, and the favicon in the same folder. The name of this file is not important, as Thinfinity Workspace applies it as `__themes__/custom-theme.css`.
`allowUsersToSwitchTheme`	boolean	Specifies whether users can switch between the available themes. When set to `false`, the theme selector is disabled.
`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 (same as 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 System 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 System 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.
`default`	boolean	Only used when the file is an array of theme entries (see below). Marks this entry as the fallback theme, applied when no `tenant` or `domain` entry matches the current session. Not to be confused with `defaultTheme`, which names the default CSS class within a single theme entry.
`tenant`	text	Only used in the array form. Applies this theme entry to a specific tenant in multi-tenant deployments. The entry is selected when its value matches the tenant of the current user.
`domain`	text	Only used in the array form. Applies this theme entry when the host name used to access Thinfinity Workspace matches this value. Supports wildcard masks (for example, `*.example.com`).

Applying Different Themes per Tenant or Domain

Instead of a single object, custom-themes.json can contain an array of theme entries. This allows a single installation to serve a different theme depending on the tenant (in multi-tenant deployments) or the domain (host name) used to access the platform.

When the file is an array, Thinfinity Workspace selects the entry to apply as follows:

An entry whose tenant matches the current user’s tenant, or whose domain mask matches the access host name, is selected — a specific match takes precedence.
If no specific entry matches, the entry marked with "default": true is applied as a fallback.

Each entry accepts the same fields described in the table above, plus default, tenant, and domain.

//Example with per-tenant and per-domain themes

[
    {
        "default": true,
        "filename": "C:\\Integrations\\Workspace\\custom\\assets\\customthemes.css",
        "defaultTheme": "MyOwnTheme",
        "lightMode": "MyOwnTheme",
        "darkMode": "MyOwnDarkTheme",
        "themes": [
            { "class": "MyOwnTheme", "name": "My Own Theme (light mode)" },
            { "class": "MyOwnDarkTheme", "name": "My Own Theme (dark mode)" }
        ]
    },
    {
        "tenant": "acme",
        "filename": "C:\\Integrations\\Workspace\\acme\\acme.css",
        "defaultTheme": "AcmeTheme",
        "themes": [
            { "class": "AcmeTheme", "name": "Acme Corporate" }
        ]
    },
    {
        "domain": "*.contoso.com",
        "filename": "C:\\Integrations\\Workspace\\contoso\\contoso.css",
        "defaultTheme": "ContosoTheme",
        "themes": [
            { "class": "ContosoTheme", "name": "Contoso" }
        ]
    }
]