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

You can’t override core variables in theme CSS at the moment, related request: [image] Override global Sass variables from theme Development 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 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.

EDIT: does not work (yet) You can override the SCSS variables instead. app/assets/stylesheets/common/foundation/variables.scss 030e322a3 $primary-very-low: dark-light-diff($primary, $secondary, 97%, -80%); $primary-low: dark-light-diff($primary, $secondary, 90%, -65%); $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%); $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%); $primary-high: dark-light-diff($primary, $secondary, 30%, -10%); //header_primary $header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -65%); $header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -20%); $header_primary-high: dark-light-diff($header_primary, $secondary, 20%, 20%); //secondary $secondary-low: dark-light-diff($secondary, $primary, 70%, -70%); $secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%); $secondary-high: dark-light-diff($secondary, $primary, 30%, -35%); //tertiary $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%); $tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%); $tertiary-high: dark-light-diff($tertiary, $secondary, 20%, -25%); This file has been truncated. show original

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.

Override programmatic color generation

Product Support

awesomerobot (Kris) November 25, 2019, 5:10pm 6

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

Topic		Replies	Views
Override global Sass variables from theme Development	5	3232	November 25, 2019
Use Discourse Core Variables in your Theme Developer Guides how-to , theme-guides	0	12415	January 9, 2018
Override values for auto-generated color variables Announcements	0	2132	November 25, 2019
Challenges creating a custom color palette Development	8	445	January 29, 2025
How do colors work and how to change them? Product Support ux	4	424	March 20, 2025

Override programmatic color generation

Related topics