NetworkAuth/web/static/tpl/theme.html

<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>