feat: pyl7vp 支持暗色模式

antvis · Jan 23, 2024 · ed46563 · ed46563
1 parent 980a3f3
commit ed46563
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 30 deletions.
diff --git 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
@@ -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>