32 lines
1.1 KiB
JavaScript
32 lines
1.1 KiB
JavaScript
import { useEffect } from 'react'
|
|
import { useEditor } from '@/context/EditorContext'
|
|
|
|
export const PALETTE = [
|
|
['primary','Couleur principale'],
|
|
['primary-foreground','Texte sur la couleur principale'],
|
|
['background','Fond du site'],
|
|
['foreground','Texte principal'],
|
|
['card','Fond des cartes'],
|
|
['card-foreground','Texte des cartes'],
|
|
['accent','Accent'],
|
|
['muted','Fond secondaire'],
|
|
['border','Bordures'],
|
|
]
|
|
|
|
export function CmsTheme() {
|
|
const { content } = useEditor()
|
|
useEffect(() => {
|
|
for (const mode of ['light', 'dark']) {
|
|
const themeTarget = mode === 'light' ? document.documentElement : document.documentElement
|
|
for (const [name] of PALETTE) {
|
|
const value = content[`theme.${mode}.${name}`]
|
|
// CSS variables du mode sombre sont appliquées par une feuille dédiée.
|
|
const property = mode === 'light' ? `--cms-light-${name}` : `--cms-dark-${name}`
|
|
if (value && /^#[a-fA-F0-9]{6}$/.test(value)) themeTarget.style.setProperty(property, value)
|
|
else themeTarget.style.removeProperty(property)
|
|
}
|
|
}
|
|
}, [content])
|
|
return null
|
|
}
|