mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
return isDark, isLight from color
This commit is contained in:
@@ -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,
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user