77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router";
|
|
import {
|
|
createTheme,
|
|
ThemeOptions,
|
|
ThemeProvider,
|
|
TypographyVariantsOptions,
|
|
} from "@mui/material";
|
|
import React, { useMemo } from "react";
|
|
import ComponentsOverrides from "./components";
|
|
import Palette from "./palette";
|
|
import CustomShadows from "./shadows";
|
|
import Typography from "./typography";
|
|
import { ThemeMode } from "../types/config";
|
|
import { CustomShadowProps } from "../types/theme";
|
|
|
|
export const LinkBehavior = React.forwardRef<
|
|
HTMLAnchorElement,
|
|
Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
|
|
>((props, ref) => {
|
|
const { href, ...other } = props;
|
|
// Map href (Material UI) -> to (react-router)
|
|
return <RouterLink ref={ref} to={href} {...other} />;
|
|
});
|
|
|
|
export default function ThemeCustomization({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
let themeMode: any = ThemeMode.LIGHT;
|
|
const fontFamily = '"Public Sans", sans-serif';
|
|
|
|
const getWindowScheme = () => {
|
|
if (typeof window !== "undefined") {
|
|
return window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
}
|
|
return false;
|
|
};
|
|
|
|
if (themeMode === ThemeMode.AUTO) {
|
|
const autoMode = getWindowScheme();
|
|
if (autoMode) {
|
|
themeMode = ThemeMode.DARK;
|
|
} else {
|
|
themeMode = ThemeMode.LIGHT;
|
|
}
|
|
}
|
|
|
|
const theme = Palette(themeMode);
|
|
|
|
const themeTypography: TypographyVariantsOptions =
|
|
useMemo<TypographyVariantsOptions>(
|
|
() => Typography(fontFamily),
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[fontFamily]
|
|
);
|
|
const themeCustomShadows: CustomShadowProps = useMemo<CustomShadowProps>(
|
|
() => CustomShadows(theme),
|
|
[theme]
|
|
);
|
|
|
|
const themeOptions: ThemeOptions = useMemo(
|
|
() => ({
|
|
palette: theme.palette,
|
|
customShadows: themeCustomShadows,
|
|
typography: themeTypography,
|
|
}),
|
|
[theme, themeCustomShadows, themeTypography]
|
|
);
|
|
|
|
const themes = createTheme(themeOptions);
|
|
|
|
themes.components = ComponentsOverrides(themes);
|
|
|
|
return <ThemeProvider theme={themes}>{children}</ThemeProvider>;
|
|
}
|