# Custom Styling The easiest way to customise the appearance of the widgets is to supply a few options when you initialise the SDK, but you can also override the provided CSS ### Colours Pass an array of 2 colours when calling `stub.init()`. They are used for buttons and charts in order of precedence. ```javascript window.stub.init({ ...options, colours: ['#FF0080', '#00A86B'] }); ``` ### Font Specify a font stack. Make sure the fonts are loaded in your page. ```javascript window.stub.init({ ...options, font: "'Public Sans', Arial, sans-serif" }); ``` ### Empty state images Provide your own illustration to show when no data is available. Supply one image for light mode and one for dark mode. ```javascript window.stub.init({ ...options, emptyImage: { light: 'https://your.site/light.png', dark: 'https://your.site/dark.png' } }); ``` ### Theme The widgets support light and dark themes. Set the `data-theme` attribute on your `` (or ``) element. ```html ... ``` ### CSS overrides The stylesheet defines a number of CSS variables prefixed with `--stub-`. Overriding these lets you tweak colours without editing the source files. ```css :root { --stub-primary: #32333C; --stub-secondary: #8D8E9A; /* many more */ } ``` Every element rendered by the SDK carries the `stub` class. Widgets use additional classes such as `stub-widget`, `stub-modal` and `stub-button`. You can target these selectors in your own stylesheet to adjust spacing, borders and other styles. Remember to load your styles after the stub stylesheet so that your rules win in the cascade. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developers.stub.africa/sdk-documentation/custom-styling.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.