Theme support for extended colours and named colour in theme reference

[anirbanbasu]

Hi,

I have setup my light and dark theme specifications as follows, based on the information available at https://solara.dev/documentation/components/lab/theming and the theme generator at https://theme-generator.vuetifyjs.com/.

solara.lab.theme.themes.light.primary = "#2196f3"
solara.lab.theme.themes.light.secondary = "#ff5722"
solara.lab.theme.themes.light.accent = "#607d8b"
solara.lab.theme.themes.light.error = "#f44336"
solara.lab.theme.themes.light.warning = "#ffc107"
solara.lab.theme.themes.light.info = "#00bcd4"
solara.lab.theme.themes.light.success = "#8bc34a"

solara.lab.theme.themes.dark.primary = "#673ab7"
solara.lab.theme.themes.dark.secondary = "#ff5722"
solara.lab.theme.themes.dark.accent = "#cddc39"
solara.lab.theme.themes.dark.error = "#f44336"
solara.lab.theme.themes.dark.warning = "#ffc107"
solara.lab.theme.themes.dark.info = "#00bcd4"
solara.lab.theme.themes.dark.success = "#8bc34a"

Q1: However, this does not specify the "on" colours discussed at https://m2.material.io/design/material-theming/implementing-your-theme.html. Are they supported? Can I specify colours such as solara.lab.theme.themes.light.onPrimary since solara.lab.theme.themes.light.on-primary is not a valid name? There are also other colours as described at https://m2.material.io/design/material-theming/implementing-your-theme.html -- are they supported?

As a consequence of lacking the ability of specifying the "on" and the other colours, with the dark mode it is impossible to see the currently selected top navigation menu item at https://huggingface.co/spaces/xtremebytes/TLDRLC.

Q2: If I want to refer to a particular named colour from the theme using the style to specify the CSS, I could go with something like this. However, using this, the colour does not change when the theme is toggled from dark to light or light to dark. Why?

style {'color': solara.lab.theme.themes.dark.accent
        if solara.lab.theme.dark_effective
        else solara.lab.theme.themes.light.accent}

Q3: Finally, is Material 3 -- https://m3.material.io/ -- supported?

[iisakkirotko]

Hey @anirbanbasu!

Q1: It's actually unclear to me whether Vuetify supports "on" colours. I'll take a look and get back to you. However, in general I would expect on-primary from Vuetify to translate to on_vuetify in ipyvuetify.

Q2: This is because solara.lab.theme.dark_effective doesn't behave the way you expect. You should use the solara.lab.use_dark_effective-hook instead.

Q3: Not currently. This is something we've talked about among the developers before, and is something we'd like to get in at some point in the future.

[anirbanbasu]

@iisakkirotko thanks a lot for the options. I will try it out.

Currently, the navigation bar in my app is shown automatically using routing. See: https://github.com/anirbanbasu/tldrlc/blob/master/app.py

Thus, to make the with solara.AppLayout(...): work, do I need to include it in all pages? Or, maybe a better option is that I should refactor the router options as a page and setup the tabs there by myself?

[iisakkirotko]

@anirbanbasu you could include it in all pages, that way it should be picked up automatically. You could also define it in app.py, and pass it to the routes using layout=Layout.

[anirbanbasu]

@iisakkirotko Thanks. Reading the documentation at https://solara.dev/documentation/advanced/howto/layout, the following code does not work in a different way. While the colour does work correctly in the dark mode (I opted for changing the background colour of the navigation bar instead of the text colour), the navigation bar gets displayed only for the default / route. For all other routes, the navigation bar vanishes. Why?

reactive_colour: solara.Reactive[str] = solara.reactive("")

def set_theme_colours():
    reactive_colour.value = (
        solara.lab.theme.themes.dark.secondary
        if solara.lab.use_dark_effective()
        else solara.lab.theme.themes.light.primary
    )

@solara.component
def Layout(children: Any = []):
    set_theme_colours()
    return solara.AppLayout(
        children=children,
        color=reactive_colour.value,
        navigation=True,
        sidebar_open=False,
    )

routes = [
    solara.Route(path="/", component=page1.Page, layout=Layout),
    solara.Route(path="p4", component=page2.Page, layout=Layout),
    solara.Route(path="p3", component=page3.Page, layout=Layout),
]

Also, I am wondering based on your example above, how should I define the tab children? Perhaps, iterate over my routes variable? But, wouldn't this layout=Layout cause some kind of circular referencing problem?

with solara.lab.Tabs(color=color, slider_color=color, ...):
     ...

[iisakkirotko]

@anirbanbasu sorry, I think I should have phrased my previous answer better. If passing layout=Layout to the routes, you only need to pass it to the "root path", i.e.

routes = [
    solara.Route(path="/", component=page1.Page, layout=Layout),
    solara.Route(path="p4", component=page2.Page),
    solara.Route(path="p3", component=page3.Page),
]

You can see some more discussion about why this happens a couple comments down in this issue.

[anirbanbasu]

@iisakkirotko thanks a lot! That worked (see commit: anirbanbasu/tldrlc@d79dcef). I shall mark your last reply as the answer.