feat: pyl7vp 支持暗色模式 (#130)

* feat: pyl7vp 支持暗色模式 * feat: set_theme * chore: default "light" * chore: 0.0.8 * chore: v0.0.9
antvis · Jan 23, 2024 · 0b7e16b · 0b7e16b
1 parent 980a3f3
commit 0b7e16b
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 32 deletions.
diff --git a/bindings/pyl7vp/notebooks/GeoJSON.ipynb b/bindings/pyl7vp/notebooks/GeoJSON.ipynb
@@ -33,7 +33,6 @@
     "\n",
     "l7vp_map = L7VP(height = 600)\n",
     "\n",
-    "\n",
     "# Add dataset to map\n",
     "l7vp_map.add_dataset({\"id\": \"my_dataset\", \"type\": 'local', \"data\": data})\n",
     "\n",

diff --git a/bindings/pyl7vp/pyl7vp/l7vp.py b/bindings/pyl7vp/pyl7vp/l7vp.py
@@ -102,6 +102,8 @@ def __init__(self, height=600, datasets: list = [], config: dict = {}):
         _validate_config(config)
         self.config = _merge_config(DEFAULT_ANALYSIS_SPEC, config)
 
+        self.set_theme()
+
         # page settting
         self.page_title = "PyL7VP"
 
@@ -154,6 +156,13 @@ def _dump_js_datasets(
         datasets = list(map(lambda d: _dataset_auto_create_layers(d, self.config.get("layers")), self.datasets))
         return json_dump_to_js(datasets)
 
+    '''
+    set the l7vp theme "light" or "dark", default "light"
+    '''
+
+    def set_theme(self, theme: str = "light"):
+      self.theme = theme
+
     '''
     get render to html string
     '''

diff --git a/bindings/pyl7vp/pyl7vp/meta.py b/bindings/pyl7vp/pyl7vp/meta.py
@@ -1,2 +1,2 @@
-__version__ = "0.0.7"
+__version__ = "0.0.9"
 __author__ = "@lvisei"
diff --git a/bindings/pyl7vp/pyl7vp/templates/l7vp.html b/bindings/pyl7vp/pyl7vp/templates/l7vp.html
@@ -67,6 +67,29 @@
     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 _lightTheme = {
+        token: {
+          colorPrimary: "#8274FF",
+          colorInfo: "#8274FF",
+        },
+      }
+      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" ? _lightTheme : _darkTheme
+    </script>
+
     {% if l7vp.app_mode %}
     <!-- Render LI App -->
     <script>
@@ -84,21 +107,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 +128,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>