.. _reference-admin-gui-theme-customization-colors:

.. rst-class:: chapter-with-expand

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:
    
     .. raw:: latex

        Refer to Less files and Theme Customization in the Advanced Configuration Guide.

     .. raw:: html

        <p>Refer to <a href="reference-less-files.html">Less files and Theme Customization</a></p>

   * Color selection is optional: where no colors are selected, defaults apply.



Administration Portal Default Colors
.......................................

Default Color Reference Table:

.. tabularcolumns:: |p{3cm}|p{4cm}|p{2cm}|p{6cm}|


================================  ================================  ===================  =============================================================================================================
Title                             Field Name                        Default Value (Hex)    Notes
================================  ================================  ===================  =============================================================================================================
Primary Colour                    primary_colour                    #000046              This is the background colour for most menus and headers, as well as the text colour for links and buttons.
Primary Text Colour               primary_text_colour               #ffffff              This is the text colour for anything with the primary colour background.
Accent Colour                     accent_colour                     #007fb0              This colour is used when attention needs to be drawn for important notifications or active buttons and text.
Accent Text Colour                accent_text_colour                #ffffff              This is the text colour for anything with the accent colour background.
Background Colour                 background_colour                 #e6e7e8              The colour of the background.
Topbar Colour                     topbar_colour                     #000046              The colour used for the top bar of the site. Will use the primary colour if no value is given.
Topbar Text Colour                topbar_text_colour                #ffffff              This is the text colour for the top bar. Will use the primary text colour if no value is given.
Menu Colour                       menu_colour                       #000046              The colour used for the menu on the left. Will use the primary colour if no value is given.
Menu Text Colour                  menu_text_colour                  #ffffff              This is the text colour for the menu. Will use the primary text colour if no value is given.
Panel Colour                      panel_colour                      #ffffff              The colour used for all the panels in the app. 
Panel Text Colour                 panel_text_colour                 #414042              This is the text colour for normal text in the app.
Info Notification Colour          info_notification_colour          #00ade5              The colour used for info notifications.
Info Notification Text Colour     info_notification_text_colour     #ffffff              This is the text colour for info notifications.
Error Notification Colour         error_notification_colour         #dc0c00              The colour used for error notifications.
Error Notification Text Colour    error_notification_text_colour    #ffffff              This is the text colour for error notifications. 
Success Notification Colour       success_notification_colour       #68bd17              The colour used for success notifications.
Success Notification Text Colour  success_notification_text_colour  #ffffff              This is the text colour for success notifications.  
Warning Notification Colour       warn_notification_colour          #fbc403              The colour used for warning notifications.
Warning Notification Text Colour  warn_notification_text_colour     #000000              This is the text colour for warning notifications.  
================================  ================================  ===================  =============================================================================================================


On the Admin Portal, consider the color selection on the **Branding** tab:

|branding-theme|



.. note::

   * If a color value appears blank, default values apply.
   * Sub-menu and sub-sub-menu backgrounds are rendered
     as percentages of the Menu Colour.

Admin Portal
.............


|new-admin-theme-0|

|new-admin-theme-1|

|new-admin-theme-2|


Business Admin Portal
.....................


|business-admin-theme-0|

|business-admin-theme-1|

|business-admin-theme-2|



.. |branding-theme-legacy| image:: /src/images/branding-theme-legacy.png
.. |branding-theme| image:: /src/images/branding-theme.png
.. |legacy-admin-theme-0| image:: /src/images/legacy-admin-theme-0.png
.. |legacy-admin-theme-1| image:: /src/images/legacy-admin-theme-1.png
.. |legacy-admin-theme-2| image:: /src/images/legacy-admin-theme-2.png
.. |new-admin-theme-0| image:: /src/images/new-admin-theme-0.png
.. |new-admin-theme-1| image:: /src/images/new-admin-theme-1.png
.. |new-admin-theme-2| image:: /src/images/new-admin-theme-2.png
.. |business-admin-theme-0| image:: /src/images/business-admin-theme-0.png
.. |business-admin-theme-1| image:: /src/images/business-admin-theme-1.png
.. |business-admin-theme-2| image:: /src/images/business-admin-theme-2.png