How to change background color of PrimeNg's Sidebar

Question

I'm using Sidebar component of PrimeNg 14. By default the background color is white. I want it to be red or anything other than white. I followed the documentation for theming also. Either I'm doing it wrong or something else is required. Please have a look.

HTML:

<p-sidebar [(visible)]="display">
  Sample comtent. <br> Navigation tabs will go here
  <ol>
    <li>home</li>
    <li>contact</li>
    <li>about us</li>
    <li>other controls</li>
  </ol>
</p-sidebar>

I tried this:

<p-sidebar [(visible)]="display" [style]="{background: 'rgb(33,3,63);'}">
...

also this:

<p-sidebar [(visible)]="display" styleClass="p-sidebar-sm">

with

.p-sidebar-sm {
  background: rgb(33,3,63);
}

also I tried ng deep scoping:

:host ::ng-deep .p-sidebar-sm {
    .p-sidebar-sm {
        background: rgb(33,3,63);
    }
}

But still no change in color. Please pitch in.

Answer 1

You need to implement PrimeNg theming to customize color.

If not, just override bachground of p-sidebar in style.css

style.css

.p-sidebar {
  background: rgb(33, 3, 63) !important;
}