November 23, 2022, 6:51pm
I tried to override the
new border-radius variables with a remote theme but it seems to the core
:root variables are always prioritize. I can override these if I create a theme component in admin. Is there a way to override these with theme? What am I missing?
This tiny change is so useful thanks so much!
Ok it works as expected just my test site joking me.
November 24, 2022, 4:32am
Uh it seems that was not a joke
With remote theme I can only override it if I use
If I use it like this
$border-radius: 2em !important;
Otherwise if I try it like this
Then the core
:root variables are prioritized.
What am I missing?
November 24, 2022, 3:27pm
It’s working when I test it in a theme… the core root gets overruled by theme root, as expected.
Can you show some more info? Where do you define your root? What does your inspector look like?
November 24, 2022, 5:44pm
Thanks for checking this
I tried to add in
scss/custom-variables.scss and import it to the
common.scss. And I tried to add directly to
I just notice now it works if there is no other component (created in admin) assigned to the theme. If I create a component in admin with some css in common section. Then it won’t override the core root variables for me.
It works if the theme has no component or the component Common / CSS is empty.
If I create a component with some Common / CSS and activate it to the theme.
Then it is not working for me.
d-select-body-border-radius are custom.
Thanks for the help!
November 24, 2022, 6:23pm
I see. Very interesting. Thanks for the clear steps.
Will see what I come up with. At the moment I’m sceptical there will be a different solution that the !important you’re already using, but will be good to know how/why this is working like this.
hmm yeah I can repro this… it’s a little strange.
I’ve got a
remote theme and all
common.scss contains is:
this works and I get rounded buttons and other elements:
Once I add a
local theme component that contains CSS, it breaks. I created a local theme component that only contains this in
I get the red background, but the border-radius is gone:
component works fine remotely. I get both the red background and the rounded borders.
@david/ @pmusaraj does this have something to do with the order of how remote and local themes are compiled?
December 8, 2022, 8:34pm
I think it has to do with our magic injection of
variables.scss into every theme CSS file. Now, we have this in
And because we inject that SCSS file into every theme and plugin SCSS file, it gets repeated over and over:
The only way to override it currently is to add the override to the last theme stylesheet, only then it gets output last.
I think we need to move this
:root declaration somewhere global outside of
variables.scss in core.
Aha! thank you so much, I never really processed why those are repeated and just overlooked it completely.
I’ve relocated these to another file so they aren’t repeated, and I confirmed that it solves the problem.
10:01PM - 08 Dec 22 UTC
The variables in `variables.scss` are injected into all theme CSS files so the S
… ASS variables are available. Doing this with CSS custom properties causes situations where they'll unintentionally override intentional overrides.
Moving these to `base.scss` ensures they're only defined once, and can be overridden properly in themes.
More details: https://meta.discourse.org/t/override-border-radius-variables-with-theme/246574/1