# Theme component color definitions broken

**URL:** <https://meta.discourse.org/t/theme-component-color-definitions-broken/181389>\
**Category:** Bug\
**Created:** [February 28, 2021, 3:23pm UTC](https://meta.discourse.org/t/theme-component-color-definitions-broken/181389 "2021-02-28T15:23:46Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![fuzzyk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/fuzzyk/32/129208_2.png) [@fuzzyk](https://meta.discourse.org/u/fuzzyk)\
**Post date:** [February 28, 2021, 3:23pm UTC](https://meta.discourse.org/t/theme-component-color-definitions-broken/181389/1 "2021-02-28T15:23:46Z")

</div>

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):

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

```

```scss
$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:

```scss
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.

---

_[View the full topic](https://meta.discourse.org/t/theme-component-color-definitions-broken/181389)._