我在 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
背景占据所有屏幕?
最佳答案
一个技巧是添加一个不透明的 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
在深色主题中。
关于python - 如何在 ipyvuetify 中从浅色主题切换到深色主题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65033675/