theme.tsx

import { Theme, createTheme } from "@mui/material";
import { useMemo, useState } from "react";

// this is the main theme for the website
export function Theme(): [Theme, { toggleColorMode: () => void }] {
    const [mode, setMode] = useState<'light' | 'dark'>('dark');

    const colorMode = useMemo(
        () => ({
            toggleColorMode: () => {
                setMode((prevMode) => (prevMode === 'dark' ? 'light' : 'dark'));
            },
        }),
        [],
    );

    return [useMemo(() =>
        createTheme({
            palette: {
                mode: mode,
            },
            breakpoints: {
                values: {
                    xs: 0,
                    ss: 300,
                    sm: 600,
                    md: 900,
                    lg: 1200,
                    xl: 1536,
                },
            },
        }),
        [mode],
    ),
        colorMode];
}