Theme toggle button dark mode becomes invisible with colored app bar

[mangecoeur]

Toggling the theme button to dark mode, the button becomes invisible because it picks up the primary colour, but in case the app bar already has the primary colour it is invisible.

Screen.Recording.2024-02-28.at.17.16.39.mp4

With AppBar created as:

v.AppBar(
                color="primary",
                dark=True,
                app=True,
                clipped_left=True,
                hide_on_scroll=False,
                dense=True,
            )

And theme settings

theme.themes.light.primary = "#004568"
theme.themes.dark.primary = "#004568"

[maartenbreddels]

Yes, we have it color=primary in dark (see https://github.com/widgetti/solara/blame/11c6094f3c47528d40f8be951c1d322e454f98ea/solara/lab/components/theming.vue#L7 ).

In this example https://solara.dev/apps/scatter we change the dark setting of the toolbar, we do:

@solara.component
def Layout(children):
    route, routes = solara.use_route()
    dark_effective = use_dark_effective()
    return solara.AppLayout(children=children, toolbar_dark=dark_effective, color=None)

But I think we should not color the switch, or have it an argument. What do you think @iisakkirotko ?

[mangecoeur]

I suggest not colouring the switch because the AppBar defines the colour properties of icons it contains, like in our case we have the AppBar always in "dark" mode and this automatically makes icons within it have a light colour.