useCSSRootVariables.ts

import { useEffect, useState } from 'react';

interface Variables {
  [variable: string]: string;
}

const useCSSRootVariable = (variables: Variables): void => {
  const [styleTag] = useState(() => document.createElement('style'));

  useEffect(() => {
    document.head.append(styleTag);

    return () => {
      styleTag.remove();
    };
  }, [styleTag]);

  useEffect(() => {
    styleTag.innerText = `:root {${Object.entries(variables).map(
      ([variable, value]) => `--${variable}: ${value};`
    )}}`;
  }, [styleTag, variables]);
};

export default useCSSRootVariable;