NSW Design System supports multiple levels of customisation based on your branding requirements.
CSS variables allow easy and on the fly customisation as they have access to the DOM, which means that you can change variables with local or global scope using plain CSS or JavaScript. We used CSS variables to control colours, typography settings, border radius, shadows and maximum container width to enable easy theming to match your Brand requirements.
Below you can find full list of variables that we made availible. To theme you can simply copy the variables you want to update and assign them new values using NSW Government colour palette or your own custom settings.
We’ve created a few page examples to show the most commonly used theming applications that can easily modify the masterbrand (default) theme.
Full page re-theming example has full brand colour palette updated to new theme and applied to full page/site. This includes global elements (header, navigation, footer etc) but excludes masthead. To implement it you need to apply new colours to global scope.
Content only re-theming example has full brand colour palette updated to new theme, but only applied to content section of the page. Global elements (header, navigation, footer etc) remain aligned to masterbrand corporate colour palette. To implement it you need to apply new colours to the container that wraps around content that you are re-theming.
Partial re-theming example has brand accent colour updated to give that branding ‘pop’ while still aligning to materbrand corporate. This is applied to full page/site so to implement it you need to apply new colours to global scope.