useChromeBackground hook determines background-color of DOM element and sets the the color for adequate contrast

useChromaBackground.ts

import chroma from 'chroma-js';
import { MutableRefObject, useEffect, useRef } from 'react';

export const useChromaBackground = (): MutableRefObject<HTMLElement> => {
  const tagRef = useRef<HTMLElement>({} as HTMLElement);
  const cWhite = '#FFFFFF';
  const minClarityValue = 70;

  useEffect(() => {
    async function validateBackground() {
      if (!tagRef || !tagRef.current) {
        return;
      }

      const bgColor = await window.getComputedStyle(tagRef.current).getPropertyValue('background-color');

      const levelOfClarity = chroma(bgColor).get('lab.l');

      if (levelOfClarity < minClarityValue) {
        tagRef.current.style.color = cWhite;
      }
    }
    validateBackground();
  }, [tagRef.current]);

  return tagRef;
};

usage

export function TopMenu() {
  const tagRef = useChromaBackground();
  const logoFile = settings && settings.logoImageUrl ? settings.logoImageUrl : sidralogoFile;

  return (
    <div className="top-menu">
      <div>
        <img className="top-menu__logo-container" alt={logoFile} src={logoFile} />
        <span ref={tagRef} className="top-menu__env">
          {settings && settings.environment}
        </span>
      </div>
  );
}