| 1 |
import { useEffect } from '@wordpress/element' |
| 2 |
import { colord } from 'colord' |
| 3 |
import useSWRImmutable from 'swr/immutable' |
| 4 |
import { useGlobalSyncStore } from '@library/state/GlobalSync' |
| 5 |
|
| 6 |
export const useDesignColors = () => { |
| 7 |
const { designColors: globalDesignColors, setDesignColors } = |
| 8 |
useGlobalSyncStore() |
| 9 |
const { data: designColors } = useSWRImmutable('designColors', () => { |
| 10 |
// If we have partner colors, use those |
| 11 |
const documentStyles = window.getComputedStyle(document.documentElement) |
| 12 |
const partnerBg = documentStyles?.getPropertyValue( |
| 13 |
'--ext-partner-library-theme-primary-bg', |
| 14 |
) |
| 15 |
|
| 16 |
if (partnerBg) { |
| 17 |
return { |
| 18 |
mainColor: partnerBg, |
| 19 |
darkColor: colord(partnerBg).darken(0.1).toHex(), |
| 20 |
textColor: |
| 21 |
documentStyles?.getPropertyValue( |
| 22 |
'--ext-partner-library-theme-primary-text', |
| 23 |
) ?? '#fff', |
| 24 |
} |
| 25 |
} |
| 26 |
|
| 27 |
// Otherwise, use the global colors |
| 28 |
return globalDesignColors |
| 29 |
}) |
| 30 |
|
| 31 |
useEffect(() => { |
| 32 |
if (designColors?.mainColor) { |
| 33 |
document.documentElement.style.setProperty( |
| 34 |
'--ext-design-main', |
| 35 |
designColors.mainColor, |
| 36 |
) |
| 37 |
} |
| 38 |
|
| 39 |
if (designColors?.darkColor) { |
| 40 |
document.documentElement.style.setProperty( |
| 41 |
'--ext-design-dark', |
| 42 |
designColors.darkColor, |
| 43 |
) |
| 44 |
} |
| 45 |
|
| 46 |
if (designColors?.textColor) { |
| 47 |
document.documentElement.style.setProperty( |
| 48 |
'--ext-design-text', |
| 49 |
designColors.textColor, |
| 50 |
) |
| 51 |
} |
| 52 |
|
| 53 |
setDesignColors(designColors) |
| 54 |
}, [designColors, setDesignColors]) |
| 55 |
|
| 56 |
return designColors || {} |
| 57 |
} |
| 58 |
|
