Customizing the designer component theme and colors in SpreadJS

The SpreadJS Designer Component provides a rich user interface that allows end users to design and manage spreadsheets visually. By default, the Designer UI uses a predefined color scheme (including green highlights). However, you may want to customize these colors to better match your application’s branding or theme.

This article explains how to customize the SpreadJS Designer Component theme and how to change the default green-colored UI elements to a different color by overriding the relevant CSS styles.

For general UI theme customization, SpreadJS provides built-in themes that can be explored and applied. You can refer to the Theme section on the SpreadJS Demo site to review available themes and styling options. These themes allow you to quickly change the overall look and feel of the Spread UI without modifying individual styles.

If your requirement is to customize specific UI elements beyond the available themes, you can do so by overriding the Designer Component’s CSS classes.

Below is an example that replaces the default green color with a custom blue color across various Designer UI elements such as the File menu, ribbon, list items, and status bar.

<style>
    .gc-file-menu-category {
        background-color: rgb(24, 116, 207);
    }

    .gc-file-menu-category .file-menu-category-list {
        background-color: rgb(24, 116, 207);
    }

    .gc-file-menu-category .file-menu-category-list .gc-designer-list-control {
        background-color: rgb(24, 116, 207);
    }

    .gc-file-menu-category 
    .file-menu-category-list 
    .gc-designer-list-control 
    .gc-list-control-item:hover {
        background-color: rgb(93, 148, 202);
    }

    .gc-file-menu-category 
    .file-menu-category-list 
    .gc-designer-list-control 
    .gc-list-control-item.gc-list-control-selected-item {
        background-color: rgb(9, 82, 155);
    }

    .file-menu-list 
    .gc-designer-list-control 
    .gc-list-control-item.gc-list-control-selected-item {
        background-color: rgb(9, 82, 155);
    }

    .gc-ribbon-bar .ribbon-navigation .fileButton {
        background-color: rgb(24, 116, 207);
    }

    .gc-statusbar {
        background-color: rgb(24, 116, 207);
    }
</style>