Override programmatic color generation

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

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

5 Likes

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.

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

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.

7 Likes

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

This is now possible, check out Override values for auto-generated color variables

5 Likes