主题配色及保存

顶部导航，logo和侧边栏菜单三个位置都可以调整背景颜色，其中普通版本还可以切换成半透明和暗黑两种整体的配色。

v3的两个项目中，只是采用js设置当前选中的配置，并没有做保存，v4的版本已经做了cookie存储，这里针对的v3的两个项目，你也可以直接参考v4项目中的写法。

设置的js在`main.min.js`中 line 137 - line 146，iframe版本在`index.min.js`的 line 72 - line 80。如下：
```javascript
	// 设置主题配色
	setTheme = function(input_name, data_name) {
	    $("input[name='"+input_name+"']").click(function(){
	        $('body').attr(data_name, $(this).val());
	    });
	}
	setTheme('site_theme', 'data-theme');
	setTheme('logo_bg', 'data-logobg');
	setTheme('header_bg', 'data-headerbg');
	setTheme('sidebar_bg', 'data-sidebarbg');
	
    /* ---- iframe版本 ---- */
    // 设置主题配色
	setTheme = function(input_name, data_name) {
	    $("input[name='"+input_name+"']").click(function(){
	        $('body').attr(data_name, $(this).val());
	    });
	}
	setTheme('logo_bg', 'data-logobg');
	setTheme('header_bg', 'data-headerbg');
	setTheme('sidebar_bg', 'data-sidebarbg');
```
主题配置并没有做保存，大家根据自己实际情况，做cookie存储或者其他方式。这里说下采用cookie存储，先引入 `jquery.cookie.min.js`，[下载该js文件](https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js "下载js文件")。

在项目页面中引入:
```html
<script type="text/javascript" src="js/jquery.cookie.min.js"></script>
```
对设置主题配置的js做些修改。
```javascript
	// 读取cookie中的主题设置
	var the_logo_bg    = $.cookie('the_logo_bg'),
	    the_header_bg  = $.cookie('the_header_bg'),
	    the_sidebar_bg = $.cookie('the_sidebar_bg'),
	    the_site_theme = $.cookie('the_site_theme'); // iframe版中不需要这个
	
	if (the_logo_bg) $('body').attr('data-logobg', the_logo_bg);
	if (the_header_bg) $('body').attr('data-headerbg', the_header_bg);
	if (the_sidebar_bg) $('body').attr('data-sidebarbg', the_sidebar_bg);
	if (the_site_theme) $('body').attr('data-theme', the_site_theme);  // iframe版中不需要这个
	
	// 处理主题配色下拉选中
    $(".dropdown-skin :radio").each(function(){
        var $this = $(this),
            radioName = $this.attr('name');
        switch (radioName) {
            case 'site_theme':
                $this.val() == the_site_theme && $this.prop("checked", true);
                break;  // iframe版中不需要这个case
            case 'logo_bg':
                $this.val() == the_logo_bg && $this.prop("checked", true);
                break;
            case 'header_bg':
                $this.val() == the_header_bg && $this.prop("checked", true);
                break;
            case 'sidebar_bg':
                $this.val() == the_sidebar_bg && $this.prop("checked", true);
        }
    });
	
	// 设置主题配色
	setTheme = function(input_name, data_name) {
	    $("input[name='"+input_name+"']").click(function(){
	        $('body').attr(data_name, $(this).val());
	        $.cookie('the_'+input_name, $(this).val());
	    });
	}
	setTheme('site_theme', 'data-theme');  // iframe版中不需要这个
	setTheme('logo_bg', 'data-logobg');
	setTheme('header_bg', 'data-headerbg');
	setTheme('sidebar_bg', 'data-sidebarbg');
```
以上就是用js处理主题配色保存的方法，你也可以只用js存储，用程序来读取cookie中存储的内容。