Theming

SASS variable defaults

Every Sass variable in the design system includes the !default flag allowing you to override the variable’s default value in your own Sass without modifying our source code. Copy and paste variables as needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won’t be re-assigned by the default values in the design system.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import the design system's Sass files.

Here’s an example that changes the theme colors when importing and compiling via npm:

CSS Variables

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.

Theming examples

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

Full page re-theming example has full brand colour palette updated to new theme and applied to full page/site by clicking on the colour swatches in the top right corner. 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

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

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.