change theme background colour not working

[gioxc88]

Following this example from https://stackoverflow.com/questions/65033675/how-to-switch-from-light-to-dark-theme-in-ipyvuetify it doesn't change the coloou. Is there any other way to do it?

Thanks

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 = '#7FFF00'
light_bg = '#7FFF00'

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

[guimillet]

In the code above, you have set dark_bg and light_bg with the same colour...

[gioxc88]

of course I have but it doesn't change to anything anyway :)

[guimillet]

I misunderstood your question. The Overlay widget in the above code was a workaround (at that time) for hiding the Voila background colour surrounding the ipyvuetify rendering when using ipyvuetify with the Voila lab template.

Is your issue about changing the colour of the ipyvuetify dark or light theme?

[gioxc88]

Yes correct Thanks

[guimillet]

Then, you can override the vuetify CSS setting by adding an internal CSS in an HTML style element:

css = v.Html(
    tag='style', 
    children=['.vuetify-styles .theme--dark.v-application {background: #7FFF00}'
              ' .vuetify-styles .theme--light.v-application {background: #7FFF00}']
)
v.Container(children=[css,v.Btn()])