29 lines
983 B
TypeScript
29 lines
983 B
TypeScript
import { getValuesFromRGBString } from "@/services/color-formatter";
|
|
import { useEffect } from "react";
|
|
|
|
export const useSchemeColorByElement = (
|
|
element: Element | null,
|
|
searchSelectors: string,
|
|
dependencies: ReadonlyArray<unknown> = []
|
|
) => {
|
|
useEffect(() => {
|
|
const pageElement = element?.querySelectorAll(searchSelectors)[0];
|
|
|
|
const scheme = document.querySelector('meta[name="theme-color"]');
|
|
if (scheme && !pageElement) {
|
|
return scheme.setAttribute("content", "#ffffff");
|
|
}
|
|
if (!pageElement) return;
|
|
let backgroundColor = window.getComputedStyle(pageElement)?.backgroundColor;
|
|
const colorScheme = getValuesFromRGBString(backgroundColor);
|
|
if (colorScheme?.a === 0) {
|
|
backgroundColor = "#ffffff";
|
|
}
|
|
if (scheme && backgroundColor.length) {
|
|
return scheme.setAttribute("content", backgroundColor);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [element, ...dependencies]);
|
|
return null;
|
|
};
|