Is it possible to load/unload css files?

[kraanzu]

I'm trying to make a theme changer and I'm currently using classes (like .theme-name) to override the color/styles in a widget but is there a way to dynamically load/unload css files?

I looked into the action_toggle_dark which also uses classnames.
Textual is able to determine any file changes in the CSS file, but It'd be great if I can change the CSS_PATH on demand :D

[davep]

To answer the question in the subject: no, there's no direct method in Textual for "unloading" a CSS file (and also keep in mind that styling of a widget can happen in more places than just a CSS file).

More generally though, if you wished to have whole themes defined, an approach would be to apply a class to App and then have the rest of your CSS defined in respect to that. For example:

from textual import on
from textual.app import App, ComposeResult
from textual.widgets import Label, Select, Rule

class ExampleThemeApp(App[None]):

    CSS = """
    Label {
        border: solid white;
        width: 1fr;
        text-align: center;
    }

    App.theme-reds Label {
        border: solid red;
        background: red 20%;
        color: red;
    }

    App.theme-greens Label {
        border: solid green;
        background: green 20%;
        color: green;
    }

    App.theme-blues Label {
        border: solid blue;
        background: blue 20%;
        color: blue;
    }
    """

    THEMES = ("reds", "greens", "blues")

    def compose(self) -> ComposeResult:
        yield Select(((theme.capitalize(), theme) for theme in self.THEMES))
        yield Rule()
        for n in range(20):
            yield Label(f"This is example label {n}")

    @on(Select.Changed)
    def change_theme(self, event: Select.Changed) -> None:
        for theme in self.THEMES:
            self.set_class(event.value == theme, f"theme-{theme}")

if __name__ == "__main__":
    ExampleThemeApp().run()

[kraanzu]

Yes, this is the approach I took initially and it works!
But I wanted to move to load/unload because it'd result in a much more concise CSS file, with no need to put theme-X everywhere

Also, You have set the class directly in the app, which seems a better idea. What I did was apply the class to all the widgets which didn't turn out to be a good option since unmounted widgets won't have the theme applied when mounted (this was also a reason to open this discussion)

[davep]

But I wanted to move to load/unload because it'd result in a much more concise CSS file, with no need to put theme-X everywhere

This may get easier very soon when nested CSS lands, as then you should be able to do something like:

App.theme-red {
    Button { ... }
    Label { ... }
    CheckBox{ ... }
}

[kraanzu]

Yes just saw the release! Great work. This makes things a lot easier :)

I'll keep this thread open since will thinks it might be a good idea

[kraanzu]

Hey @davep!

Ok, I have one more question, kinda related to this thread.
Is there a way to define the CSS variables in one file and use them in another CSS file?
I tried but was not able to replicate this behavior using CSS_PATHS

[davep]

To the best of my knowledge the scope of the variable is restricted to the file that it's defined in (we should make the scope clear in the docs).

[kraanzu]

I see :(