Sidebar background color

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?

1 Like


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:


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

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.