Custom themes and color palettes

Applies to: Kyvos Enterprise Kyvos Cloud (SaaS on AWS) Kyvos AWS Marketplace

Kyvos Azure Marketplace Kyvos GCP Marketplace Kyvos Single Node Installation (Kyvos SNI)

Kyvos allows you to create your custom themes and also preserves the themes and chart color palettes while upgrading from one version to another.

Once the custom themes and color palettes are created, they are available for selection on the Dashboard and Worksheets. You can also create a custom theme for the portal and set the custom theme as a default theme.

To apply custom themes and color palettes, use the following files through the Kyvos Manager:

customWorksheetTheme.html: This file is used to create a custom theme.
customColorPalette.json: This file is used to create a color palette.
customPortalTheme.html: This file is used to create a custom theme for the Kyvos Web Portal.
portal.properties : This file is used to set the custom theme as a default theme for the portal.

Depending upon your access rights, you may need to contact your administrator to apply custom themes and color palettes.

Navigate to configuration files

To navigate to the configuration file, perform the following step.

On the Kyvos Manager, click Manage Kyvos > Configuration Files.
Here, expand Web Portal and navigate to the folder to download the file.
1. To create a custom theme and create a color palette, expand
  kyvos/jakarta/webapps/kyvos/client/themes/worksheet/
  folder.
  The customColorPalette.json and customWorksheetTheme.html files are displayed.
2. To create a theme for the portal,
  expand
  kyvos/jakarta/webapps/kyvos/client/themes/portal/
  folder. The customPortalTheme.html file is displayed.
3. To set a default theme for the portal, expand kyvos/jakarta/webapps/kyvos/client/config/ folder. The portal.properties file is displayed.
Download the default file.
Make the changes as explained in the sections below, and Upload the updated files.

Create a custom theme set for dashboards and worksheets

To create a custom theme set for dashboards and worksheets, perform the following steps.

Copy and paste commented style tag theme set (given in the code block below) and uncomment it.
Define the name of the theme in the name attribute.
Provide an id for the theme in the id attribute (it should be unique across themes).
Change the value of each property in the ".worksheet-custom-theme" class as per your theme requirements.
Remove unused properties from the ".worksheet-custom-theme" theme class.

Note

These are Kyvos-defined custom CSS properties to create worksheet themes.
Ensure each defined property should start with prefix "–".
Do not use any other custom properties.
The value of each custom property should be given in CSS standard formats.

 <style name="Custom theme 1" id="customTheme1">
    .worksheet-custom-theme {
        --font-size: 12px; /* to change font size of filter cards */
        --font-family: 'helvetica';

        --primary-font-color: #0a0a0a;
        --secondary-font-color: #4d526a;
        --icon-color:#707a82;
        --link-button-font-color:#0037FF;
        --border-color:#dedede;
        
        --table-header-font-color:#2E36A3;
        --table-header-background-color:#dcdbf9;
        --even-row-background-color:#ffffff;
        --odd-row-background-color:#F6F5FA;
        --total-value-cell-background-color:#FFECDB;
        --table-border-color:#8D8BDA;
        --table-background-color:#ffffff;

        --db-widget-header-font-color: #2E36A3;
        --db-widget-header-background-color: #dcdbf9;
        --db-widget-header-icon-color: #707a82;
        --db-widget-shadow-width: 2px;
        --db-widget-gap: 4px;

        --background-color: #ffffff; /* To change widget, popover, tooltip and sheet background */
        --surface-color: #efeef7; /* To change dashboard container background */
    }
</style>

Create a custom color palette for dashboards and worksheets

To create a custom color palette for dashboards and worksheets, perform the following steps.

Copy and paste the color palette JSON object within the palette object.
Define the unique key of the JSON object, and make the following changes:

- id: Set the same id which is used for the color palette object as a "key".
- name: Define the name of the color palette.
- type: "CONTINOUS" for gradient and "DISCRETE" for multiple colors.
- colors: Array of multiple colors.
- lightColors: Array of light colors.
- darkColors: Array of dark colors.
- swatchPerRow: Define the count of colors in a row for thumbnails.

Important

The colors property accepts only two colors for the CONTINOUS type.
The colors property accepts multiple colors for DISCRETE type.
Define lightColors and darkColors property only for DISCRETE type.
The array of lightColors and darkColors should be a light and dark version of the colors property.

{
    "palette": {
        "key1": {
            "id": "key1",
            "name": "paletteName",
            "type": "DISCRETE",
            "colors": [
                "#CA7638",
                "#D1A424",
                "#699D31",
                "#7BABB4"
            ],
            "lightColors": [
                "#fabe91",
                "#f1d176",
                "#a1c778",
                "#d1dfe2"
            ],
            "darkColors": [
                "#9e4808",
                "#9b7200",
                "#407506",
                "#347a87"
            ],

            "swatchPerRow": 4
        },
        "key2": {
            "id": "key2",
            "name": "paletteName",
            "type": "CONTINUOUS",
            "colors": [
                "#ffcc99",
                "#E68C0B"
            ]
        }
    }
}

Create a custom theme set for the Kyvos Web Portal

To create a custom theme set for the Kyvos Web Portal, perform the following steps.

Copy and paste commented style tag theme set (given in the code block below) and uncomment it.
Define the name of the theme in the name attribute.
Provide an id for the theme in the id attribute (it should be unique across themes).
Change the value of each property in the ".portal-custom-theme" class as per your theme requirements.
Remove unused properties from the ".portal-custom-theme" theme class.

Note

These are Kyvos-defined custom CSS properties to create Kyvos portal themes.
Ensure that each defined property should start with prefix "–".
Do not use any other custom properties.

<style name="Custom theme 1" id="customTheme1">
    .portal-custom-theme {
        --primary-font-color: rgb(10,10,10);
        --secondary-font-color: rgb(77,82,106);
        --surface-color: rgb(236, 239, 241);
        --background-color: rgb(255, 255, 255);
        --icon-color:rgb(112, 122, 130);
        --border-color: rgb(222, 222, 222);
        --theme: rgb(255, 171, 0);

        --primary-background-color:#ECEFF1;
        --secondary-button-background-color:#FFFFFF;
        --secondary-button-border-color:#3b3b3b;
        --selected-item-background-color:#dee2e6;
        --item-hover-background-color: #F5F5F5;
        --skeleton-loader-background-color:rgb(236, 239, 241);
        --app-header-background-color:#F6F7F8;
        --scroll-background-color:#F5F7F8;
        --scroll-thumb-background-color:#C6C8C8;
        --overlay-background-color:rgba(255,255,255,.8);

        --table-header-font-color:var(--primary-font-color);
        --table-header-background-color:#e4f0f7;
        --even-row-background-color:rgba(255, 255, 255, .1);
        --odd-row-background-color:#f0f5f5;
        --total-value-cell-background-color:#FFECDB;
        --table-border-color:#98B9C5;
        --table-background-color:var(--background-color);

        --link-button-font-color:#0036FA;

        color:var(--primary-font-color);
    }
</style>

Set the default theme for the Kyvos Web Portal

To set a default theme for the Kyvos Web Portal, perform the following steps.

Copy the name of the theme provided in the
customPortalTheme.html file.
Paste the id for the theme in the id attribute (it should be unique across themes).
Save the file and Upload it. The theme is set as a default theme. You can check the theme on Kyvos. See the Selecting a workspace theme section for more details.