fix: 修复亮暗模式以及主题色配置问题

This commit is contained in:
Montia37
2025-09-09 23:06:25 +08:00
parent 0d4afd8cd4
commit 5df55fc916
2 changed files with 17 additions and 19 deletions

View File

@@ -118,28 +118,21 @@ export const useThemeManager = () => {
return (defaultAppearance as Appearance) || THEME_DEFAULTS.appearance; return (defaultAppearance as Appearance) || THEME_DEFAULTS.appearance;
}); });
const [color, setColor] = useState<Colors>(() => { const [color, setColor] = useState<Colors>(
if (enableLocalStorage) { (defaultColor as Colors) || THEME_DEFAULTS.color
const storedColor = localStorage.getItem("color"); );
const cleanedColor = storedColor
? storedColor.replace(/^"|"$/g, "")
: null;
if (allowedColors.includes(cleanedColor as Colors)) {
return cleanedColor as Colors;
}
}
return (defaultColor as Colors) || THEME_DEFAULTS.color; useEffect(() => {
}); setColor((defaultColor as Colors) || THEME_DEFAULTS.color);
}, [defaultColor]);
const resolvedAppearance = useSystemTheme(appearance); const resolvedAppearance = useSystemTheme(appearance);
useEffect(() => { useEffect(() => {
if (enableLocalStorage) { if (enableLocalStorage) {
localStorage.setItem("appearance", appearance); localStorage.setItem("appearance", appearance);
localStorage.setItem("color", color);
} }
}, [appearance, color, enableLocalStorage]); }, [appearance, enableLocalStorage]);
return { return {
appearance: resolvedAppearance, appearance: resolvedAppearance,
@@ -149,7 +142,6 @@ export const useThemeManager = () => {
setColor, setColor,
}; };
}; };
export const useTheme = () => { export const useTheme = () => {
const context = useContext(ThemeContext); const context = useContext(ThemeContext);
if (context === undefined) { if (context === undefined) {

View File

@@ -92,9 +92,17 @@ export const AppContent = () => {
); );
}; };
const ThemedApp = () => {
const themeManager = useThemeManager();
return (
<ThemeProvider value={themeManager}>
<AppContent />
</ThemeProvider>
);
};
const App = () => { const App = () => {
const { publicSettings, loading } = useNodeData(); const { publicSettings, loading } = useNodeData();
const themeManager = useThemeManager();
if (loading) { if (loading) {
return <Loading />; return <Loading />;
@@ -102,9 +110,7 @@ const App = () => {
return ( return (
<ConfigProvider publicSettings={publicSettings}> <ConfigProvider publicSettings={publicSettings}>
<ThemeProvider value={themeManager}> <ThemedApp />
<AppContent />
</ThemeProvider>
</ConfigProvider> </ConfigProvider>
); );
}; };