topic Change the color of ArcGISLayerList header background? in ArcGIS JavaScript Maps SDK Questions

Change the color of ArcGISLayerList header background?

ColleenDixon — Wed, 04 Dec 2024 21:02:20 GMT

We are using an ArcGISLayerList widget which uses calcite-flow / calcite-flow-item under the hood with a calcite-panel in the calcite-flow-item.

I would like to change the header background to match our UI:

The problem I am running into is:

1. header is inside the shadowDom so I can't directly style this through CSS

2. The var used for the header background is the same var used for the entire background

I would like it to look like this:

Here is the header slot nested in several shadow-doms that I cannot penetrate with CSS:

And setting the var --calcite-color-foreground-1 to green gives me this:

I am trying to come up with the least hacky solution possible to prevent incurring techical debt when classes and nesting changes, but I am open to any suggestion 🙂

Re: Change the color of ArcGISLayerList header background?

Sage_Wall — Wed, 04 Dec 2024 22:54:23 GMT

Hi @ColleenDixon with the introduction of web components into the API situations like these are becoming more common. I came up with this solution but it may have other unintended consequences ( or maybe they will be happy surprises ) because it changes the background color for all calcite-flow elements. Thanks for bringing this up hopefully we can improve the ability to style things in the future.

https://codepen.io/sagewall/pen/raBxOLy

Re: Change the color of ArcGISLayerList header background?

Sage_Wall — Wed, 04 Dec 2024 23:42:42 GMT

@ColleenDixon I made a mistake. That first solution will work next release at 4.32. This is a less elegant solution that would work at 4.31

https://codepen.io/sagewall/pen/MYgKaqo

Re: Change the color of ArcGISLayerList header background?

ColleenDixon — Wed, 11 Dec 2024 03:54:46 GMT

That worked for me, thank you!

Did have some unintended consequences a few other places like the info window but I can try and work around those