Configure Branding

Implementers can configure various aspects of the user interface to match their branding. This includes:

Changing the logo on the login screen
Changing the logo on the navbar
Changing brand colors

Changing logos

Logos are used in two places in O3:

The login page
The navbar

Changing the logo used on the login page

The default logo used in the O3 logo page is the OpenMRS SVG sprite defined here. You can override the logo by providing a valid image src URL as the value of src property in the login frontend module's configuration schema. The following is a snippet of how this would look like:

{
  "@openmrs/esm-login-app": {
    "logo": {
      "src": "https://data.kenyahmis.org/openmrs/images/logos/kenyaemr-logo.svg",
      "alt": "KenyaEMR logo"
    }
  }
}

In this case, the logo specified at that URL will be applied as the default login page logo. To persist this change, you will need to add the configuration to your instance's configuration.

Changing the logo used on the navbar

Similarly, the default logo used on the navbar is configured here. You can optionally use a string or an SVG image as the navbar logo. To override the navbar logo, use a configuration similar to the snippet below:

{
  "@openmrs/esm-primary-navigation-app": {
    "logo": {
      // Using an SVG image URL
      "src": "https://data.kenyahmis.org/openmrs/images/logos/kenyaemr-logo-nav.svg"
      // Or, using a string
      "name": "KenyaEMR",
    }
  }
}

Changing brand colors

Implementers can change the default brand colors specified in the styleguide, overriding them with hex values that conform to their own brand colors. The default brand colors that determine how the UI looks like are defined in the styleguide configuration schema. To override them, use a configuration similar to the snippet below:

{
  "@openmrs/esm-styleguide": {
    "Brand color #1": "#00473F", // The 'primary' color
    "Brand color #2": "#363463", // The 'secondary' color
    "Brand color #3": "#51A351" // The 'tertiary' color
  }
}

These colors impact the following UI elements: