44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect } from "react"
|
|
import { useTheme } from "next-themes"
|
|
import {
|
|
mailBackgroundStyle,
|
|
normalizeMailBackgroundId,
|
|
} from "@/lib/mail-settings/constants"
|
|
import { useMailSettingsStore } from "@/lib/stores/mail-settings-store"
|
|
|
|
function applyMailBackground(backgroundId: string) {
|
|
const html = document.documentElement
|
|
const normalized = normalizeMailBackgroundId(backgroundId)
|
|
const { background, fallbackColor } = mailBackgroundStyle(normalized)
|
|
|
|
if (normalized === "none" || background === "none") {
|
|
delete html.dataset.mailBackground
|
|
html.style.removeProperty("--mail-bg-layer")
|
|
html.style.removeProperty("--mail-bg-fallback")
|
|
return
|
|
}
|
|
|
|
html.dataset.mailBackground = normalized
|
|
html.style.setProperty("--mail-bg-layer", background)
|
|
html.style.setProperty("--mail-bg-fallback", fallbackColor)
|
|
}
|
|
|
|
/** Applique thème clair/sombre/système et fond décoratif sur le document. */
|
|
export function MailThemeApplier() {
|
|
const themeMode = useMailSettingsStore((s) => s.themeMode)
|
|
const backgroundId = useMailSettingsStore((s) => s.backgroundId)
|
|
const { setTheme } = useTheme()
|
|
|
|
useEffect(() => {
|
|
setTheme(themeMode)
|
|
}, [themeMode, setTheme])
|
|
|
|
useEffect(() => {
|
|
applyMailBackground(backgroundId)
|
|
}, [backgroundId])
|
|
|
|
return null
|
|
}
|