Programmatic access to colors in the current theme

[anschweitzer]

Is there a way to get programmatic access to the colors used by the current theme?

I want to be able to set the color of a Widget or a RichRenderable based on the current them, for example, to "$accent". The app has access to a self.theme member variable, but I'm not aware of a direct way to access that in Widget code. I could data_bind() a reactive in the widget to the them reactive in the app, but that's just a string and accessing the actual theme is via function on the app.

What's the right approach to this?

Thanks

Andy

[anschweitzer]

Perhaps the answer involves Widget.get_component_styles() and Widget.get_component_rich_style()?

These would not return the current theme directly, but (I think?) they return a programmatic view of a CSS object which could be defined in terms of the current theme.

[TomJGooding]

I think you might be looking for the App.theme_variables attribute?

from textual.app import App, ComposeResult
from textual.widgets import Label


class ThemeVariablesApp(App):
    def compose(self) -> ComposeResult:
        yield Label("$accent = ??????")

    def on_mount(self) -> None:
        label = self.query_one(Label)
        accent_color = self.theme_variables["accent"]
        label.update(f"$accent = {accent_color}")
        label.styles.color = accent_color


if __name__ == "__main__":
    app = ThemeVariablesApp()
    app.run()

[anschweitzer]

Thanks! What's the best practice for accessing this App.theme_variables from inside a widget?

[anschweitzer]

Here's an example using using reactives:

from textual.app import App, ComposeResult
from textual.reactive import reactive
from textual.reactive import Reactive
from textual.widgets import Footer
from textual.widgets import Label

class ColoredLabel(Label):

    color: Reactive[str] = reactive("")

    def __init__(self, color: str):
        super().__init__()
        self.color = color

    def watch_color(self) -> None:
        self.update(f"ColoredLabel - color: {self.color}")
        self.styles.color = self.color

class ThemedLabel(Label):
    theme_variable_name: str
    theme_variables: Reactive[dict[str, str]] = reactive({})

    def __init__(self, theme_variable_name: str):
        super().__init__()
        self.theme_variable_name = theme_variable_name

    def watch_theme_variables(self) -> None:
        color = self.theme_variables.get(self.theme_variable_name)
        self.update(f"ThemedLabel - color: {color}")
        if color:
            self.styles.color = color

class ThemeVariablesApp(App):
    color = reactive("")
    theme_variables_reactive: Reactive[dict[str, str]] = reactive({})
    theme_variable_name: str = "primary"

    BINDINGS = [
        ("d", "toggle_dark", "Toggle dark mode"),
    ]

    def compose(self) -> ComposeResult:
        yield ColoredLabel(self.theme_variables[self.theme_variable_name]).data_bind(
            color=ThemeVariablesApp.color,
        )
        yield ThemedLabel(self.theme_variable_name).data_bind(
            theme_variables=ThemeVariablesApp.theme_variables_reactive,
        )
        yield Footer()

    def on_mount(self):
        self.theme = "textual-light"

    def action_toggle_dark(self) -> None:
        self.theme = (
            "textual-dark" if self.theme == "textual-light" else "textual-light"
        )

    def watch_theme(self) -> None:
        self.theme_variables_reactive = self.theme_variables.copy()
        self.color = self.theme_variables[self.theme_variable_name]


if __name__ == "__main__":
    app = ThemeVariablesApp()
    app.run()

[TomJGooding]

Thanks! What's the best practice for accessing this App.theme_variables from inside a widget?

You can simply use the app property which returns the current app - i.e. self.app.theme_variables

[anschweitzer]

Thanks!! Exactly what I was looking for.

[anschweitzer]

For reference, simplified version with your suggestion:

from rich.text import Text
from textual.app import App, ComposeResult
from textual.app import RenderResult
from textual.widgets import Footer
from textual.widgets import Label

class ThemedLabel(Label):

    def render(self) -> RenderResult:
        color = self.app.theme_variables.get("primary")
        return Text(f"ThemedLabel - color: {color}", style=color)

class ThemeVariablesApp(App):

    BINDINGS = [
        ("d", "toggle_dark", "Toggle dark mode"),
    ]

    def compose(self) -> ComposeResult:
        yield ThemedLabel()
        yield Footer()

    def on_mount(self):
        self.theme = "textual-light"

    def action_toggle_dark(self) -> None:
        self.theme = (
            "textual-dark" if self.theme == "textual-light" else "textual-light"
        )

    def watch_theme(self) -> None:
        self.query_one(ThemedLabel).refresh()


if __name__ == "__main__":
    app = ThemeVariablesApp()
    app.run()

[willmcgugan]

Do you need the watch_theme there? I think if the theme changes it will refresh anyway.

[anschweitzer]

Oh, yes, it still works the same if I just delete watch_theme.