Hyper V3.3.0 主题添加本地设置和刷新读取本地主题配置

入正后发现官方的这个版本主题是不保存配置了，相对于以前的版本，这次改了好多东西，很多之前的css错位，无奈只能慢慢找方法。

本教程只适合购买正版的用户，因为app.js没有被压缩

存储主题配置

默认都是存储在本地存储的，key值为_HYPER_CONFIG_；所以只能自己去找对应的方法了，然后发现有一段代码：

/**
    * Preserves the config
    */
        LayoutThemeApp.prototype._saveConfig = function (newConfig) {
            $.extend(this._config, newConfig);
            // sessionStorage.setItem('_HYPER_CONFIG_', JSON.stringify(this._config));
        },

如果不出问题，这个就是我们需要设置，它是保存主题设置到本地存储的，官方默认用sessionStorage，显然这里我们要改为localStorage更实用一些。

这段代码在右侧栏的按钮了经常使用到，但是由于官方默认注销了保存的方法代码，所以导致主题的配置文件无法保存至本地，所以我们改为如下：

/**
    * Preserves the config
    */
        LayoutThemeApp.prototype._saveConfig = function (newConfig) {
            $.extend(this._config, newConfig);
            localStorage.setItem('_HYPER_CONFIG_', JSON.stringify(this._config));
        },

这样主题本地保存配置成功。

本地主题配置读取

读取的话要在页面加载时读取，所以找到以下代码：

/**
             * Get the stored config
             */
            LayoutThemeApp.prototype._getStoredConfig = function () {
                var bodyConfig = this.body.data('layoutConfig');
                var config = DEFAULT_CONFIG;
                if (bodyConfig) {
                    config['sideBarTheme'] = bodyConfig['leftSideBarTheme'];
                    config['isBoxed'] = bodyConfig['layoutBoxed'];
                    config['isCondensed'] = bodyConfig['leftSidebarCondensed'];
                    config['isScrollable'] = bodyConfig['leftSidebarScrollable'];
                    config['isDarkModeEnabled'] = bodyConfig['darkMode'];
                }
                return config;
            },

这段代码就在上一个代码的下面，我特么找了半天，最后发现就跟在后面，顿时感觉我找了半个小时好委屈。

由于官方没有写获取本地主题设置的方法，所以这里我们要自己写一下，很简单，照抄我的就行了。

/**
             * Get the stored config
             */
            LayoutThemeApp.prototype._getStoredConfig = function () {
                var bodyConfig = this.body.data('layoutConfig');
                var config = DEFAULT_CONFIG;
                var localConfig = window.localStorage.getItem("_HYPER_CONFIG_");
                //本地存储读取
                if (localConfig) {
                    var data = JSON.parse(localConfig);
                    config['sideBarTheme'] = data['sideBarTheme'];
                    config['isBoxed'] = data['isBoxed'];
                    config['isCondensed'] = data['isCondensed'];
                    config['isScrollable'] = data['isScrollable'];
                    config['isDarkModeEnabled'] = data['isDarkModeEnabled'];
                };
                //body元素配置
                if (bodyConfig) {
                    config['sideBarTheme'] = bodyConfig['leftSideBarTheme'];
                    config['isBoxed'] = bodyConfig['layoutBoxed'];
                    config['isCondensed'] = bodyConfig['leftSidebarCondensed'];
                    config['isScrollable'] = bodyConfig['leftSidebarScrollable'];
                    config['isDarkModeEnabled'] = bodyConfig['darkMode'];
                }
                return config;
            },

保存后，主题保存到本地，并且可以在刷新时读取主题设置。