如何在Taipy图表中实现从浅色模式到深色模式的颜色切换？

以下是几种可行的实现方案，覆盖内置主题绑定、系统主题监听以及底层图表库适配三种场景：

方案1：利用Taipy内置主题切换机制 #

Taipy支持多主题配置，可通过绑定主题变量实现图表颜色的自动同步：

1. 配置浅色/深色主题
   在项目的config.toml中定义两个主题，指定图表相关的配色参数：

[theme.light]
chart_bg = "#ffffff"
chart_text = "#333333"
chart_line = "#2196F3"

[theme.dark]
chart_bg = "#121212"
chart_text = "#ffffff"
chart_line = "#64B5F6"

2. 在页面中绑定主题变量
   使用Taipy的内置主题切换组件，将图表的颜色参数与主题变量绑定：

from taipy.gui import Gui, Markdown

page = Markdown("""
<|toggle|theme|>
<|{data}|chart|x=x|y=y|color={theme.chart_line}|bgcolor={theme.chart_bg}|textcolor={theme.chart_text}|>
""")

data = {"x": [1,2,3], "y": [4,5,1]}
Gui(page).run()

点击<|toggle|theme|>按钮切换主题时，图表会自动应用对应主题的配色。

方案2：监听系统主题自动切换 #

通过JavaScript监听系统的prefers-color-scheme设置，自动同步Taipy主题：

1. 添加主题监听脚本
   在Taipy页面中插入自定义JS代码，实现系统主题的监听和初始化：

<script>
// 监听系统主题变化
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
    taipy.gui.set_theme(e.matches ? 'dark' : 'light');
});

// 初始化时应用当前系统主题
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    taipy.gui.set_theme('dark');
} else {
    taipy.gui.set_theme('light');
}
</script>

2. 确保主题配置完成
   提前在config.toml中配置好浅色/深色主题，系统主题变化时，图表会自动适配对应配色。

方案3：适配Plotly底层模板（Taipy基于Plotly时） #

若你的Taipy图表使用Plotly作为底层渲染库，可直接切换Plotly的内置模板：

from taipy.gui import Gui, Markdown
import plotly.io as pio

# 注册Plotly模板（可自定义扩展）
pio.templates["taipy_light"] = pio.templates["plotly"]
pio.templates["taipy_dark"] = pio.templates["plotly_dark"]

def sync_theme(state, theme):
    # 切换Plotly默认模板
    pio.templates.default = f"taipy_{theme}"
    # 触发图表更新
    state.data = state.data.copy()

page = Markdown("""
<|toggle|theme|on_change=sync_theme|>
<|{data}|chart|x=x|y=y|>
""")

data = {"x": [1,2,3], "y": [4,5,1]}
Gui(page).run()

主题切换时，通过on_change事件触发Plotly模板更新，图表会自动切换配色风格。

注意事项 #

• 建议使用Taipy v3.x及以上版本，主题系统的支持更稳定完善。
• 自定义配色时，需保证浅色/深色模式下的对比度足够，避免元素辨识度下降。
• 若需更精细的样式控制，可结合自定义CSS，通过:root和[data-theme="dark"]伪类定义全局颜色变量，再在图表组件中引用。

内容的提问来源于stack exchange，提问作者user21317477