Theme component color definitions broken

bug
1

I cannot get color definitions in theme components to load. They simply never arrive in the browser.

I tried to migrate to color definitions because my themes broke with the recent 2.7.0.beta4 upgrade.

I have the following color definitions in multiple theme components (hence multiple code blocks):

:root {
    --my-post-name-color: #{dark-light-diff(#1e79a7, $secondary, 0%, 25%)};
}

$my-background: #ABDAFB;
$my-border: #38abe3;

:root {
    --my-quote-background: #{dark-light-choose($my-background, $primary-low)};
    --my-quote-border: #{dark-light-choose($my-border, blend-primary-secondary(5%))};
}

When I try to use the colors I define, the browser only reports that they are unknown and everything is broken.

One usage is like this:

aside.quote .title  {
    background-color: var(--my-quote-background);
    border-left: 5px solid var(--my-quote-border);
}

aside.quote blockquote {
    background-color: var(--my-quote-background);
    border-left: 5px solid var(--my-quote-border);
}

What am I doing wrong?

The only non-default colors I can see are from the BBCode plugin.

2 Likes
2

Upon further investigation I found that theme component color definitions changes do not propagate into a theme. They can be made to propagate (once) by changing the theme’s own color definitions.

Adding or removing theme components also does not update the effective color definitions.

Looks like a bug?

3 Likes
4

Yes, confirmed, it is a bug, sorry about that, will fix it shortly.

5 Likes
5

https://github.com/discourse/discourse/commit/bfa3e24e48ef7eb7d4c2c31e2f9d71e436e1f25c should fix this.

4 Likes