ui

web/templates/manage/base/footer.tmpl

@@ -3,8 +3,50 @@
 <script src="/statics/component/layui/layui.js"></script>
 <script src="/statics/component/pear/pear.js"></script>
 <script src="/statics/component/pear/help.js"></script>
-<script src="/statics/js/Function/public.js"></script>
+<script src="/statics/js/function/public.js"></script>
 <script src="/statics/js/upload.js"></script>
+<script>
+    layui.use(['admin', 'jquery', 'popup', 'drawer'], function () {
+        var $ = layui.jquery;
+        var admin = layui.admin;
+        var popup = layui.popup;
+
+        // 读取 localStorage 主题颜色值，初始化 iframe 主题
+        darkTheme();
+        themeColor();
+
+        // iframe 页监听 localStorage [pear 框架主题颜色] 变化。发生变化，同步更新 iframe 显示效果
+        window.addEventListener('storage', function (event) {
+            if (event.key === 'dark') {
+                darkTheme();
+            }
+            if (event.key === 'theme-color') {
+                themeColor();
+            }
+        });
+
+        // 夜间模式切换
+        function darkTheme() {
+            var $pearAdmin = $(".pear-admin");  // 主体
+            var $layuiCard = $('.layui-card');  // 编辑页
+
+            if (localStorage.getItem('dark') === 'true') {
+                $pearAdmin.addClass("pear-admin-dark");
+                $layuiCard.addClass('layui-card-dark');
+            } else {
+                $pearAdmin.removeClass("pear-admin-dark");
+                $layuiCard.removeClass('layui-card-dark');
+            }
+        }
+
+        // 主题颜色切换
+        function themeColor() {
+            const variableKey = "--global-primary-color";
+            const variableVal = localStorage.getItem("theme-color-color");
+            document.documentElement.style.setProperty(variableKey, variableVal);
+        }
+    })
+</script>
 {{block "js" .}}{{end}}
 </body>
 

web/templates/manage/base/header.tmpl

@@ -8,8 +8,10 @@
 	<title>component</title>
 	<link rel="icon" type="image/x-icon" href="/statics/favicon.ico">
 	<link rel="stylesheet" href="/statics/component/pear/css/pear.css" />
-	<link rel="stylesheet" href="/statics/admin/css/loader.css" />
 	<link rel="stylesheet" href="/statics/admin/css/admin.css" />
+	<link rel="stylesheet" href="/statics/admin/css/admin.dark.css" />
+	<link rel="stylesheet" href="/statics/admin/css/variables.css" />
+	<link rel="stylesheet" href="/statics/admin/css/reset.css" />
 	<link rel="stylesheet" href="/statics/admin/css/style.css" />
 	{{block "css" .}}{{end}}
 </head>