src/styles/theme.js

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;