In a few days, I will merge this PR in core that makes a change to how plugin stylesheets are compiled. The change affects SCSS color variables used in plugin stylesheets. The tl;dr is that they need to be replaced with CSS custom properties. Most plugins are already updated, and in many cases, this is a simple change, the SCSS variable needs to be replaced with a CSS custom property:
- background-color: $primary-low;
+ background-color: var(--primary-low);
The guide at Updating themes and plugins to support automatic dark mode has more examples and also shows how to handle more complex color transformations. (That guide should be all that plugin authors need to ensure their styles will work correctly.)
If you are wondering why we are making this change, read on.
Previously, core and plugin stylesheets were being compiled per theme in order to include the theme’s color scheme wherever SCSS color variables were used. This meant that a site with many themes (or a multisite environment) would take a long time to precompile because it would have to multiply the number of core and plugin stylesheets with the number of active themes in order to cover all the necessary combinations.
Since August 2020, and to support automatic dark mode switching, we added a separate color definitions stylesheet which stores the color variables as CSS custom properties. This change allowed us to switch color schemes on the fly, but it also abstracted colors out of most stylesheets. Thanks to the magic of CSS custom properties, we can now reference colors everywhere (core, plugins, themes) without having to load each theme when the stylesheet is compiled.
Over the past few months, we have been converting all plugins to use CSS custom properties. The vast majority of Discourse plugins are now up to date, but there is probably the odd plugin out there that still uses SCSS variables for colors and it will need to be updated.
