mirror of
https://github.com/skyle1995/NetworkAuth.git
synced 2026-05-25 10:42:45 +08:00
New warehouse
This commit is contained in:
240
web/static/tpl/theme.html
Normal file
240
web/static/tpl/theme.html
Normal file
@@ -0,0 +1,240 @@
|
||||
<style>
|
||||
:root{
|
||||
--ms-color-bg: #FFF;
|
||||
}
|
||||
:root.dark{
|
||||
--ms-color-bg: #000;
|
||||
}
|
||||
.ms-color-palette{
|
||||
font-size:0;
|
||||
}
|
||||
.ms-color-palette .ms-color-gradient:nth-child(10n){
|
||||
margin-right: 20px;
|
||||
}
|
||||
.ms-color-palette .ms-color-gradient:nth-child(20n){
|
||||
display: table-column;
|
||||
}
|
||||
.ms-color-gradient{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height:20px;
|
||||
margin-bottom: 15px;
|
||||
margin-right: 5px;
|
||||
transition-duration:0.1s;
|
||||
}
|
||||
.ms-color-gradient:hover{
|
||||
transform:scale(1.5);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.ms-color-edit-picker>div{
|
||||
border-color: transparent !important;
|
||||
}
|
||||
.ms-color-edit-picker i{
|
||||
display: none;
|
||||
}
|
||||
.ms-color-edit-picker span{
|
||||
border-color: #5f5f60;
|
||||
}
|
||||
.ms-color-edit-picker .layui-colorpicker-trigger-bgcolor{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
</style>
|
||||
<div style="padding: 20px;background-color: var(--ms-color-bg);">
|
||||
<div style="display: flex;justify-content: space-between;align-items: center;">
|
||||
<div style="display: flex;" >
|
||||
<label style="display: flex; position: relative; top: 1px; margin-right: 10px;" title="降低饱和度，提高亮度，暗色下更舒适">
|
||||
深色色板
|
||||
<input name="colorpicker" type="checkbox" style="height: 20px; width: 20px;">
|
||||
</label>
|
||||
<label title="类名/属性名例如 .dark,[theme-mode='dark']">
|
||||
自定义主题类/属性选择器
|
||||
<input name="theme-prefix" type="input" style="height: 18px; width: 150px;">
|
||||
</label>
|
||||
<i id="theme-prefix-tips" class="layui-icon layui-icon-tips" style="position: relative; top: 3.5px;margin-left: 2px;"></i>
|
||||
</div>
|
||||
<div style="display: flex;" >
|
||||
<span title="重置"><i id="resetTheme" style="font-size: 23px;" class="layui-icon layui-icon-refresh"></i></span>
|
||||
<span title="下载"><i id="downloadCSS" style="font-size: 23px;margin-left: 10px;" class="layui-icon layui-icon-download-circle"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="ms-color-palette">
|
||||
<!-- 色板 tpl 生成 -->
|
||||
</div>
|
||||
<div class="ms-color-edit">
|
||||
<!-- 编辑区 tpl 生成 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template id="tpl-color-palette">
|
||||
{{# layui.each(d.ColorPaletteLight, function(key, val){ }}
|
||||
<div class="ms-color-gradient" style="background-color: var({{- key }});" title="{{- key.replace('--lay-color-','') }}"></div>
|
||||
{{# }) }}
|
||||
</template>
|
||||
|
||||
<template id="tpl-color-editable">
|
||||
{{# layui.each(d.editable, function(key, val){ }}
|
||||
<div style="display: flex; align-items: center; height:30px">
|
||||
<div>{{= key }}</div>
|
||||
<div style="flex: 1 1 auto;"></div>
|
||||
<input type="text" name="color" value="{{= val }}" placeholder=""
|
||||
style="text-align: right;height:28px;width: 150px;background-color: transparent;border-color: transparent;">
|
||||
<div class="ms-color-edit-picker" lay-options="{color: '{{= val }}', format: '{{- /^rgb/.test(val) ? 'rgb':'hex' }}' }" data-key="{{= key}}"></div>
|
||||
</div>
|
||||
{{# }) }}
|
||||
</template>
|
||||
<template id="tpl-theme-prefix-example">
|
||||
<pre class="layui-code code-demo" lay-options="{}" style="margin: 0; padding: 0;">
|
||||
/** .dark，通过改变 html 标签的类名切换主题*/
|
||||
:root{ :root.dark{
|
||||
--color-bg: #000; --color-bg: #000;
|
||||
} ==> }
|
||||
.lay-card{ .dark .lay-card{}
|
||||
color: #FFF; color: #FFF;
|
||||
} }
|
||||
/** js */
|
||||
// 设置为暗色主题
|
||||
document.documentElement.classList.add('dark')
|
||||
// 恢复亮色主题
|
||||
document.documentElement.classList.remove('dark')
|
||||
// 切换亮/暗主题
|
||||
document.documentElement.classList.toggle('dark')
|
||||
----------------------------------------------------------
|
||||
/** [theme-mode='dark']，通过改变 html 标签上 theme-mode 的属性切换主题*/
|
||||
:root{ :root[theme-mode='dark']{
|
||||
--color-bg: #000; --color-bg: #000;
|
||||
} ==> }
|
||||
.lay-card{ [theme-mode='dark'] .lay-card{}
|
||||
color: #FFF; color: #FFF;
|
||||
} }
|
||||
/** js */
|
||||
// 设置为暗色主题
|
||||
document.documentElement.setAttribute('theme-mode', 'dark')
|
||||
// 恢复亮色主题
|
||||
document.documentElement.removeAttribute('theme-mode');
|
||||
</pre>
|
||||
</template>
|
||||
<script src="static/lib/less.js"></script>
|
||||
<script>
|
||||
layui.use(async ()=> {
|
||||
const {jquery:$,laytpl,colorpicker,layer} = layui;
|
||||
|
||||
const originalData=await (await fetch('./assets/themes.json')).json()
|
||||
let customTheme = {};
|
||||
|
||||
laytpl($('#tpl-color-palette').html()).render(originalData,function(str) {
|
||||
$('.ms-color-palette').html(str);
|
||||
});
|
||||
|
||||
laytpl($('#tpl-color-editable').html()).render(originalData,function(str) {
|
||||
$('.ms-color-edit').html(str);
|
||||
renderColorPicker();
|
||||
});
|
||||
|
||||
$('input[name=colorpicker]').on('click',function(){
|
||||
applyColorPalette(this.checked)
|
||||
})
|
||||
$('#resetTheme').on('click',function(){
|
||||
resetTheme()
|
||||
$('input[name=colorpicker]').prop('checked',false)
|
||||
})
|
||||
$('#downloadCSS').on('click',function(){
|
||||
dropdownCSS()
|
||||
})
|
||||
$('#theme-prefix-tips').hover(function(){
|
||||
layer.tips($('#tpl-theme-prefix-example').html(),this,{
|
||||
tips: 3,
|
||||
time: false,
|
||||
area: ['700px','auto'],
|
||||
success: function(layero){
|
||||
layui.code({elem: '.code-demo'});
|
||||
layero.find('.layui-layer-content').css({padding:0,margin:0})
|
||||
layero.css('top','50px') //阻止反转
|
||||
}
|
||||
});
|
||||
},function(){
|
||||
layer.closeLast('tips');
|
||||
})
|
||||
|
||||
function renderColorPicker(){
|
||||
colorpicker.render({
|
||||
elem: '.ms-color-edit-picker',
|
||||
alpha: true,
|
||||
change: function(color) {
|
||||
const elem=this.elem
|
||||
elem.prev().val(color)
|
||||
applyTheme(elem.data('key'),color)
|
||||
},
|
||||
done: function(color) {
|
||||
const elem=this.elem
|
||||
elem.prev().val(color)
|
||||
applyTheme(elem.data('key'),color)
|
||||
},
|
||||
close: function(color){
|
||||
const elem=this.elem
|
||||
elem.prev().val(color)
|
||||
applyTheme(elem.data('key'),color)
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function resetTheme() {
|
||||
customTheme={}
|
||||
addStyle('demo-customTheme',getCSS(customTheme))
|
||||
renderColorPicker()
|
||||
}
|
||||
|
||||
function applyTheme(key,val){
|
||||
customTheme = {...customTheme,...{[key]:val} }
|
||||
addStyle('demo-customTheme',getCSS(customTheme))
|
||||
}
|
||||
|
||||
function applyColorPalette(isDark=false){
|
||||
customTheme={...customTheme, ...originalData[isDark ? 'ColorPaletteDark' : 'ColorPaletteLight']}
|
||||
addStyle('demo-customTheme',getCSS(customTheme))
|
||||
}
|
||||
|
||||
function getCSS(cssVarsObj){
|
||||
return `:root {\n ${
|
||||
Object.entries(cssVarsObj)
|
||||
.map(([key,val])=> ` ${key}: ${val};`)
|
||||
.join('\n')
|
||||
}\n}`
|
||||
}
|
||||
|
||||
async function dropdownCSS(){
|
||||
const hasPrefix = $('input[name="theme-prefix"]').val()
|
||||
const overrideCSS = await(await fetch('./static/src/override.css')).text()
|
||||
const varsCSS = getCSS({...originalData.Default, ...customTheme})
|
||||
let finalCSS=`
|
||||
${hasPrefix
|
||||
? varsCSS.replace(':root',`:root${hasPrefix}`)
|
||||
: varsCSS}\n
|
||||
${hasPrefix
|
||||
? `${hasPrefix}{${overrideCSS}}`
|
||||
: overrideCSS}`;
|
||||
|
||||
// css-next 插件太大，暂时用 less
|
||||
finalCSS = (await window.less.render(finalCSS)).css
|
||||
const alink=document.createElement("a")
|
||||
alink.download='layui-theme-dark-custom.css'
|
||||
alink.href=URL.createObjectURL(new Blob([finalCSS]))
|
||||
document.body.appendChild(alink)
|
||||
alink.click()
|
||||
document.body.removeChild(alink)
|
||||
}
|
||||
|
||||
function addStyle(id,cssStr) {
|
||||
var el=document.getElementById(id)||document.createElement('style')
|
||||
if(!el.isConnected) {
|
||||
el.type='text/css';
|
||||
el.id=id;
|
||||
document.head.appendChild(el);
|
||||
}
|
||||
el.textContent=cssStr;
|
||||
}
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user