import {FC, useMemo} from "react";
import {createTheme, CssBaseline, ThemeProvider, useMediaQuery} from "@mui/material";

export const Styling: FC = ({children}) => {
    const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");

    const theme = useMemo(
        () =>
            createTheme({
                palette: {
                    mode: "dark",
                },
            }),
        [prefersDarkMode]
    );

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline/>
            {children}
        </ThemeProvider>
    );
};