I'm working on a "wide" userstyle for GreasyFork and trying to be compatible with popular dark themes. Apparently, there's no sensible way to detect color-scheme (only system preference with dark-color-scheme). And you're using stylus preprocessor which leaves no variables.

Could you add a CSS variable like --pabli-color-scheme: dark or just --color-scheme: dark on :root to your style so I could detect it in my userstyle?

Hi! I've added --color-scheme: dark and --greasyfork-dark-theme-by-pabli: dark.

Are you going to use @container style(--color-scheme: dark){} to detect it or how? (Firefox doesn't support this yet)

If the user enabled "Expose style name" in the stylus options you can detect if the style is enabled:

html:has(> style.stylus[data-name="GreasyFork - Dark Theme"]) body {
background: red;
}

or every style that has words "greasy" and "dark" or "black" in the name:

html:has(> style.stylus[data-name*="greasy" i]:is([data-name*="dark" i], [data-name*="black" i])) body {
background: red;
}

Thanks!

Color scheme detection isn't a crucial part of the userstyle. The user can always switch from autodetection to explicit light/dark option. I just want the style to work correctly out of the box.

The plan is to use the @container at-rule, yes. It's the closest thing to the if statement I can use without switching to one of the terribly broken 10-year-old preprocessors like Less and Stylus-lang. With how much I rely on modern CSS features like crazy color expressions and nested selectors, I'm just not mentally ready to deal with outdated preprocessors breaking every basic feature and requiring turning everything into an escaped string, though admittedly I do miss cycles and functions.

Stylus doesn't have any plans to support non-broken preprocessors, as far as I know (and frankly, I'm not even sure it's feasible to support something like PostCSS), and my request to add something like @-stylus-if at-rule to pure CSS was ignored, so there aren't any good options.

Sadly, it does mean that Firefox users can't access the full functionality of the userstyle. But its userbase is close to zero, so it's a price I can accept.

I should probably mention in the description of the userstyle that Firefox isn't well-tested and some features may malfunction... Hm, are the @compatible/@compatible metadata keys GreasyFork-only? Might as well add those.

Exposing style names didn't come to my mind for style detection. Thanks for the hint. It's actually much better, at least for color scheme detection specifically, because it works on the :root, unlike @container.