return isDark, isLight from color

This commit is contained in:
jeffvli
2025-09-25 21:27:14 -07:00
parent 3ed6d4b2f7
commit 7c50ee814d
+30 -5
View File
@@ -29,7 +29,15 @@ export const useFastAverageColor = (args: {
const { algorithm, default: defaultColor, id, src, srcLoaded } = args; const { algorithm, default: defaultColor, id, src, srcLoaded } = args;
const idRef = useRef<string | undefined>(id); const idRef = useRef<string | undefined>(id);
const [background, setBackground] = useState<string | undefined>(defaultColor); const [background, setBackground] = useState<{
background: string | undefined;
isDark: boolean;
isLight: boolean;
}>({
background: defaultColor,
isDark: true,
isLight: false,
});
useEffect(() => { useEffect(() => {
const fac = new FastAverageColor(); const fac = new FastAverageColor();
@@ -46,16 +54,28 @@ export const useFastAverageColor = (args: {
}) })
.then((color) => { .then((color) => {
idRef.current = id; idRef.current = id;
return setBackground(color.rgb); return setBackground({
background: color.rgb,
isDark: color.isDark,
isLight: color.isLight,
});
}) })
.catch((e) => { .catch((e) => {
console.error('Error fetching average color', e); console.error('Error fetching average color', e);
idRef.current = id; idRef.current = id;
return setBackground('rgba(0, 0, 0, 0)'); return setBackground({
background: 'rgba(0, 0, 0, 0)',
isDark: true,
isLight: false,
});
}); });
} else if (srcLoaded) { } else if (srcLoaded) {
idRef.current = id; idRef.current = id;
return setBackground('var(--theme-colors-foreground-muted)'); return setBackground({
background: 'var(--theme-colors-foreground-muted)',
isDark: true,
isLight: false,
});
} }
return () => { return () => {
@@ -63,5 +83,10 @@ export const useFastAverageColor = (args: {
}; };
}, [algorithm, srcLoaded, src, id]); }, [algorithm, srcLoaded, src, id]);
return { background, colorId: idRef.current }; return {
background: background.background,
colorId: idRef.current,
isDark: background.isDark,
isLight: background.isLight,
};
}; };