ScratchAddons icon indicating copy to clipboard operation
ScratchAddons copied to clipboard

Better way to provide dark mode for every addon

Open mxmou opened this issue 5 years ago • 9 comments

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.

mxmou avatar Sep 13 '20 11:09 mxmou

Note that the solution I suggested doesn't allow addons to provide multiple different dark mode userstyles.

mxmou avatar Sep 13 '20 11:09 mxmou

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.

WorldLanguages avatar Sep 13 '20 16:09 WorldLanguages

This is now possible using CSS variables.

mxmou avatar Sep 05 '22 16:09 mxmou

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?

WorldLanguages avatar Sep 05 '22 22:09 WorldLanguages

Is this issue to track changing CSS on every addon so it always uses this pattern?

Yes - I'll update the issue description.

mxmou avatar Sep 06 '22 06:09 mxmou

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?

WorldLanguages avatar Mar 01 '23 22:03 WorldLanguages

There's now a dark mode CSS example in the docs: https://scratchaddons.com/docs/develop/userstyles/#accessing-addon-settings-from-css

WorldLanguages avatar Sep 03 '23 23:09 WorldLanguages