Overwriting theme colors

Anonymous User

I'm using the ESRI Design System Components in an ArcGIS for Javascript 4.19 application. I'm returning an entirely Calcite Components UI for a custom widget. I can't seem to set custom 

 

style="color:#FCF"

 

attributes on the Calcite Components in the widget code itself, and because they are rendered in a shadow DOM, I also can't programmatically access these nodes to modify them later. Is there a recommended way to override '--calcite-ui-text-1' with a custom brand color, for example?

Ideally I would like to apply this override to Accordion headers (.accordion-item-title) only, leaving child button labels and all other Calcite text as they are by default.

Anonymous User

Hi Anthony! I'm not sure what your code looks like exactly, but here's an option to override that CSS property from a container node:

<div style="--calcite-ui-text-1: #FCF;">
  <calcite-accordion>
    <calcite-accordion-item item-title="Accordion Item">Accordion Section Content </calcite-accordion-item>
    <calcite-accordion-item item-title="Accordion Item 2" active>Accordion Section Content </calcite-accordion-item>
    <calcite-accordion-item item-title="Accordion Item 3">Accordion Section Content </calcite-accordion-item>
  </calcite-accordion>
</div>

It follows the same approach we have in our Storybook docs here, which shows how you can override theme colors:
https://esri.github.io/calcite-components/?path=/story/theming-custom-theme--interactive

If you want to programmatically update the font color, you can query the target nodes' shadow roots, in order to style the CSS custom property for that class only:

document.querySelectorAll("calcite-accordion-item").forEach(node => node.shadowRoot.querySelector(".accordion-item-title").style.setProperty("--calcite-ui-text-1", "#FCF"));