How to set the switch disabled color and tab pane title color?

[jessebot]

Two quick questions as I finally finish my textual app :D

1. Is there a way to target the color of a switch--slider when it is set to "off"? I want it to be gray when the value is False but a special color when it is not. Currently I set this:

.switch--slider {
  color: rgb(168,253,87);
}

And get this:

2. Is there a way to change the colors of Tab Titles both selected and not? I didn't see any component classes for the TabbedContent, Tabs, or ContentSwitcher widgets.

[davep]

For question 1, something like this should do the trick:

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

class SwitchSliderColourApp(App[None]):

    CSS = """
    Switch > .switch--slider {
        color: red;
    }

    Switch.-on > .switch--slider {
        color: yellow;
    }
    """

    def compose(self) -> ComposeResult:
        yield Switch()

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

[jessebot]

awesome! Thank you!

[davep]

For question 2, the tabs can include Rich markup:

from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, TabPane, Label
from itertools import cycle

class TabColourApp(App[None]):

    def compose(self) -> ComposeResult:
        colours = cycle(["red", "green", "blue"])
        with TabbedContent():
            for n in range(10):
                colour = next(colours)
                with TabPane(f"[{colour}]Tab {n}[/]", id=f"tab-{n}"):
                    yield Label(f"This is tab {n}")

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

[jessebot]

Ok, I finally got around to testing this one. First of all, thank you for always being so fast with your responses! :)

This mostly works, but it does not dim the tab title when it not selected. It does add bolding when selected and removes it when not selected, but is there a way to control the dimming or color when the tab is not selected?

Also, is there a way to change the color of the underline for the selected tab?

[davep]

but is there a way to control the dimming or color when the tab is not selected?

I don't believe there's a direct interface for doing that, but with a little bit of CSS trickery it should be possible:

from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, TabPane, Label
from itertools import cycle

class TabColourApp(App[None]):

    CSS = """
    Tab.red {
        color: red 50%;
    }
    Tab.red.-active {
        color: red;
    }

    Tab.green {
        color: green 50%;
    }
    Tab.green.-active {
        color: green;
    }

    Tab.blue {
        color: blue 50%;
    }
    Tab.blue.-active {
        color: blue;
    }
    """

    def compose(self) -> ComposeResult:
        with TabbedContent():
            for n in range(10):
                with TabPane(f"Tab {n}", id=f"tab-{n}"):
                    yield Label(f"This is tab {n}")

    def on_mount(self) -> None:
        colours = cycle(["red", "green", "blue"])
        for n in range(10):
            self.query_one(f"Tab#tab-{n}").add_class(next(colours))

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

Also, is there a way to change the color of the underline for the selected tab?

Again, there's no direct method of doing that, but Tabs internally uses a widget called Underline, which you could control with CSS too. Note that because this isn't documented it's not impossible (although unlikely) that it could change or go anyway (not the Tabs widget, just the way it's constructed). So extending the above example:

from textual.app import App, ComposeResult
from textual.widgets import TabbedContent, TabPane, Label
from itertools import cycle

class TabColourApp(App[None]):

    CSS = """
    Tab.red {
        color: red 50%;
    }
    Tab.red.-active {
        color: red;
    }

    Tab.green {
        color: green 50%;
    }
    Tab.green.-active {
        color: green;
    }

    Tab.blue {
        color: blue 50%;
    }
    Tab.blue.-active {
        color: blue;
    }

    Underline > .underline--bar {
        color: yellow;
        background: pink;
    }
    """

    def compose(self) -> ComposeResult:
        with TabbedContent():
            for n in range(10):
                with TabPane(f"Tab {n}", id=f"tab-{n}"):
                    yield Label(f"This is tab {n}")

    def on_mount(self) -> None:
        colours = cycle(["red", "green", "blue"])
        for n in range(10):
            self.query_one(f"Tab#tab-{n}").add_class(next(colours))

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

Note that you might want to take the :focus pseudoclass into account too, but hopefully the above is enough to get you going.

[jessebot]

finally going to test this today, thank you! Update: This worked! 🎉