Sidebar background color

Product Support

AI-generated summary

Sidebar background color: MarcP asked about changing the sidebar background color, which remains the same despite changes to the color scheme. Don replied that the color can be changed with a theme component using the CSS code .sidebar-wrapper { background-color: var(--primary-very-low); }. MarcP found the CSS code but wanted to link the sidebar color to a color scheme, specifically the Solarized Light theme, which has different light/dark theme colors. After experimenting, MarcP marked the question as solved, thanking Don for his help.

1

I was playing around with color schemes, and I couldn’t seem to find what color the sidebar is using. No matter what I do, the color always stays the same.

Does anyone notice the same or is this something that needs to be done with custom CSS?

2

Hello,

This is not in the color palette by default but you can change it with a theme component.

This is the sidebar background color.

.sidebar-wrapper {
  background-color: var(--primary-very-low);
}

You can find it here :arrow_down_small:

Screenshot 2023-02-28 at 22.18.54
Screenshot 2023-02-28 at 22.18.54835×231 47.4 KB

3

I found that CSS code, but I if you select Solarized Light on Meta, there is definitely a difference between the light/dark theme in the sidebar colors. How can we make such changes and link them to a color scheme?

edit - I see, it’s derived from --primary-very-low but this in some situations creates some not-so-nice combinations. I’ll play around with it.

edit 2 - It’s funny. My Meta theme: Light with Color Scheme: Solarized Light. I take the primary color code by inspecting meta: #002B36, when I enter this in my color scheme, the accents become “default Discourse” blue and not #F0ECD7 as expected.

edit 3 - initial question has been answered, marked as solved. Thanks again CSS-god @dodesz