Dark mode toggle in a stacked screen doesn't cause mode switch in other screens

[davep]

Initially reported by @learnbyexample over in discussions, if dark mode is toggled inside a screen, other screens on the stack don't refresh as you'd expect.

Consider this code:

from textual.app        import App, ComposeResult
from textual.containers import Vertical
from textual.widgets    import Header, Footer, Label, Button
from textual.screen     import Screen
from textual.binding    import Binding

class Child( Screen ):

    def compose( self ) -> ComposeResult:
        yield Header()
        with Vertical():
            yield Label( "This is the child screen" )
            yield Button( "Close Me" )
        yield Footer()

    def on_button_pressed( self, _: Button.Pressed ) -> None:
        self.app.pop_screen()

class Main( Screen ):

    def compose( self ) -> ComposeResult:
        yield Header()
        with Vertical():
            yield Label( "This is the main screen" )
            yield Button( "Show Child" )
        yield Footer()

    def on_button_pressed( self, _: Button.Pressed ) -> None:
        self.app.push_screen( Child() )

class DarkToggleTest( App[ None ] ):

    BINDINGS = [
        Binding( "d", "app.toggle_dark", "Toggle Light/Dark" ),
    ]


    CSS = """
    Vertical {
        align: center middle;
    }
    """

    def on_mount( self ) -> None:
        """"""
        self.push_screen( Main() )

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

If you run it up and press the "Show Child" button, then press d to toggle dark mode, then press the "Close Me" button, you'll notice that the "parent" screen is still in dark mode. Further, if you then press d you'll notice that nothing happens (because then that screen is switching to dark mode).

When watching a change to dark mode we should refresh the current screen but also alert other screens in the stack that they need to refresh when they become shown.

[willmcgugan]

Suspect this is fixed. Needs confirmation.

[learnbyexample]

Checked with Textual version 0.20.1 - the test app mentioned in the discussion seemed stable with theme switches. Then checked with my original app where I had the issue, and seems there are still issues. Here's a sample video:

theme_toggle_screens.mp4

App code: https://github.com/learnbyexample/TUI-apps/tree/main/PyRegexPlayground

Can be installed using pip install regexplayground

Also, what is intended behavior? Each screen will retain the theme it was left in previously? I'd be happy all the screens having a uniform value. So, when switching to a screen, apply the current app theme without even having to check what was the last known value.

[willmcgugan]

I would expect the dark switch to impact every screen.

[davep]

By the looks of things this comes down to App.refresh_css only refreshing the App, which in turn will only refresh the active screen and not other screens in the stack.

[github-actions]

Don't forget to star the repository!

Follow @textualizeio for Textual updates.

[davep]

Will be fixed by #2339 in the next release.