
<!-- 主题设置模板 -->

<script type="text/html" template lay-done="layui.data.theme();">
  {{# 
    var local = layui.data(layui.setter.tableName)
    ,theme = local.theme || {}
    ,themeColorIndex =  parseInt((theme && theme.color) ? theme.color.index : 0) || 0;
  }}

  <div class="layui-card-header">
    配色方案
  </div>
  <div class="layui-card-body layadmin-setTheme">
    <ul class="layadmin-setTheme-color">
      {{# layui.each(layui.setter.theme.color, function(index, item){ }}
        <li layadmin-event="setTheme" data-index="{{ index }}" data-alias="{{ item.alias }}" 
        {{ index === themeColorIndex ? 'class="layui-this"' : '' }} title="{{ item.alias }}">
          <div class="layadmin-setTheme-header" style="background-color: {{ item.header }};"></div>
          <div class="layadmin-setTheme-side" style="background-color: {{ item.main }};">
            <div class="layadmin-setTheme-logo" style="background-color: {{ item.logo }};"></div>
          </div>
        </li>
      {{# }); }}
      <div class="layui-card-header">
        UI 主题
      </div>
      <li class="bootswatch-btn" data-theme="default">Default</li>

      <li class="bootswatch-btn" data-theme="cerulean">Cerulean</li>
      <li class="bootswatch-btn" data-theme="cosmo">Cosmo</li>
      <li class="bootswatch-btn" data-theme="cyborg">Cyborg</li>
      <li class="bootswatch-btn" data-theme="darkly">Darkly</li>
      <li class="bootswatch-btn" data-theme="flatly">Flatly</li>
      <li class="bootswatch-btn" data-theme="journal">Journal</li>
      <li class="bootswatch-btn" data-theme="lumen">Lumen</li>
      <li class="bootswatch-btn" data-theme="paper">Paper</li>
      <li class="bootswatch-btn" data-theme="readable">Readable</li>
      <li class="bootswatch-btn" data-theme="sandstone">Sandstone</li>
      <li class="bootswatch-btn" data-theme="simplex">Simplex</li>
      <li class="bootswatch-btn" data-theme="slate">Slate</li>
      <li class="bootswatch-btn" data-theme="spacelab">Spacelab</li>
      <li class="bootswatch-btn" data-theme="superhero">Superhero</li>
      <li class="bootswatch-btn" data-theme="united">United</li>
      <li class="bootswatch-btn" data-theme="yeti">Yeti</li>
    </ul>
  </div>
</script>

<script>
layui.data.theme = function(){
  layui.use('form', function(){
    var form = layui.form
    ,admin = layui.admin;
    
    //监听隐藏开关
    form.on('switch(system-theme-sideicon)', function(){
      admin.theme({
        hideSideIcon: this.checked
      })
    });
  });
};
</script>
