Overwriting theme colors

204
2
Jump to solution
06-02-2021 01:26 PM
Anthony-MTFWP
New Contributor III

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.

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
CariPalazzolo
Esri Contributor

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

 

View solution in original post

2 Replies
CariPalazzolo
Esri Contributor

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

 

View solution in original post

Anthony-MTFWP
New Contributor III

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

0 Kudos