From ed46563bc8360c6675d572d4b8bd5abdde83a34b Mon Sep 17 00:00:00 2001
From: yunji <yunji.me@outlook.com>
Date: Tue, 23 Jan 2024 20:07:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20pyl7vp=20=E6=94=AF=E6=8C=81=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bindings/pyl7vp/pyl7vp/l7vp.py             |  1 +
 bindings/pyl7vp/pyl7vp/templates/l7vp.html | 49 +++++++++-------------
 2 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/bindings/pyl7vp/pyl7vp/l7vp.py b/bindings/pyl7vp/pyl7vp/l7vp.py
index d4b90700..7a7cf720 100644
--- a/bindings/pyl7vp/pyl7vp/l7vp.py
+++ b/bindings/pyl7vp/pyl7vp/l7vp.py
@@ -184,6 +184,7 @@ def _get_html_str(
         }
 
         self.read_only = read_only
+        self.theme = "dark"
 
         # get html string
         return Engine(env=env).render(
diff --git a/bindings/pyl7vp/pyl7vp/templates/l7vp.html b/bindings/pyl7vp/pyl7vp/templates/l7vp.html
index aa1c1248..f3ecc830 100644
--- a/bindings/pyl7vp/pyl7vp/templates/l7vp.html
+++ b/bindings/pyl7vp/pyl7vp/templates/l7vp.html
@@ -67,6 +67,23 @@
     if (MAP_TOKEN) LI_Config.spec.map.config.token = MAP_TOKEN
     </script>
 
+     <!-- LI Theme -->
+    <script>
+      const LI_Theme = "{{ l7vp.theme }}"
+      const _theme = window.antd.theme;
+      const _darkTheme = {
+        algorithm: _theme.darkAlgorithm,
+        token: {
+          colorPrimary: "#8274FF",
+          colorTextBase: "rgba(255,255,255,0.85)",
+          colorBgBase: "#0f0f13",
+          colorInfo: "#8274FF",
+          borderRadius: 6,
+        },
+      }
+      const Antd_Theme = LI_Theme === "light" ? {} : _darkTheme
+    </script>
+
     {% if l7vp.app_mode %}
     <!-- Render LI App -->
     <script>
@@ -84,21 +101,7 @@
         });
       };
 
-      const appTheme = {
-        algorithm: theme.darkAlgorithm,
-        token: {
-          colorPrimary: "#8274FF",
-          colorBgLayout: "#0F0F13",
-          colorBgContainer: "#282932",
-          colorBgElevated: "#3D3E4A",
-          colorText: "rgba(255,255,255,0.85)",
-          colorTextSecondary: "rgba(255,255,255,0.45)",
-          colorBorder: "#434343",
-          colorSplit: "#303030",
-          borderRadius: 4,
-        },
-      }
-      const App = React.createElement(ConfigProvider, { theme: {} }, React.createElement(LIAppElement, null));
+      const App = React.createElement(ConfigProvider, { theme: Antd_Theme }, React.createElement(LIAppElement, null));
 
       ReactDOM.render(App, document.getElementById("{{ l7vp.instance_id }}"));
     </script>
@@ -119,21 +122,7 @@
         });
       };
 
-      const appTheme = {
-        algorithm: theme.darkAlgorithm,
-        token: {
-          colorPrimary: "#8274FF",
-          colorBgLayout: "#0F0F13",
-          colorBgContainer: "#282932",
-          colorBgElevated: "#3D3E4A",
-          colorText: "rgba(255,255,255,0.85)",
-          colorTextSecondary: "rgba(255,255,255,0.45)",
-          colorBorder: "#434343",
-          colorSplit: "#303030",
-          borderRadius: 4,
-        },
-      }
-      const App = React.createElement(ConfigProvider, { theme: {} }, React.createElement(LIEditorElement, null));
+      const App = React.createElement(ConfigProvider, { theme: Antd_Theme }, React.createElement(LIEditorElement, null));
 
       ReactDOM.render(App, document.getElementById("{{ l7vp.instance_id }}"));
     </script>