python - 如何在 ipyvuetify 中从浅色主题切换到深色主题？

Question

我在 Jupyter Python 环境中使用 ipyvuetify 为我的最终用户创建交互式仪表板。

我想创建一个交互式 toogle btn，将 vuitify.theme.dark 从 True 切换到 False

当我使用以下代码在 voila 中测试此行为时:

import ipyvuetify as v

v.theme.dark = True

#validate the selected data 
v.Container(children=[
    v.Btn(color='primary', children=[
        v.Icon(left=True, children=[
            'mdi-square'
        ]),
        'Click me'
    ])
])

只有 Btn 组件的周围有深色背景，页面的其余部分保持浅色背景。

一个技巧可能是在我的 url 末尾添加 ?voila-theme=dark 但它不再是动态的。

有没有办法同时更改 voila 和 ipyvuetify 主题？还是强制 ipyvuetify 背景占据所有屏幕？

Answer 1

一个技巧是添加一个不透明的 Overlay 组件作为背景(z-index=-1)并在切换 ipyvuetify 主题时改变它的颜色:

import ipyvuetify as v

dark_bg = '#121212'
light_bg = '#fff'

bg = v.Overlay(
    color=dark_bg if v.theme.dark==True else light_bg, 
    opacity=1, 
    style_='transition:unset', 
    z_index=-1
)

def bg_switch(widget, event, data):
    v.theme.dark = not v.theme.dark
    bg.color = dark_bg if v.theme.dark==True else light_bg

btn = v.Btn(children=[v.Icon(children=['mdi-theme-light-dark'])])
btn.on_event('click', bg_switch)

v.Container(children=[bg, btn])

无需 JS 代码😊。颜色定义来自vuetify.min.css(ipyvuetify 1.6.2 使用的 v2.2.26):浅色主题中的#fff 和 #121212 在深色主题中。