how to switch from light to dark theme in ipyvuetify?

I'm using ipyvuetify in a Jupyter Python environment to create an interactive dashboard for my end-user.

I would like to create an interactive toogle btn that switch vuitify.theme.dark from True to False

When I test this behaviour in voila with the following code :

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'
    ])
])

Only the surrounding of the Btn component have a dark background, the rest of the page keeps the voila light background.

A trick could be to add the ?voila-theme=dark at the end of my url but then it's not dynamic anymore.

Is there a way to change both the voila and ipyvuetify theme ? or to force the ipyvuetify background to occupy all the screen ?

A trick is to add an opaque Overlay component as background (z-index=-1) and change its color upon switching the ipyvuetify theme:

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])

No JS code required 😊. The color definitions come from vuetify.min.css (v2.2.26 used by ipyvuetify 1.6.2): #fff in the light theme and #121212 in the dark theme.