<div class="switcher box-color dark-white text-color" id="sw-theme">
  <a href ui-toggle-class="active" target="#sw-theme" class="box-color dark-white text-color sw-btn">
    <i class="fa fa-gear"></i>
  </a>
  <div class="box-header">
    <a href="https://themeforest.net/item/flatkit-app-ui-kit/13231484?ref=flatfull" class="btn btn-xs rounded danger pull-right">BUY</a>
    <h2>Theme Switcher</h2>
  </div>
  <div class="box-divider"></div>
  <div class="box-body">
    <p id="settingLayout" class="hidden-md-down">
      <label class="md-check m-y-xs">
        <input type="checkbox" ng-model="app.setting.folded">
        <i class="green"></i>
        <span class="hidden-folded">Folded Aside</span>
      </label>
      <label class="md-check m-y-xs">
        <input type="checkbox" ng-model="app.setting.boxed">
        <i class="green"></i>
        <span class="hidden-folded">Boxed Layout</span>
      </label>
      <label class="m-y-xs pointer" ui-fullscreen>
        <span class="fa fa-expand fa-fw m-r-xs"></span>
        <span>Fullscreen Mode</span>
      </label>
    </p>
    <p>Colors:</p>
    <p id="settingColor">
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'primary', accent:'accent', warn:'warn'}});">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="1">
        <i class="primary"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'accent', accent:'cyan', warn:'warn'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="2">
        <i class="accent"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'warn', accent:'light-blue', warn:'warning'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="3">
        <i class="warn"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'success', accent:'teal', warn:'lime'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="4">
        <i class="success"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'info', accent:'light-blue', warn:'success'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="5">
        <i class="info"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'blue', accent:'indigo', warn:'primary'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="6">
        <i class="blue"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'warning', accent:'grey-100', warn:'success'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="7">
        <i class="warning"></i>
      </label>
      <label class="radio radio-inline m-0 ui-check ui-check-color ui-check-md" ng-click="setTheme({theme:{primary:'danger', accent:'grey-100', warn:'grey-300'}})">
        <input type="radio" name="color" ng-model="app.setting.themeID" value="8">
        <i class="danger"></i>
      </label>
    </p>
    <p>Themes:</p>
    <div class="row no-gutter text-u-c text-center _600 clearfix">
      <a href class="p-a col-sm-6 light" ng-click="app.setting.bg=''">Light</a>
      <a href class="p-a col-sm-6 grey" ng-click="app.setting.bg='grey'"><span class="text-white">Grey</span></a>
      <a href class="p-a col-sm-6 dark" ng-click="app.setting.bg='dark'"><span class="text-white">Dark</span></a>
      <a href class="p-a col-sm-6 black" ng-click="app.setting.bg='black'"><span class="text-white">Black</span></a>
    </div>
  </div>
</div>

<div class="switcher box-color black lt" id="sw-demo">
  <a href ui-toggle-class="active" target="#sw-demo" class="box-color black lt text-color sw-btn">
    <i class="fa fa-list text-white"></i>
  </a>
  <div class="box-header">
    <h2>Demos</h2>
  </div>
  <div class="box-divider"></div>
  <div class="box-body">
    <div class="row no-gutter text-u-c text-center _600 clearfix">
      <a ng-click="setTheme({theme:{primary:'primary', accent:'accent', warn:'warn'}, url: '?'});" 
        class="p-a col-sm-6 primary">
        <span class="text-white">Default</span>
      </a>
      <a ng-click="setTheme({theme:{primary:'success', accent:'teal', warn:'lime'}, url: '?layout=0'})" 
        class="p-a col-sm-6 success">
        <span class="text-white">Zero</span>
      </a>
      <a ng-click="setTheme({theme:{primary:'blue', accent:'indigo', warn:'primary'}, url: '?layout=1'})" 
        class="p-a col-sm-6 blue">
        <span class="text-white">One</span>
      </a>
      <a ng-click="setTheme({theme:{primary:'warn', accent:'grey-100', warn:'success'}, url: '?layout=2'})" 
        class="p-a col-sm-6 warn">
        <span class="text-white">Two</span>
      </a>
      <a ng-click="setTheme({theme:{primary:'danger', accent:'grey-100', warn:'grey-300'}, url: '?layout=3'})"
        class="p-a col-sm-6 danger">
        <span class="text-white">Three</span>
      </a>
      <a ng-click="setTheme({theme:{primary:'success', accent:'teal', warn:'grey-100'}, url: '?layout=4'})"
        class="p-a col-sm-6 green">
        <span class="text-white">Four</span>
      </a>
      <a ng-click="setTheme({theme:{primary:'blue', accent:'info', warn:'success'}, url: '?layout=5'})"
        class="p-a col-sm-6 info">
        <span class="text-white">Five</span>
      </a>
      <div 
        class="p-a col-xs-6 lter">
        <span class="text">...</span>
      </div>
    </div>
  </div>
</div>
