@openmrs/esm-styleguide/src/brand.ts

The styleguide for OpenMRS SPA

import { getConfigStore } from '@openmrs/esm-config';

/**
 * Sets up the branding CSS variables by applying the configured brand colors
 * to the document root.
 *
 * @internal
 */
export function setupBranding() {
  getConfigStore('@openmrs/esm-styleguide').subscribe((store) => {
    if (store.loaded && store.config) {
      setGlobalCSSVariable('--brand-01', store.config['Brand color #1']);
      setGlobalCSSVariable('--brand-02', store.config['Brand color #2']);
      setGlobalCSSVariable('--brand-03', store.config['Brand color #3']);
    }
  });

  function setGlobalCSSVariable(name: string, value: string) {
    document.documentElement.style.setProperty(name, value);
  }
}