File size: 2,217 Bytes
f52d137 |
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 99 |
import { createTheme, PaletteMode, Theme } from "@mui/material";
import React, {
createContext,
ReactNode,
useContext,
useEffect,
useState,
} from "react";
interface ThemeContextType {
mode: PaletteMode;
toggleColorMode: () => void;
theme: Theme;
}
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const useThemeMode = () => {
const context = useContext(ThemeContext);
if (context === undefined) {
throw new Error("useThemeMode must be used within a ThemeProvider");
}
return context;
};
interface ThemeProviderProps {
children: ReactNode;
}
export const CustomThemeProvider: React.FC<ThemeProviderProps> = ({
children,
}) => {
// Always use 'dark' for now
const [mode, setMode] = useState<PaletteMode>("dark");
// Save mode to localStorage whenever it changes
useEffect(() => {
localStorage.setItem("colorMode", mode);
}, [mode]);
const toggleColorMode = () => {
setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
};
// Create theme based on current mode
const theme = createTheme({
shape: {
borderRadius: 8,
},
palette: {
mode,
primary: {
main: mode === "light" ? "#111827" : "#90CAF9",
},
secondary: {
main: mode === "light" ? "#f8fafc" : "#00ABFF",
},
background: {
default: mode === "light" ? "#ffffff" : "#1E1E1E",
paper: mode === "light" ? "#ffffff" : "#252526",
},
text: {
primary: mode === "light" ? "#111827" : "#ffffff",
secondary: mode === "light" ? "#6b7280" : "#9ca3af",
},
},
typography: {
fontFamily:
"system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif",
},
components: {
MuiButton: {
styleOverrides: {
root: {
textTransform: "none",
},
},
},
MuiTypography: {
styleOverrides: {
root: {
textTransform: "none",
},
},
},
},
});
const value = {
mode,
toggleColorMode,
theme,
};
return (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
);
};
|