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 · Accepted solution]

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"));

[Anonymous User]

Thank you so much! After quick tests both methods look great places to start. Much appreciated.