The ultimate dynamic theme-switching solution for MUI that adapts to SSR.
npm install @atatctech/mui-themeThe ultimate dynamic theme-switching solution for MUI that adapts to SSR.
``shell`
npm i @atatctech/mui-theme
`tsx`
function App(): ReactNode {
return (
{/Your Application/}
);
}
Note that by default the component ignores cookie settings. You will have to use useThemeMode()
or which load settings from cookies automatically. Using cookie hooks is also applicable.
`tsx`
function App(): ReactNode {
const [themeMode, setThemeMode, systemThemeMode] = useThemeMode();
return (
{/Your Application/}
);
}
`tsx
import {useThemeConfigIDCookie} from "./mode";
const [getTMC, setTMC, removeTMC] = useThemeModeCookie();
const [getTCC, setTCC, removeTCC] = useThemeConfigIDCookie();
`
1. Prop themeMode
2. Cookie
3. System Setting
`tsx`
function App(): ReactNode {
const [themeMode, setThemeMode, systemThemeMode] = useThemeMode();
return (
{/Your Application/}
);
}
#### Dynamic Theme Config
There are two ways to implement dynamic theme config switching.
`tsx`
function App(): ReactNode {
const [themeConfig, setThemeConfig] = useState(defaultThemeConfig);
return (
{/Your Application/}
);
}
`tsx`
function App(): ReactNode {
const [themeConfigID, setThemeConfigID] = useThemeConfigID();
const themeConfigMapping = (id: string) => {
switch (id) {
case "winter":
return winterThemeConfig;
default:
return defaultThemeConfig;
}
};
return (
{/Your Application/}
);
}
The second one is more convenient when it comes to Select-controlled theme switching.
To make it capable with Material-UI, you will have to define at least the following:
- Primary and secondary color under light mode
- Primary and secondary color under dark mode
For each color mentioned, you will have to define three variants that are light, main, dark, and contrastText,contrastText
where means the opposite of normal text color under that mode. For instance, as normally texts are blackcontrastText
under light mode, the would be white.
The following example shows how to define a theme config in TypeScript.
`tsx``
const defaultThemeConfig: ThemeConfig = (mode: StrictThemeMode) => ({
palette: {
mode,
...(mode === 'light'
? {
primary: {
light: "#BBE5ED",
main: "#2F9CB1",
dark: "#1A5561",
contrastText: "#fff"
},
secondary: {
light: "#BFBCCB",
main: "#B399A2",
dark: "#986C6A",
contrastText: "#fff"
},
}
: {
primary: {
light: "#BBE5ED",
main: "#2F9CB1",
dark: "#1A5561",
contrastText: "#000"
},
secondary: {
light: "#BFBCCB",
main: "#B399A2",
dark: "#986C6A",
contrastText: "#000"
},
}),
}
});