Question: I want to change my panel menu color to black.

here is my HTML code.

```
<p-panelMenu styleClass="font-bold text-xs m-0 w-11" [model]="items" [multiple]='false'></p-panelMenu>

```

Answer: 
There are multiple ways to solve your problem

1. You can configure PrimeNg to use a dark theme. [Described here](https://www.primefaces.org/primeng/showcase/#/setup) (Changes all components, so probably not the solution)
2. You can also customize the PrimeNg theme to suite your needs. I don't know how tho, but it is probably described on their documentation.
3. You can override the CSS with ::ng-deep.

[Here is an example I made on stackblitz](https://stackblitz.com/edit/primeng-panelmenu-demo-jgyyxy?file=src/app/app.component.css)

[Screenshot of code and PanelMenu](https://i.stack.imgur.com/6H1jj.png)

```css
/* Headers normal look */

::ng-deep .p-panelmenu .p-panelmenu-header>a {
  background-color: lightblue;
}

/* Header on expanded content */

::ng-deep .p-panelmenu .p-panelmenu-header.p-highlight>a {
  background-color: red;
}

/* Header on hover, but not expanded */

::ng-deep .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled)>a:hover {
  background-color: blueviolet;
}

/* Header on hover, but ALSO Expanded */

::ng-deep .p-panelmenu .p-panelmenu-header.p-highlight:not(.p-disabled)>a:hover {
  background-color: yellow;
}

/* Content (that is expanded/toggled) */

::ng-deep .p-panelmenu .p-panelmenu-content {
  background-color: aquamarine;
}

/* Color of border around eacch each header*/

::ng-deep .p-panelmenu .p-panelmenu-header>a {
  border-color: chartreuse;
}
```

UPDATE: Added styling of text, per request from OPs other answer

```css
/* Header text on hover */

::ng-deep p-panelmenu .p-component.p-panelmenu-header.p-highlight>a {
  color: white;
}

/* Header text normal */

::ng-deep p-panelmenu .p-component.p-panelmenu-header>a {
  color: red;
}

/* Expand icon on contents */

::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-panelmenu-icon {
  color: red;
}

/* icons in content next to text */

::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-text {
  color: green;
}

/* Text */

::ng-deep .p-panelmenu .p-panelmenu-content .p-menuitem .p-menuitem-link .p-menuitem-icon {
  color: blue;
}
```
I could change the Panel Menu background color get help from @FajitasMoose. But I couldn't change the font color in the list menu under the Project Management.

Right now I tried using the below .scss code.

```
::ng-deep .p-panelmenu ul li:nth-child(1) {
    color: blue;
}

```