AppBar does not play nicely with themes

[JovanVeljanoski]

Hi,

I noticed that whenever solara.AppBar() is used in an app (or a page of an app), it somehow messes up with the theme.

Example of of things going wrong

• In dark mode the AppBar tabs are not visible if selected (the names color coincides with the primary color probably)
• In light mode the solara.Text() elements are not visible even though they are not part of the NavBar component (but they are visible in dark mode).

Here is the same example, but without the NavBar component (commented out)

Example that "works" without the NavBar component

Finally, a kind of patch around this is to use solara.v.AppBar() instead

However the problem here is that the theme.js in assets is not respected (I think).

Any advice on this, or is this perhaps a known issue?

Many thanks!

[iisakkirotko]

Hi @JovanVeljanoski! I think you touch upon a few issues here:

• The selected tab of the solara.AppBar not being visible in dark theme is something we are aware of. This should be fixed in refactor!: streamline and improve applayout api #657, but we're holding it until solara 2.0, since the change is visually breaking. You can't change the color of the AppBar directly, but you can change it by passing color to solara.AppLayout, which will pass the argument on to the AppBar that is rendered. You can take a look at this py.cafe example
• The white text is caused by dark=True being passed to the AppBar by default. We can pass toolbar_dark=None to AppLayout to reset the theming of the component, see this py.cafe example.

[JovanVeljanoski]

Hi @iisakkirotko

Thanks for the answer - that makes sense. I thought of some ways how to "hack" the behavior, but nice to hear that this is on the roadmap.

A bit of topic, but maybe related: is there a plan to support typography in solara 2 (i.e. custom fonts etc.., the way vuetify themes support it)?

Thanks!