Override global Sass variables from theme

Development

AI-generated summary

Override global Sass variables from theme

The discussion revolves around the ability to override global Sass variables from a theme in Discourse. Currently, themes can define Sass variables, but they are local to the theme’s stylesheets and do not globally override variables.

LeoMcA suggests adding a scope option to allow themes to specify global variables, which would be useful for theme development, especially for colors. However, sam raises a concern about potential conflicts between multiple theme components trying to change the same variable.

LeoMcA proposes an alternative solution by extending the color_schemes feature, which would allow themes to define custom color schemes. erlend_sh shares a related discussion about turning off color schemes in the admin area.

Phillip_Rooney expresses a need for this feature to override the automatically generated $primary-secondary color variable, which doesn’t meet accessibility guidelines.

awesomerobot finally announces that it is now possible to override automatically generated variables in a remote theme, linking to a relevant discussion.

1

Continuing the discussion from Cleaning up our color palette :artist_palette::

Themes already have the ability to define sass variables:

However, from personal testing, these seem to be local to the theme’s stylesheets, and won’t globally override a variable.

If they did it would prove incredibly useful for theme development, as it would allow the theme to specify exactly what colour should be used as $primary-medium, $tertiary-low and so on - rather than have it automagically calculated off of the colour scheme.

Perhaps there should be a scope option, something like this:

"fields": {
  "primary-medium": {
    "value": "#012345",
    "type": "color",
    "scope": "global"
  }
}
2

Maybe, but what happens if multiple theme components are fighting for such a change, who wins?

3

As a wise man once said:

I can’t see much use for this beyond colours, and I can’t ever see a user wanting to enable two themes both of which change the color scheme.

Perhaps though this makes more sense as an extension to color_schemes, which can only be enabled individually:

"color_schemes": {
  "Extened Scheme": {
    "primary": "000",
    "primary-medium": "666",
    "primary-low": "aaaaaa"
  }
}
4

Related:

5

Ich brauche das wirklich.

Ich habe eine Standard-Hauptfarbe: 4d238c. Das Problem ist, dass die für $primary-secondary generierte Farbe (#a179de) die Barrierefreiheitsrichtlinien nicht erfüllt, also muss ich sie dunkler machen.

Es scheint mühsam zu sein, sie an allen Stellen zu ändern, an denen das System die Sekundärfarbe verwendet, wenn ich einfach $primary-secondary : rot überschreiben könnte.

6

Sie können nun die automatisch generierten Variablen in einem Remote-Theme überschreiben: Override values for auto-generated color variables