# Color palettes loading incorrectly with 2.7.0.beta5
**URL:** https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223
**Category:** Bug
**Created:** [March 14, 2021, 5:32pm UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223 "2021-03-14T17:32:30Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 14, 2021, 5:32pm UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/1 "2021-03-14T17:32:31Z")
Updated to 2.7.0.beta5 this morning and lots of colors had changed. Looks like the Color Palette isn’t being read correctly and the default color palette that you get when you click on New Palette is being used instead. The two themes below use two different color Palettes, but both end up with the Discourse “New Color Palette” → Base palette: Light defined in the first line of the CSS
Example 1:
This is the theme’s Color Palette:
Here is the first line of the css
```plaintext
$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;
```
Example 2:
This is the theme’s Color Palette:
Here is the first line of css
```plaintext
$primary: #222222 !default; $secondary: #ffffff !default; $tertiary: #0088cc !default; $quaternary: #e45735 !default; $header_background: #ffffff !default; $header_primary: #333333 !default; $highlight: #ffff4d !default; $danger: #e45735 !default; $success: #009900 !default; $love: #fa6c8d !default;
```
If I start with a blank new theme and add a palette, it works as expected, but for my existing themes, the Default Light Palette gets loaded instead of the Palette that is assigned.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 14, 2021, 7:18pm UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/2 "2021-03-14T19:18:42Z")
So far the only way I can find around this is to manually add the sass color variables I want to each theme and component.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 15, 2021, 8:54pm UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/4 "2021-03-15T20:54:50Z")
I’m unable to reproduce this issue… if you change the color palette on an existing theme, does it remain incorrect?
---
### Author:  [@gkln](https://meta.discourse.org/u/gkln)
#### Post date: [March 16, 2021, 7:06pm UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/5 "2021-03-16T19:06:58Z")
It seems we have the same issue. Updated to 2.7.0.beta5 ([6c57f6f49d](https://github.com/discourse/discourse/commits/6c57f6f49d25141ca86b27bcbcfc11477ba1f705)) and the color scheme was no longer applied in our theme component.
We use:
```css
#meta-links {
background-color: $header_background;
}
```
but the background color was `#fff` instead of the color defined in the color scheme.
I tried:
- re-assigning the color scheme to the theme
- copying the color scheme and assigning the copy to the theme
- re-assigning the theme component to the theme
but it did not seem to work. The current workaround is to manually set the color in the CSS.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 16, 2021, 11:56pm UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/6 "2021-03-16T23:56:54Z")
It seems like what’s happening is that it loads the correct palette for the base theme, but not for any of the components. So the parts of the page that don’t use a component have the correct colors, but the parts that rely on a component load the default Discourse “Light” palette instead of using the palette that’s assigned to the Theme.
From Developer Tools
color\_definitions.scss has the correct palette
desktop.scss has the correct palette
theme\_174.scss which is a component, uses the default Light palette
theme\_171 is a component that consists of only these lines of css in common.css and nothing else
```plaintext
#banner {
margin: auto 20px;
background-color: $primary-low;
max-width: 880px;
border: 1px solid #999 ;
}
```
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 17, 2021, 1:17am UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/7 "2021-03-17T01:17:48Z")
Thanks @gkln and @smrtey for the additional details… one thing to try is to disable components one by one to see if that changes anything… It’s possible there’s a silent error that’s not being called out somewhere, and that may be breaking CSS for components.
---
### Author:  [@smrtey](https://meta.discourse.org/u/smrtey)
#### Post date: [March 17, 2021, 2:23am UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/8 "2021-03-17T02:23:18Z")
It seems to happen with any component that uses scss color variables. Everything works fine if I manually add the colors to every individual component:
```plaintext
$primary: #22262a !important; $secondary: #fefefe !important; $tertiary: #2572e4 !important; $quaternary: #518ee9 !important; $header_background: #1550a7 !important; $header_primary: #fcfcfc !important; $highlight: #9edaf5 !important; $danger: #ff7114 !important; $success: #85cc54 !important; $love: #de0100 !important;
```
but that is far from an ideal solution. I don’t see how I can troubleshoot this. There is absolutely no way I have the capacity to figure out what could make Discourse load a different color palette.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 18, 2021, 3:39am UTC](https://meta.discourse.org/t/color-palettes-loading-incorrectly-with-2-7-0-beta5/183223/12 "2021-03-18T03:39:41Z")
ok, @pmusaraj took a closer look and found the bug… it has been fixed here:
[https://github.com/discourse/discourse/pull/12423](https://github.com/discourse/discourse/pull/12423)
…so updating your sites again should fix it.
If these are theme components you’ve built, we recommend updating them to use CSS custom properties instead of our SCSS variables. The switch means you can use automatic dark mode, and makes color overrides easier. More details here:
> [@Update themes and plugins to support automatic dark mode](https://meta.discourse.org/t/updating-themes-and-plugins-to-support-automatic-dark-mode/161595):
>
> Previously, all colors in Discourse were stored as SCSS variables. To support [automatic dark mode color scheme switching](https://meta.discourse.org/t/automatic-dark-mode-color-scheme-switching/161593), we have converted these colors in core to custom CSS properties. You can easily see the full list in the inspector now: Themes and plugins need to switch all the $color SCSS variables used in stylesheets to the --color CSS property equivalents. In most cases, this is a simple find and replace task: - background-color: $primary-very-low; + background-color: var…