Spaces:
Running
Running
File size: 2,356 Bytes
3299552 c2adf08 c6fb72f 3299552 c2adf08 3299552 c2adf08 3299552 c2adf08 3299552 c2adf08 3299552 c2adf08 3299552 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import React, { useMemo, useEffect } from 'react';
import { useTheme } from '../hooks/useTheme';
const getTheme = (isDark) => createTheme({
palette: {
mode: isDark ? 'dark' : 'light',
primary: {
main: isDark ? '#7986cb' : '#3f51b5',
},
secondary: {
main: isDark ? '#ff9800' : '#f50057',
},
background: {
default: isDark ? '#121212' : '#f9f9f9',
paper: isDark ? '#1e1e1e' : '#ffffff',
},
text: {
primary: isDark ? '#ffffff' : '#121212',
secondary: isDark ? '#b0bec5' : '#666666',
},
// Add spiritual palette for specialized components
spiritual: {
light: isDark ? '#303f9f' : '#e8eaf6',
dark: isDark ? '#1a237e' : '#c5cae9',
accent: isDark ? '#ffcc80' : '#7986cb',
quoteBorder: isDark ? '#5c6bc0' : '#3f51b5',
},
},
typography: {
fontFamily: '"Poppins", "Roboto", "Helvetica", "Arial", sans-serif',
h1: {
fontWeight: 700,
},
h2: {
fontWeight: 600,
},
h3: {
fontWeight: 600,
},
h4: {
fontWeight: 600,
},
h5: {
fontWeight: 500,
},
h6: {
fontWeight: 500,
},
},
shape: {
borderRadius: 8,
},
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: 'none',
borderRadius: 8,
},
},
},
MuiCard: {
styleOverrides: {
root: {
borderRadius: 12,
},
},
},
},
});
// Enhanced ThemeProvider that forces re-render on theme change
export const ThemeProvider = ({ children }) => {
const { isDark } = useTheme();
// Create a new theme whenever isDark changes
const theme = useMemo(() => getTheme(isDark), [isDark]);
// Force a style update when theme changes
useEffect(() => {
// This helps force Material-UI to reapply styles
document.documentElement.style.setProperty(
'--mui-palette-mode',
isDark ? 'dark' : 'light'
);
// Apply additional custom CSS variables if needed
document.documentElement.style.setProperty(
'--app-background',
isDark ? '#121212' : '#f9f9f9'
);
}, [isDark]);
return <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>;
};
export default getTheme; |