# Override global Sass variables from theme

**URL:** https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146
**Category:** Development
**Created:** [August 16, 2017, 9:57am UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146 "2017-08-16T09:57:47Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![LeoMcA](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/leomca/32/87233_2.png) [@LeoMcA](https://meta.discourse.org/u/LeoMcA)
#### Post date: [August 16, 2017, 9:57am UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146/1 "2017-08-16T09:57:47Z")

</div>

Continuing the discussion from [Cleaning up our color palette 🎨](https://meta.discourse.org/t/cleaning-up-our-color-palette/61263/18):

> [@Cleaning up our color palette artist\_palette](https://meta.discourse.org/t/cleaning-up-our-color-palette/61263/18):
>
> alongside the ability to override those variables from a theme.

Themes already have the ability to define sass variables:

> <https://github.com/discourse/discourse/blob/main/spec/models/remote_theme_spec.rb#L32-L39>

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:

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

```

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [August 16, 2017, 12:54pm UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146/2 "2017-08-16T12:54:15Z")

</div>

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

---

<div class="post-metadata">

### Author: ![LeoMcA](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/leomca/32/87233_2.png) [@LeoMcA](https://meta.discourse.org/u/LeoMcA)
#### Post date: [August 16, 2017, 1:51pm UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146/3 "2017-08-16T13:51:25Z")

</div>

As a wise man once said:

> [@Simplified HTML emails](https://meta.discourse.org/t/simplified-html-emails/62600/18):
>
> I think that is imagining a problem that will, in practice, never exist

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:

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

```

---

<div class="post-metadata">

### Author: ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)
#### Post date: [August 17, 2017, 3:39pm UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146/4 "2017-08-17T15:39:39Z")

</div>

Related:

> [@Request: Turn color schemes off in the admin area](https://meta.discourse.org/t/request-turn-color-schemes-off-in-the-admin-area/58416):
>
> Request: The color schemes should be completely switched off in the admin area or switch to the default. Reason: Many pages use the Color Schemes in combination with Custom CSS to create the desired effects. Since the CSS in the admin area is switched off, it looks in part ugly and has a bad usability.

---

<div class="post-metadata">

### Author: ![Phillip\_Rooney](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/phillip_rooney/32/141202_2.png) [@Phillip\_Rooney](https://meta.discourse.org/u/Phillip_Rooney)
#### Post date: [July 9, 2019, 1:43am UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146/5 "2019-07-09T01:43:58Z")

</div>

I really need this.

I have a default primary colour: 4d238c. The issue is the color for $primary-secondary that is being generated (#a179de) doesn’t pass accessability guidelines, so i need to make it darker,

It seems laborious to change it in all places where the system is using the secondary colour when I could just over write $primary-secondary : red;

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [November 25, 2019, 5:09pm UTC](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146/6 "2019-11-25T17:09:05Z")

</div>

You can now override the automatically generated variables in a remote theme: [Override values for auto-generated color variables](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374)
