Apply solara theming to arbitrary HTML page elements

[ntjess]

Consider a case where css rules apply styling to a page's body HTML element:

import solara as sl
from solara import lab as sl_lab


@sl.component
def Page():

    sl.Style(
        """
        body {
            max-width: 800px;
            margin: 30px auto 2em auto !important;
            padding-left: 2em;
            padding-right: 2em;
        }
        """
    )

    sl_lab.ThemeToggle()
    sl.Markdown("# Hello, Solara!")

In this case, when the app is in dark mode, the background is white (potentially relating to #532):

Ideally, one could also add to the body background-color: var(--theme-background) or something similar to prevent this issue. However, since the active theme doesn't save it's foreground/background colors to css variables, this proves difficult in practice.

What is the recommended best approach?

[maartenbreddels]

Hi Nathan,

Is this specific to body? Because we do not have a good way to style that yet based on the dark/light theme. If so, we should see if we can find a way (e.g. adding a data-theme=dark data attribute, or add theme--light/dark to the body CSS classes).

If it's only for child components, you can use this solution

which is, adding a class 'my-own-background', and the css:

        .theme--light .my-own-background {
            background-color: #fcc;
        }
        .theme--dark .my-own-background {
            background-color: #400;
        }

Let us know if your problem is solved with this.

Regards,

Maarten