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

Мне это действительно нужно.

У меня есть основной цвет по умолчанию: 4d238c. Проблема в том, что цвет для $primary-secondary, который генерируется (#a179de), не соответствует рекомендациям по доступности, поэтому мне нужно сделать его темнее.

Кажется, что изменять его во всех местах, где система использует вторичный цвет, — это трудоёмкий процесс, тогда как я мог бы просто переопределить $primary-secondary: red;

6

Теперь вы можете переопределять автоматически сгенерированные переменные в удалённой теме: Override values for auto-generated color variables