In a discussion titled ‘Functions and Variables’ under the Support category, BlackKnob asked whether it’s possible to access advanced functions and variables (like $primary-low or dark-light-choose()) from Discourse’s variables.scss in theme customization. While basic variables like $primary and $secondary are automatically available, more complex ones are not injected by default. Johani confirmed that importing the variables file directly — using @import "common/foundation/variables" — is the correct solution. They clarified that this is not an overkill, as these imports do not bloat the final CSS sent to the client. For further details, Johani referenced a meta.discourse.org guide explaining how to properly use Discourse’s core variables in themes.
Is it possible to get access to functions and variables from Discourse variables.scss?
When I edit my theme, I can reference $primary, $secondary etc.
$primary-low or dark-light-choose() are not available though.
Would adding @import "./variables"; to my theme be an overkill?
Yes!
The short answer is because $primary, $secondary etc are injected in by Discourse while the more complex variables are not.
And so, you’re correct, you’d have to import them first.
I use
@import "common/foundation/variables"
The long answer is here:
No, it’s not an overkill because they will not be a part of the compiled CSS sheet sent to the client.