change default background color

[LefterisKoumis]

It seems that all components in Design system, like button, fab have a default background color to blue:

--calcite-ui-background #F8F8F8

How can we overwrite the default theme to change the background color to transparent?

For example to change the background color of this fab

 <calcite-dropdown width="m" scale="l" label="Info Widgets" id="info_widgets">
                        <calcite-fab slot="trigger" scale="l" icon="information" id="info" appearance="solid">
                        </calcite-fab>

-----
-----

 by using this that I saw in another posting as a solution but didn't work.

(async () => { 
  await customElements.whenDefined("calcite-dropdown");
  await document.querySelectorAll("calcite-fab").forEach((node) => {
    node.style.setProperty("background-color", "rgb(0, 128, 0)");
  });
})();

[BenElan · Accepted solution]

You can change the CSS Variables specified in this table:

https://developers.arcgis.com/calcite-design-system/foundations/colors/#modes

I suggest reading through the whole Core concepts documentation page, it has some great information!

[LefterisKoumis]

THank you. The CSS Variables link was helpful.