A question about theming / styling / etc..

[JovanVeljanoski]

Hi,

A question about theming in solara.
I have a assets/theme.js in the root of my project, a file with which I hope to control the theme(s) of the application. It seems to be picked up correctly by solara, and works well.

My question is, how can I modify the.. (I do not know what i the correct terminology here) the "true background" of the application, the "canvas" that goes black for example when one is using the pre-defined dark-mode (also the text letters go white in that case). Is that something that can be modified per app?

A small pycafe example that hopefully shows what I am talking about

(in my app the theme is applied, here it is applied to the pycafe component - that was not my intention but funny side-effect).

In general, is there a prefered way to set the true background to a user defined colour/picture/gradient etc..

In addition, regarding the solara.Style(..) component.
Say we defined a CSS file that has bunch of classes.

1. Where in our component / page structure should we load the file (i.e. where should the solara.Style(myccs.css) so that the relevant components can have access to the defined classes in the .css file

2. Sometimes..(through a lot of trial and error) i found out that I need to do something like a .. "hard overwrite" of the vue classes to make the styling work, i.e. my css file has something like

.logo-button.v-btn {
    background: none !important;
    box-shadow: none !important;
    /*other definitions */
}

instead of

.logo-button {
    background: none !important;
    box-shadow: none !important;
    /*other definitions */
}

which was what I expected. (not, this example is in a custom Layout component..)

Then I apply the css like this in python

solara.Style('path/to/mycss.css')
solara.Button(children=list_of_kids, on_click=my_callable, flat=True, classes=['logo-button'])

Is there some kind of best practice for this, or an expectation of how styling should be approached?

Many many thanks!

[JovanVeljanoski]

After some word, LLMs, and trial and error i think i have answered my own question, and I will write it here in case anyone else is interested in the same thing (but also so I can look it up in the future :P ).

Warning: Most of what I am writing are assumptions and observations.. might be wrong or wrong way of thinking / approach. Follow the maintainers advice / suggestion if available .

If one wants a "total" control of everything styling, one should start with defining a custom layout. There, in the layout component, you can add CSS styling to define how the application background, etc.. will behave.
Then, since solara is useing vue2/vuetifyjs under the hood, depending on how "deep" one wants to modify the components, sometimes it is necessary (or just easier) to modify the vue components directly, as they propagate throught the vue template, i.e.

.v-application {
    background: #e8f0fe !important;
}

The above is an aggresive approach.

One can also choose to a more fine-grained control, and style each individual component

import solara
import reacton.ipyvuetify as v


v.App(class_="my_class")
v.AppBar(class_="my_class_app_bar")

but in this case, the style does not.. cascade so you really need to style everything, depending on what you need. Probably a combination of both is needed.

I know nothing about CSS or best practices there, so doing stuff/discovering as I go along.

On the topic of solara.Style(..) i found that only works if the argument is of type Path(), and just string does not work for me (although the type hint suggests that it should?).
I still do not know where this should be added.. but I just add it as the first thing in a component, and that seems to work generally ok.

At the end of the day, it is nice to know that you can do whatever you want, and you can impose your style to solara/reacton components (if you know what you are doing). There are some steps to be done, but if one is familiar with CSS + vue, everything should be possible.

To mods: Feel free to close this issue