Better way to provide dark mode for every addon
Is your feature request related to a problem? Please describe.
@WorldLanguages recently ported some editor dark themes. Currently the addon overrides CSS from other addons, which is not good for multiple reasons:
-
The order in which addons are loaded is important, which might cause problems with circular dependencies (which are avoidable and not a good practice anyway but it's better if addon developers don't need to care about that).
-
Addons should be independent of each other, i.e. when making an addon one shouldn't need to change other addons. Currently the dark mode addon needs to be changed every time another addon wants to support dark mode.
Describe the solution you'd like
Addons would reference the CSS variables set by dark mode in their own userstyles.
Describe alternatives you've considered
Of course it could stay the way it is, but then addon development would be more complicated. Or there could be a function in the addon API that would load a userstyle and another function that would check if an addon is enabled so it would be possible to inject userstyles dynamically just like you can import() userscripts.
Additional context
I will try to implement this myself if @WorldLanguages agrees.
Note that the solution I suggested doesn't allow addons to provide multiple different dark mode userstyles.
I'm not fully convinced. Maybe because I just ported editor dark modes (and not website ones), where there's a lot more styles, but less addons adding UI to it. I fail to see how this helps, here's an example: the colorful context menus addon. We of course don't want the context menus to be dark if both the colorful context menus, and editor dark mode addons are enabled. So I simply made colorful context menus more important by putting it at the bottom of the addons.json list. Using this, how would that work? The colorful context menus doesn't care if dark mode is enabled or not, it doesn't change anything for it. So now, the dark mode addon needs to check whether colorful context menus is enabled, identify those context menus (not all context menus are colored, only right-click block ones), and not apply dark mode styles to them. To detect those context menus, the dark mode addon would need a userscript. Doesn't sound good to me. Another point: this way of doing dark mode also means dark mode is applied to third party extensions like Scratch Developer Tools by griffpatch, even if it's loaded as an extension, and not as an addon. If that wasn't the case, there would be a white rectangle in the middle of the dark editor.
This is now possible using CSS variables.
Wow, this is old. @mxmou Could you clarify what you'll be working on? It looks like this was already implemented. Is this issue to track changing CSS on every addon so it always uses this pattern?
Is this issue to track changing CSS on every addon so it always uses this pattern?
Yes - I'll update the issue description.
Addons would reference the CSS variables set by dark mode in their own userstyles.
Do we have a list of addons that don't do this yet?
There's now a dark mode CSS example in the docs: https://scratchaddons.com/docs/develop/userstyles/#accessing-addon-settings-from-css