# 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.