Customise the colour scheme
The design system generates an accessible colour palette based on the colours you choose. All default colours are generated from four SASS variables:
$AU-color-backgroundthe default background colour for header and menu
$AU-color-foreground-actioninteractive element colours for buttons, links and calls to action
$AU-color-foreground-focusfocus outline colour for interactive elements
$AU-color-foreground-textthe text colour
This will generate a palette consisting of nine colours:
- Four background colours:
- Five foreground colours:
These nine variables also have dark variations that can be accessed by replacing
How the palette is made
The first step is to choose your four colours for
text. These colours are then run through functions that create an accessible colour palette when the SASS to CSS is compiled.
The functions create three darker shades for the
background colour. They also blend the text colour and background colour together, creating a border and muted text colour. After these colours are created we run a test to make sure that all the foreground colours pass colour contrast on the background colours. If they do not pass, the closest accessible colour is used in the palette.
This process gives you a palette of five foreground colours and four background colours that are WCAG AA 2.1 compliant.
Add your colours
The first step is to choose your own colours for the
text. Once chosen, you need to override the colours throughout the system. This requires installing the components, and creating a simple development environment to compile the
If you have not set up your project already or do not have a developer environment we recommend following our development environment guide.
Once you have this set up and you should have your components installed, and have a script that compiles
css from one
main.scss file that imports the generated
Override the colours
To override the default colours you can assign your own value to any sass variable that ends with
!default. You will find the colour variables inside the core component ( however we will modify it in another location).
When you change a colour variable above the import of
auds.scss it flows through all of the components in the design system. In this
main.scss example we have changed the dark colour scheme above the import of the design system:
// Dark colour theme changes
// Import the design system components
// Additional customisation not related to components
Once you have entered your colour preferences, make sure to convert the SASS file into CSS. We have a guide on how to set up a development environment which covers how to compile SASS files into CSS files, for use on your project.