From 253379f0c665c1dbedd7d763a1c05b948ba044c3 Mon Sep 17 00:00:00 2001
From: wolfcode <37436228+wolf-leo@users.noreply.github.com>
Date: Mon, 21 Apr 2025 18:03:39 +0800
Subject: [PATCH] feat(theme): implement dynamic theme color change

- Add functionality to change the main theme color dynamically
- Update CSS to use a custom property for the main theme color
- Modify JavaScript to set the main theme color based on user preference Adjust form select styles to match the new theme color
---
 public/static/admin/css/public.css            | 18 +++++++++++++++++-
 public/static/plugs/easy-admin/easy-admin.js  |  1 +
 .../plugs/lay-module/layuimini/miniTheme.js   | 19 +++++++++++++++++++
 3 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/public/static/admin/css/public.css b/public/static/admin/css/public.css
index 6f1e081..20692ac 100644
--- a/public/static/admin/css/public.css
+++ b/public/static/admin/css/public.css
@@ -4,6 +4,10 @@
 @import url("../css/themes/index.css");
 @import url("../css/iconfont.css");
 
+:root {
+    --ea8-theme-main-color: #16b777;
+}
+
 html,
 body {
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -304,9 +308,17 @@ table样式
 }
 
 .layui-form-select dl {
-    border: 1px #16b777 solid;
+    border: 1px var(--ea8-theme-main-color) solid;
     border-top: none;
     z-index: 99999;
+    padding: 0;
+    border-radius: 0;
+}
+
+.layui-form-select dl dd.layui-this {
+    background-color: var(--ea8-theme-main-color);
+    border-top: none;
+    color: #ffffff;
 }
 
 .form-search .layui-form-select dl {
@@ -517,4 +529,8 @@ table样式
 .wangEditor_div {
     z-index: 99999;
     border: 1px solid var(--w-e-textarea-slight-border-color);
+}
+
+.layui-input:focus, .layui-textarea:focus {
+    border-color: var(--ea8-theme-main-color) !important;
 }
\ No newline at end of file
diff --git a/public/static/plugs/easy-admin/easy-admin.js b/public/static/plugs/easy-admin/easy-admin.js
index e6b9af6..b6d8dbb 100644
--- a/public/static/plugs/easy-admin/easy-admin.js
+++ b/public/static/plugs/easy-admin/easy-admin.js
@@ -8,6 +8,7 @@ define(["jquery", "tableSelect", "miniTheme", "xmSelect", "lazyload"], function
                 iframe.contentWindow.onInitElemStyle();
             }
         });
+        miniTheme.changeThemeMainColor();
     };
     window.onInitElemStyle();
 
diff --git a/public/static/plugs/lay-module/layuimini/miniTheme.js b/public/static/plugs/lay-module/layuimini/miniTheme.js
index 1a9ec32..e8cddd3 100644
--- a/public/static/plugs/lay-module/layuimini/miniTheme.js
+++ b/public/static/plugs/lay-module/layuimini/miniTheme.js
@@ -295,6 +295,24 @@ define(["jquery"], function ($) {
             }
             miniTheme.buildBodyElemStyle(elemStyleName);
         },
+
+        changeThemeMainColor() {
+            let bgcolorId = localStorage.getItem('layuiminiBgColorId');
+            if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') return false;
+            let bgcolorData = miniTheme.config(bgcolorId);
+            let mainColor = bgcolorData.headerRightBg
+            if (bgcolorId == 0) mainColor = '#16b777';
+            const bgColor = window.getComputedStyle(document.documentElement).getPropertyValue('--ea8-theme-main-color');
+            document.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
+            const iframes = document.getElementsByTagName('iframe');
+            if (iframes.length === 0) return false;
+            $.each(iframes, (i, iframe) => {
+                if (iframe === '' || iframe === undefined) return false;
+                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+                iframeDocument.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
+            })
+        },
+
         /**
          * 构建主题样式
          * @param bgcolorId
@@ -555,6 +573,7 @@ define(["jquery"], function ($) {
                     bgColorDefault: bgcolorId,
                     listen: false,
                 });
+                miniTheme.changeThemeMainColor()
             });
             $('body').on('click', '[data-select-style]', function () {
                 var elemStyleName = $(this).attr('data-select-style');