# Override programmatic color generation

**URL:** https://meta.discourse.org/t/override-programmatic-color-generation/89670
**Category:** Support
**Created:** [June 12, 2018, 9:59am UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670 "2018-06-12T09:59:35Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![helmi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/helmi/32/114772_2.png) [@helmi](https://meta.discourse.org/u/helmi)
#### Post date: [June 12, 2018, 9:59am UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670/1 "2018-06-12T09:59:35Z")

</div>

Hey,

I’m using Discourse for a while but didn’t do much styling yet so bear with me if that question sounds stupid. I’ve used the color schemes to fit my colors but noticed in several places brighter versions of my colors get generated and as a result this doesn’t look good in my case.

Of course I know i can override each css class to its own colors which I partly did but I wonder if I can override this color generation in general somehow.

For example a darkish blue is used a the main color which results in light blue text and lines on the overview page. I’d prefer to use a slightly darker grey in all those places instead. Overriding each class seems like a huge job and isn’t easy to maintain. I’m sure there’s a better way to do that?

Thanks,  
Frank

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [June 12, 2018, 10:04am UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670/2 "2018-06-12T10:04:45Z")

</div>

_EDIT: does not work (yet)_

You can override the SCSS variables instead.

> <https://github.com/discourse/discourse/blob/030e322a399c8b04893047deef7bdeb547e25f11/app/assets/stylesheets/common/foundation/variables.scss#L198-L236>

---

<div class="post-metadata">

### Author: ![helmi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/helmi/32/114772_2.png) [@helmi](https://meta.discourse.org/u/helmi)
#### Post date: [June 12, 2018, 10:58am UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670/3 "2018-06-12T10:58:37Z")

</div>

Thanks, do I just override them in the custom theme css?

I tried with `@import "theme_variables";` on the top of the custom css and copied over the variables and changed them - no success so far.

---

<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: [June 13, 2018, 4:52am UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670/4 "2018-06-13T04:52:19Z")

</div>

You can’t override core variables in theme CSS at the moment, related request:

> [@Override global Sass variables from theme](https://meta.discourse.org/t/override-global-sass-variables-from-theme/68146):
>
> Continuing the discussion from [Cleaning up our color palette artist_palette](https://meta.discourse.org/t/cleaning-up-our-color-palette/61263/18): 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 o…

I think it _could_ be useful to override the core variables, it might save you some work… but I suspect it’s not as much as you’d expect.

Say you want to change $primary-low because you want all post borders to be red. Well, `$primary-low` is also used in 100+ instances that _aren’t_ that border you just wanted to change… so now you still have a bunch of elements you still need to write CSS for anyway. Then you also have situations where `$primary-low: red` is fine when the background is `$secondary` but doesn’t work when the background is `$primary-high`… so you run into some relational issues as well that also need custom CSS.

In theory there’s probably a more useful middle-ground somewhere in our SCSS where we’re taking our small number of core color transformations and inputting them into a much larger set of element variables and/or mixins… and then someone with a little SASS experience can override _those_ and not have to worry as much because they’re more specific.

For example, you’d have definitions like `$post-borders: $primary-low`, `$button-background: $primary-low`, etc… and for the basic admin the core color transformations work the same as always. But now the slightly more advanced admin could say `$post-borders: red` without impacting `$button-background`.

---

<div class="post-metadata">

### Author: ![system](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/system/32/443519_2.png) [@system](https://meta.discourse.org/u/system)
#### Post date: [July 13, 2018, 4:52am UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670/5 "2018-07-13T04:52:20Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

---

<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:10pm UTC](https://meta.discourse.org/t/override-programmatic-color-generation/89670/6 "2019-11-25T17:10:56Z")

</div>

This is now possible, check out [Override values for auto-generated color variables](https://meta.discourse.org/t/override-values-for-auto-generated-color-variables/134374)
