A modular way for widget styling and themes

[imneedle]

Looking for a modular way for styling widgets and themes

Hello. I am currently trying to figure out a good way to have modular Textual CSS for my Textual application.

The current project structure would look something like this:

├── app.py
├── __init__.py
├── __main__.py
├── screens
│   ├── screen1.py
│   ├── screen2.py
│   └── screen3.py
└── widgets
    ├── widget1.py
    ├── widget2.py
    ├── widget3.py
    └── widget4.py

The current problems

Separating the CSS from the source files

One "problem" is that I currently inlining all my CSS in the widgets and the app via the DEFAULT_CSS variable.

Ideally, I would like to have something like in most web applications where the structure would be something like:

├── src/  # all source code files
│  ├── app.py
│  ├── __init__.py
│  ├── __main__.py
│  ├── screens
│  │   ├── screen1.py
│  │   ├── screen2.py
│  │   └── screen3.py
│  └── widgets
│       ├── widget1.py
│       ├── widget2.py
│       ├── widget3.py
│       └── widget4.py
└── static/  # all tcss files
    ├── app.tcss
    ├── screens
    │   ├── screen1.tcss
    │   ├── screen2.tcss
    │   └── screen3.tcss
    └── widgets
        ├── widget1.tcss
        ├── widget2.tcss
        ├── widget3.tcss
        └── widget4.tcss

And then inside src/screens/screen1.py, i would have CSS_PATH = "/static/screens/screen1.tcss".

I have read the documentation and have looked at some textual projects, but people usually tend to inline the CSS with the DEFAULT_CSS class var...

Additionally, there is no way to refer to the root path of the project like /static/... as that would look for files at the root of your OS. Using something like CSS_PATH = "../../../static/screens/screen1.tcss" is too difficult to maintain...

Is it possible to have a structure like this ?

Sharing CSS variables

I am also struggling to set up my themes for the application. For now, I want a dark mode and light mode theme.

To do so, I would like to define my own CSS variables, perhaps:

/* Inside root.tcss file ? */

$my-primary-light: #ebdbb2;
$my-primary-dark: #282828;

And then in my other CSS files, I can refer to those variables as:

/* Inside screens/screen1.tcss */

.screen1 {  /* selector for some element on the screen */
   color: $my-primary-dark;

   &:light {
      color: $my-primary-light;
   }
}

My idea for this want to create a RootWidget class, that inherits from Widget, and set SCOPED_CSS to False, and define the variables on that RootWidget. But that didn't work, and then all sub widgets that inherited from RootWidget also had their SCOPED_CSS to False, which is not ideal...

How could I implement a theme variable structure like this ?

[TomJGooding]

Is it possible to have a structure like this ?

CSS_PATH is only available for the App and Screen classes, so I'm afraid the short answer is no. I think there's a feature request knocking around in the issues to also add this to Widget, but I'm not sure if there are plans to implement this.