自定义主题样式
使用自定义主题样式需要先载入JS文件：
<script src="/static/auicss/script/aui-skin.js"></script>
使用之前需要先实例化对象 var skin = new auiSkin(options);，options参数如下：
options: {
name: '', // 主题名称
skinPath: '', // 主题CSS文件路径
default: false, // 是否立即启用，为false时需要手动切换
beginTime: '', // 开始时间，时:分（19:00）default为true生效
endTime: '', // 结束时间，时:分（22:00）default为true生效
}实例方法：
setSkin：手动设置主题removeSkin：手动移除主题
示例源码
<div class="aui-content-padded">
<p>AUI 2.1新增了主题皮肤样式，开发者可以通过修改相关属性来自定义主题样式，该演示为测试演示，修改效果并不完全。</p>
</div>
<div class="aui-content-padded">
<div class="aui-btn" tapmode onclick="setSkin()">设置主题</div>
<div class="aui-btn aui-btn-info" tapmode onclick="removeSkin()">移除主题</div>
</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list">
<li class="aui-list-header">
简单的列表布局
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
Item1
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
Item2
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">Item3</div>
</div>
</li>
</ul>
</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list">
<li class="aui-list-header">
带有右侧箭头
</li>
<li class="aui-list-item aui-list-item-middle">
<div class="aui-list-item-inner aui-list-item-arrow">
Item1
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
Item2
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
Item3
</div>
</li>
</ul>
</div>
<div class="aui-content aui-margin-b-15">
<ul class="aui-list">
<li class="aui-list-header">
带有其他元素的列表
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">text</div>
<div class="aui-list-item-right">信息</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">label</div>
<div class="aui-list-item-right">
<div class="aui-label aui-label-info">标签</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">dot</div>
<div class="aui-list-item-right">
<div class="aui-dot" style="position:relative;top:0; right:0"></div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">badge</div>
<div class="aui-list-item-right">
<div class="aui-badge" style="position:relative;top:0; left:0">88</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">badge</div>
<div class="aui-list-item-right">
<div class="aui-badge" style="position:relative;top:0; left:0"></div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">progress</div>
<div class="aui-list-item-right">
<div class="aui-progress aui-progress aui-progress-xxs" style="width:5rem;">
<div class="aui-progress-bar" style="width: 60%;"></div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner aui-list-item-arrow">
<div class="aui-list-item-title">range</div>
<div class="aui-list-item-right">
<div class="aui-range">
<input type="range" class="aui-range" value="30" max="100" min="1" step="1" id="range" />
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">switch</div>
<div class="aui-list-item-right">
<input type="checkbox" class="aui-switch" checked>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">radio</div>
<div class="aui-list-item-right">
<input type="radio" class="aui-radio" checked>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">checkbox</div>
<div class="aui-list-item-right">
<input type="checkbox" class="aui-checkbox" checked>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-inner">
<div class="aui-list-item-title">bar-btn</div>
<div class="aui-list-item-right">
<div class="aui-bar aui-bar-btn aui-bar-btn-sm" style="width:60%;float:right">
<div class="aui-bar-btn-item">
<i class="aui-iconfont aui-icon-minus"></i>
</div>
<div class="aui-bar-btn-item">
<input type="number" class="aui-input aui-text-center" value="1" >
</div>
<div class="aui-bar-btn-item">
<i class="aui-iconfont aui-icon-plus"></i>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="aui-content">
<ul class="aui-list">
<li class="aui-list-header">带有图标、底线缩进</li>
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-home"></i>
</div>
<div class="aui-list-item-inner">
这是一个列表项
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-edit"></i>
</div>
<div class="aui-list-item-inner">
这是一个列表项
</div>
</li>
<li class="aui-list-item">
<div class="aui-list-item-label-icon">
<i class="aui-iconfont aui-icon-camera"></i>
</div>
<div class="aui-list-item-inner">
这是一个列表项
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="/static/auicss/script/aui-skin.js" ></script>
<script type="text/javascript">
var skin = new auiSkin({
name:"night",
skinPath:'/static/auicss/css/aui-skin-night.css',
default:false,
beginTime:"20:00",
endTime:"07:00"
})
function setSkin(){
skin.setSkin();
}
function removeSkin(){
skin.removeSkin();
}
</script>