Skip to main content

Changing User Side Primary and Secondary Colors

This article explains how OPS-COM administrators can customize the primary and secondary colors of the User Side interface. This feature allows you to align the User Side's appearance with your organization's branding.

How to Change User Side Colors

These steps outline how to access the design settings and insert the custom code to modify the User Side color theme.

  1. Hover over System Settings, hover over Content & Designs, and click Templates & Design.

  2. Click Toggle Templates.

  3. Under the Styles section, click Edit.

  4. Add the following code snippet to the very top of the editor, directly under the <style> tag:

    CSS 

    :root{
--ion-color-primary: purple;
--ion-color-secondary: orange;
}

  5. Replace purple and orange with your desired standard color names (e.g., blue, green, red).

Best Practices and Considerations

  • For more precise branding control, you can use hexadecimal (hex) color codes instead of standard color names!

  • Use a browser extension (such as ColorZilla) or an online tool to find the hex code for your organization's specific color (e.g., #6F42C1).

  • In the code snippet, replace the standard color name with your hex code. 

    Example:

     

:root{
--ion-color-primary: #6F42C1;
--ion-color-secondary: #FFA500;
}
Back to top