Theme Element Color References for the Administration Portal¶
Note
Color selection on the Branding tab of a theme always affects the Admin and Business Admin Portal.
Color selection on the Branding tab of a theme only affects the Legacy Admin Portal if no theme file is attached to the theme.
To edit and manage theme files:
Refer to Less files and Theme Customization
Color selection is optional: where no colors are selected, defaults apply.
If manual input of color Hex values is required, ensure the value is prefixed with
#.
Administration Portal Default Colors¶
Default Color Reference Table:
Title |
Field Name |
Default Value (Hex) |
Notes |
|---|---|---|---|
Primary Color |
primary_colour |
#000046 |
This is the background color for most menus and headers, as well as the text color for links and buttons. |
Primary Text Color |
primary_text_colour |
#ffffff |
This is the text color for anything with the primary color background. |
Accent Color |
accent_colour |
#007fb0 |
This color is used when attention needs to be drawn for important notifications or active buttons and text. |
Accent Text Color |
accent_text_colour |
#ffffff |
This is the text color for anything with the accent color background. |
Topbar Color |
topbar_colour |
#000046 |
The color used for the top bar of the site. Will use the primary color if no value is given. |
Topbar Text Color |
topbar_text_colour |
#ffffff |
This is the text color for the top bar. Will use the primary text color if no value is given. |
Menu Color |
menu_colour |
#000046 |
The color used for the menu on the left. Will use the primary color if no value is given. |
Menu Text Color |
menu_text_colour |
#ffffff |
This is the text color for the menu. Will use the primary text color if no value is given. |
Panel Color |
panel_colour |
#ffffff |
The color used for all the panels in the app. |
Title |
Field Name |
Default Value (Hex) |
Notes |
|---|---|---|---|
Panel Text Color |
panel_text_colour |
#414042 |
This is the text color for normal text in the app. |
Input Color |
input_colour |
#ffffff |
The background color for input fields. Will use the panel color if no value is given. |
Input Text Color |
input_text_colour |
#414042 |
The text color for input fields. Will use the panel text color if no value is given. |
Background Color |
background_color |
#e6e7e8 |
The color of the background behind panels. |
Info Notification Color |
info_notification_colour |
#00ade5 |
The color used for info notifications. |
Info Notification Text Color |
info_notification_text_colour |
#ffffff |
This is the text color for info notifications. |
Success Notification Color |
success_notification_colour |
#68bd17 |
The color used for success notifications. |
Success Notification Text Color |
success_notification_text_colour |
#ffffff |
This is the text color for success notifications. |
Warning Notification Color |
warn_notification_colour |
#fbc403 |
The color used for warning notifications. |
Warning Notification Text Color |
warn_notification_text_colour |
#000000 |
This is the text color for warning notifications. |
Error Notification Color |
error_notification_colour |
#dc0c00 |
The color used for error notifications. |
Error Notification Text Color |
error_notification_text_colour |
#ffffff |
This is the text color for error notifications. |
On the Admin Portal, consider the color selection on the Branding tab:
Note
For details on images and logos, see: Manage Themes (Admin Portal and Business Admin Portal).
If a color value appears blank, default values apply.
Sub-menu and sub-sub-menu backgrounds are rendered as percentages of the Menu Colour.
