修改主题样式

问题：如何修改主题的样式？

背景：

SpreadJS提供通过使用不同css的方式切换风格，例如下图为Excel 2013的风格，主体为白色，选中文字为绿色，状态栏为绿色。

有用户觉得绿色的状态栏有些突兀，希望使用excel2016colorful中白色的状态栏样式。

实现方式：

只需要将excel2016colorful中关于statusBar的样式复制出来即可：

<style>
    /* status bar start */
    .gc-statusbar {
        width: 100%;
        height: 100%;
        background: #F3F2F1;
        font-size: 8pt;
        color: #505050;
        font-family: "Segoe UI", Calibri, Thonburi, Arial, Verdana, sans-serif, "Mongolian Baiti", "Microsoft Yi Baiti", "Javanese Text";
        position: relative;
        user-select: none;
        cursor: default;
        overflow: hidden;
    }

    .gc-statusbar-menu-host {
        position: relative;
    }

    .gc-statusbar-statusitem-container {
        width: auto;
        height: 100%;
    }

    .gc-statusbar-zoom-panel {
        width: 30px;
        height: 100%;
        cursor: default;
        font-size: 8pt;
        color: #505050;
        display: inline-block;
    }

    .gc-statusbar-slider-btn-container {
        display: inline-block;
        vertical-align: middle;
        margin-right: 3px;
    }

    .gc-statusbar-slider-btn-container:hover {
        background-color: #bbb5b5;
    }

    .gc-statusbar-slider-btn-container:active {
        background-color: #a1a0a0;
    }

    .gc-statusbar-slider-btn {
        width: 16px;
        height: 25px;
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik04NjMuNzQ1IDU0NGgtNzAwLjMyYy0xNy42NjYgMC0zMi4wMDItMTQuMzM1LTMyLjAwMi0zMnMxNC4zMzYtMzIgMzIuMDAxLTMyaDcwMC4zMmMxNy42OTYgMCAzMiAxNC4zMzUgMzIgMzJzLTE0LjMwNCAzMi0zMiAzMnoiLz48L3N2Zz4=);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .gc-statusbar-slider-add-btn-container {
        display: inline-block;
        vertical-align: top;
    }

    .gc-statusbar-slider-add-btn-container:hover {
        background-color: #bbb5b5;
    }

    .gc-statusbar-slider-add-btn-container:active {
        background-color: #a1a0a0;
    }

    .gc-statusbar-slider-add-btn {
        width: 16px;
        height: 25px;
        background-image: url(data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxkZWZzPjxzdHlsZS8+PC9kZWZzPjxwYXRoIGQ9Ik04NjMuMzI4IDQ4MS4zNGwtMzE3LjM0NC4xVjE2Mi44MThjMC0xNy42NjUtMTQuMzM2LTMyLjAwMS0zMi0zMi4wMDFzLTMyIDE0LjMzNi0zMiAzMnYzMTguNDAxbC0zMjIuMzY4LS4xNzdoLS4wOTdjLTE3LjYzMiAwLTMxLjkzNSAxNC4yNC0zMiAzMS45MDQtLjA5NyAxNy42NjUgMTQuMjA4IDMyLjAzMiAzMS44NzEgMzIuMDk2bDMyMi41OTMuMTc3djMxOS4xNjdjMCAxNy42OTYgMTQuMzM2IDMyLjAwMSAzMS45OTkgMzIuMDAxczMyLTE0LjMwMyAzMi0zMlY1NDUuNDRsMzE3LjA4OC0uMWguMTI4YzE3LjYzMiAwIDMxLjkzNS0xNC4yNCAzMi0zMS45MDVzLTE0LjIzOC0zMi4wMzEtMzEuODctMzIuMDk1eiIvPjwvc3ZnPg==);
        background-size: 16px 16px;
        background-repeat: no-repeat;
        background-position: center;
    }

    .gc-statusbar-slider-back-progress {
        width: 120px;
        height: 1px;
        background: #505050;
        display: inline-block;
        vertical-align: top;
    }

    .gc-statusbar-slider-back {
        display: inline-block;
    }

    .gc-statusbar-slider-middle-line {
        width: 1px;
        height: 8px;
        background: #505050;
        display: inline-block;
        position: relative;
        vertical-align: top;
        top: 9px;
    }

    .gc-statusbar-slider-drag-bar {
        width: 4px;
        height: 10px;
        background: #505050;
        display: inline-block;
        position: relative;
        vertical-align: top;
        top: 8px;
    }

    .gc-statusbar-contextmenu-check {
        width: 6px;
        height: 10px;
        margin: 0 0 0 5px;
        border-style: solid;
        border-color: #222222;
        border-width: 0 2px 2px 0;
        transform: rotateZ(45deg);
        content: "";
    }

    .gc-statusbar-contextmenu-check-container {
        width: 12px;
        height: 12px;
        display: inline-block;
    }

    .gc-statusbar-contextmenu-content {
        display: inline-block;
        color: #444444;
        margin: 0 5px 0 15px;
    }

    .gc-statusbar-contextmenu-status {
        float: right;
        color: #444444;
        vertical-align: middle;
    }
</style>

作者: Dexter.Yao | 审核：Lynn.Dou | 更新时间：2023.11.26