Adding color or background color to a Calcite list item

MarceloRosensaft

Hello,

I have the following block:

 

              <a id="href_RDG_activeSheet">
                <calcite-list-item id="listItem_RDG_activeSheet">
                  <calcite-action slot="actions-end" icon="download-to"></calcite-action>
                </calcite-list-item>
              </a>

 

Where I set the Label of the list-item in the JS script.

I'd like to be able to set the background color and the text color of the list item label but I cannot find how to do that.

Thank you in advance,

Marcelo

FC_Basson

The font color of the "label" attribute of the calcite-list-item is specified by the --calcite-ui-text-1 CSS root variable color.

Try setting the calcite-list-item label like this:

calcite-list-item{
  --calcite-ui-text-1: #f00;
}

 

You can also set the global color property for the framework colors:

:root{
  --calcite-ui-text-1: #f00 !important;
}

"!important" is required to overwrite the default theme colors.

More info here: https://developers.arcgis.com/calcite-design-system/core-concepts/