From 0b7e16b395d5defdee717275e5562548e91946a6 Mon Sep 17 00:00:00 2001
From: lvisei <yunji.me@outlook.com>
Date: Tue, 23 Jan 2024 21:45:05 +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=20(#130)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: pyl7vp 支持暗色模式

* feat: set_theme

* chore: default "light"

* chore: 0.0.8

* chore: v0.0.9
---
 bindings/pyl7vp/notebooks/GeoJSON.ipynb    |  1 -
 bindings/pyl7vp/pyl7vp/l7vp.py             |  9 ++++
 bindings/pyl7vp/pyl7vp/meta.py             |  2 +-
 bindings/pyl7vp/pyl7vp/templates/l7vp.html | 55 ++++++++++------------
 4 files changed, 35 insertions(+), 32 deletions(-)

diff --git a/bindings/pyl7vp/notebooks/GeoJSON.ipynb b/bindings/pyl7vp/notebooks/GeoJSON.ipynb
index f1e12cde..fb5b487e 100644
--- 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
index d4b90700..63a42f59 100644
--- 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
index 86c167f2..e9554191 100644
--- 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
index aa1c1248..a398e599 100644
--- 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>