topic change default background color in Calcite Design System Questions

change default background color

LefterisKoumis — Fri, 03 Feb 2023 00:01:19 GMT

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

Re: change default background color

BenElan — Fri, 03 Feb 2023 00:17:57 GMT

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!

Re: change default background color

LefterisKoumis — Fri, 03 Feb 2023 00:49:49 GMT

THank you. The CSS Variables link was helpful.