Custom font color suddenly not working

[MaryGraceMcClellan]

I had an accordion item custom coded to have white text, but today out of nowhere the text turned grey. It isn't only the accordion items that this happened to - there are several other elements where the text is displaying gray rather than white and I'm not sure what could have caused it. Has anyone run into a similar issue? 

[RohitSharma-1]

Hello @MaryGraceMcClellan - Could you please share the following information to help us replicate this issue:

• Steps to reproduce this
• URL (where this is being noticed)
• Snapshots (if possible)

[MaryGraceMcClellan]

Hi @RohitSharma-1 - the URL is here: https://westtnplanning.tn.gov/

It seems to be happening anywhere we have accordion items: 

1. On the Project Information page (https://westtnplanning.tn.gov/pages/project-info😞 

2. Planning documents page (https://westtnplanning.tn.gov/pages/planning-documents😞

There are other places this is happening, but here is the basic CSS we've been relying on the preserve the accordion formatting in #2. I don't see anything that has changed in the code: 

  <style>
    body * {
      --calcite-ui-text-1: #ffffff;
      --calcite-ui-text-2: #ffffff;
      --calcite-ui-text-3: #ffffff;
       .accordionButton {
    margin: 0px auto;
 }

  </style>

<div class="col-xs-15" style="width:70%">
          <calcite-accordion appearance="transparent" icon-position="start" scale="l" selection-mode="single" icon-type="chevron" calcite-hydrated="">
            <calcite-accordion-item heading="Quarterly Updates" style="background-color:#8f2f31; color:#ffffff; border-bottom:1px solid #a6a6a6" calcite-hydrated="">
            <div class="panel-body" style="background-color:#fff; color:#4c4c4c;">
              <a href="https://westtnplanning.maps.arcgis.com/sharing/rest/content/items/87d74f2153924bde8555bd6ddf756bb5/data" target="_blank">2024 May Update</a></div>
          </calcite-accordion-item>
        </calcite-accordion>
      </div>

[howardro · Accepted solution]

Try the following:

<calcite-accordion appearance="transparent" icon-position="start" scale="l" selection-mode="single" icon-type="chevron" calcite-hydrated="">
<calcite-accordion-item heading="Quarterly Updates" style="background-color:#8f2f31; color:#ffffff; border-bottom:1px solid #a6a6a6; --calcite-color-text-1:#fff; ;--calcite-color-text-2:#fff; --calcite-color-text-3:#fff;" calcite-hydrated="">
            <div class="panel-body" style="background-color:#fff; color:#4c4c4c;">
              <a href="https://westtnplanning.maps.arcgis.com/sharing/rest/content/items/87d74f2153924bde8555bd6ddf756bb5/data" target="_blank">2024 May Update</a></div>
    </calcite-accordion-item>
</calcite-accordion>

[MaryGraceMcClellan]

That worked perfectly, thank you!! 

[RohitSharma-1]

@MaryGraceMcClellan - Do you have any additional questions?

[MaryGraceMcClellan]

@RohitSharma-1 I don't, thank you for checking in! 

[lmarun]

@RohitSharma: I've been having the same challenge, but when I tried this solution, it did not work for me. 

Please see screenshot for error code.

I should add that I previousy tried both methods here as well, but they did not work either.

Any thoughts?

[AaronKoelker]

@RohitSharma-1 Hi Rohit, not sure if you are still with Esri but it would be really helpful if this solution replaced the information in this Esri "How To" article, which comes up as a top Google result: How To: Edit the Title, Text, and Chevron Colors of the Accordion Menus in ArcGIS Hub