topic Re: Help Updating Header Color and Properties for Calcite Popover in Calcite Design System Questions

Help Updating Header Color and Properties for Calcite Popover

JasonBartling1 — Tue, 07 Oct 2025 16:33:04 GMT

I've been messing with the CSS on a test application for a while but can't quite seem to figure out how to update the color just for the header div portion of the calcite popover. I see that there is a css variable for --calcite-popover-background-color, but that updates the complete popover and not just the header section.

In my searching I also came across the concept of configuring a custom theme, which sounds good, but I could not find any property there either to do exactly what I want. I also tried using custom css for the header class of the popover, but it also appears to do nothing. Does anyone know what CSS can be used to update the parts of a calcite popover like just the header background, border, and close button?

Here is a simple codepen https://codepen.io/windowslover/pen/KwVWBWW?editors=1100 that I have been working on in my testing. Any help is appreciated! Thanks.

Re: Help Updating Header Color and Properties for Calcite Popover

TLombardi — Wed, 08 Oct 2025 15:31:32 GMT

Hey @JasonBartling1 , I was just working on styling a popover myself. I think if you use something other than a <p> tag, it will work as expected.

<calcite-popover class="custom-example-theme" heading="About this data" label="About this data" reference-element="popover-button" closable>
<calcite-block description="This data was collected over a 24 hour period during which 27 volunteers surveyed the local area and collected and reported on sightings of non-native Blackberry."/>
</calcite-popover>

calcite-popover {
--calcite-popover-background-color: #63778c;
--calcite-popover-text-color: white;
}

Though my frustration is that the --calcite-popover-text-color doesn't adjust the "X" icon color when the component is set as "closable".

Re: Help Updating Header Color and Properties for Calcite Popover

KittyHurley — Wed, 08 Oct 2025 15:54:42 GMT

@JasonBartling1 @TLombardi Since Popover (and other components) use Action for the close button, you can also set the close button's styling using Action's styles, like so:

#example-popover { --calcite-popover-background-color: var(--calcite-color-brand); --calcite-popover-corner-radius: 0.5rem; --calcite-popover-text-color: var(--calcite-color-text-inverse); --calcite-action-text-color: var(--calcite-color-text-inverse); }

Here's a CodePen showing the behavior: https://codepen.io/geospatialem/pen/MYKmJvo

Re: Help Updating Header Color and Properties for Calcite Popover

JasonBartling1 — Wed, 08 Oct 2025 15:55:58 GMT

@TLombardi Do you mean to change the <p> tag under the calcite-popover to something else like a <div>? I just tried that and it didn't seem to help. The only way I was able to find, after a lot of searching, to change all the elements I wanted in the header was to modify the shadow dom with javascript. This probably isn't a recommended approach, but it worked for me. I updated the codepen above and this is the javascript I used:

Re: Help Updating Header Color and Properties for Calcite Popover

JasonBartling1 — Wed, 08 Oct 2025 20:46:54 GMT

Thanks! This is helpful! It isn't quite granular enough to change just the header background color of the popover window, but still useful.