70 lines
2.0 KiB
TypeScript
Executable File
70 lines
2.0 KiB
TypeScript
Executable File
import React, {useMemo} from 'react';
|
|
import {applyThemeToDom} from '../ui/themes/utils/apply-theme-to-dom';
|
|
import {
|
|
ThemeId,
|
|
ThemeSelectorContext,
|
|
ThemeSelectorContextValue,
|
|
} from '../ui/themes/theme-selector-context';
|
|
import {CssTheme} from '../ui/themes/css-theme';
|
|
import {useSettings} from './settings/use-settings';
|
|
import {useBootstrapData} from './bootstrap-data/bootstrap-data-context';
|
|
import {useCookie} from '@common/utils/hooks/use-cookie';
|
|
|
|
const STORAGE_KEY = 'be-active-theme';
|
|
|
|
interface ThemeProviderProps {
|
|
children: any;
|
|
}
|
|
export function ThemeProvider({children}: ThemeProviderProps) {
|
|
const {themes} = useSettings();
|
|
const canChangeTheme = themes?.user_change;
|
|
const {data} = useBootstrapData();
|
|
const allThemes = useMemo(() => data.themes.all || [], [data.themes.all]);
|
|
const initialThemeId = data.themes.selectedThemeId || undefined;
|
|
|
|
const [selectedThemeId, setSelectedThemeId] = useCookie(
|
|
STORAGE_KEY,
|
|
`${initialThemeId}`,
|
|
);
|
|
|
|
let selectedTheme = canChangeTheme
|
|
? allThemes.find(t => t.id == selectedThemeId)
|
|
: allThemes.find(t => t.id == themes?.default_id);
|
|
if (!selectedTheme) {
|
|
selectedTheme = allThemes[0];
|
|
}
|
|
|
|
const contextValue: ThemeSelectorContextValue = useMemo(() => {
|
|
return {
|
|
allThemes,
|
|
selectedTheme: selectedTheme!,
|
|
selectTheme: (id: ThemeId) => {
|
|
if (!canChangeTheme) return;
|
|
const theme = findTheme(allThemes, id);
|
|
if (theme) {
|
|
setSelectedThemeId(`${theme.id}`);
|
|
applyThemeToDom(theme);
|
|
}
|
|
},
|
|
};
|
|
}, [allThemes, selectedTheme, setSelectedThemeId, canChangeTheme]);
|
|
|
|
return (
|
|
<ThemeSelectorContext.Provider value={contextValue}>
|
|
{children}
|
|
</ThemeSelectorContext.Provider>
|
|
);
|
|
}
|
|
|
|
function findTheme(themes: CssTheme[], id: ThemeId) {
|
|
return themes.find(t => {
|
|
if (id === 'light') {
|
|
return t.default_light === true;
|
|
}
|
|
if (id === 'dark') {
|
|
return t.default_dark === true;
|
|
}
|
|
return t.id === id;
|
|
});
|
|
}
|