Theming

<style>   
  --acq-ui-padding: 10px;   
  --acq-button-fg: #fff;   
  --acq-button-hover-fg: red; 
</style>

CSS Variable Name	Description	Default value
`--acq-text-color`	Body text colour	`#000`
`--acq-text-muted-color`	Used for subtitles or notes	`#5a5a5a`
`--acq-text-accent-color`	Used for special text such as links	`#4d4cab`
`--acq-text-error-color`	Used for error messages	`#eb5757`
`--acq-button-fg`	Button foreground colour (text or icons)	`#fff`
`--acq-button-bg`	Button background colour	`#000`
`--acq-button-hover-fg`	Button hover foreground colour	`--acq-button-fg`
`--acq-button-hover-bg`	Button hover background colour	`#5c59c2`
`--acq-button-nested-fg`	Nested button foreground colour	`#424242`
`--acq-button-nested-bg`	Nested button background colour	`#e9e9e9`
`--acq-button-active-fg`	Button active foreground colour	`--acq-button-fg`
`--acq-button-active-bg`	Button active background colour	`#4d4cab`
`--acq-button-disabled-fg`	Disabled button foreground colour	`--acq-button-fg`
`--acq-button-disabled-bg`	Disabled button background colour	`#5a5a5a`
`--acq-button-badge-fg`	Badge foreground colour	`--acq-button-fg`
`--acq-button-badge-bg`	Badge background colour	`#eb5757`
`--acq-panel-fg`	Panel foreground colour	`#000`
`--acq-panel-bg`	Panel background colour	`#fff`
`--acq-panel-accent`	Panel accent colour (tags etc)	`#f2f2f2`
`--acq-slim-heading-fg`	Panel slim heading foreground colour	`#fff`
`--acq-slim-heading-bg`	Panel slim heading background colour	`#828282`

See: font-family for possible values.

CSS Variable Name	Description	Default value
`--acq-font-family-headings`	The font family for the headings.	`'Lato', sans-serif`
`--acq-font-family-body`	The font family for the body text.	`'Lexend', sans-serif`

--acq-ui-padding - The padding between the edge of the viewport and the UI elements.

CSS Variables can be used to style the web component. Defaults are applied within the component, but you can declare overrides in your application. Variables are name-spaced with the --acq- prefix.