Colours

Summary

Control the colours on your interface, from menus to backgrounds to individual components.

Steps

1. Navigate to ‘Administration’ and then select ‘Colours’ option located under ‘Branding’

‘Colour settings’ tab

2. Select colour scheme to display:

• ‘Default’ 
• ‘Custom’ – If this option is selected then add ‘ Colour scheme name’ to save

3. Configure the colour scheme by adding a hex value, e.g. #4bb88b for each of the following:

• ‘Primary colour *’ – App bars, login screens, buttons, and tabs
• ‘Secondary colour *’ – Select controls, FAB’s, icon buttons and page controller components
• ‘Workbar background *’
• ‘Workbar text and icon colour *’
• ‘Main menu background colour *’
• ‘Main menu text colour *’
• ‘Heading style colour *’
• ‘Body text colour *’
• ‘Link text colour for WYSIWYG *’
• ‘Text colour for Quick links *’
• ‘Intranet background  colour *’ –  Excludes all create/edit screens and configuration screens
• ‘Footer background colour *’
• ‘Footer text colour *’
• ‘Keyboard focus indicator *’ – Adds a coloured outline to all interactive elements such as links, buttons, and fields. For keyboard users who typically Tab to navigate

4. ‘Save changes to colour scheme’

Export colour styles

5. Select ‘Export styles’ option 

‘Colour settings’ import

6. Upload a JSON file from a previous exported colour scheme

7. Select ‘Choose File’

8. Select ‘Submit’

9. View ‘Colour settings’ tab

Expected result

The colours have been configured and will be displayed

Roles/permissions

Brand manager