erp-platform/ui/src/components/template/Theme.tsx
2025-05-23 17:45:10 +03:00

64 lines
1.7 KiB
TypeScript

import type { CommonProps } from '@/@types/common'
import ConfigProvider from '@/components/ui/ConfigProvider'
import { themeConfig } from '@/configs/theme.config'
import { useStoreActions, useStoreState } from '@/store'
import useDarkMode from '@/utils/hooks/useDarkmode'
import useNotification from '@/utils/hooks/useNotification'
import { useSetting } from '@/utils/hooks/useSetting'
import useTabFocus from '@/utils/hooks/useTabFocus'
import { useEffect } from 'react'
import { Helmet } from 'react-helmet'
let didInit = false
const Theme = (props: CommonProps) => {
// ABP App Config'i uygulama acilirken al
const { getConfig } = useStoreActions((a) => a.abpConfig)
useEffect(() => {
if (!didInit) {
didInit = true
getConfig(false)
}
}, [])
function getThemeStyle() {
const mode = theme.mode
const style = setting('App.SiteManagement.Theme.Style')
return style?.replace(mode === 'dark' ? 'light' : 'dark', mode)
}
const { setting } = useSetting()
const theme = useStoreState((state) => state.theme)
const locale = useStoreState(
(state) => state.abpConfig.config?.localization.currentCulture.cultureName,
)
useDarkMode()
useTabFocus()
useNotification()
const currentTheme = {
...themeConfig,
...theme,
...{ locale },
}
return (
<>
{setting('App.SiteManagement.Theme.Style') && (
<Helmet key="Devexpress stylesheet Helmet">
<link
key="Devexpress stylesheet Helmet link"
rel="stylesheet"
href={`/css/${getThemeStyle()}.css`}
/>
</Helmet>
)}
<ConfigProvider value={currentTheme}>{props.children}</ConfigProvider>
</>
)
}
export default Theme