stort/src/contexts/ThemeContext.tsx

// TODO: add settings functionality, refer to whensapp project

import { FC, ReactNode } from "react";
import { createTheme, ThemeProvider } from "@mui/material/styles";

interface UserThemeProviderProps {
  children: ReactNode;
}

// palette and accent settings
export const userPalette = {
  primary: {
    // light: '#a1c3f9',
    main: "#8ab4f8",
    // dark: '#4285f4',
  },
  secondary: {
    // light: '#a1c3f9',
    main: "#8ab4f8",
    // dark: '#4285f4',
  },
  error: {
    light: "#e57373",
    main: "#f44336",
    dark: "#d32f2f",
  },
  warning: {
    light: "#ffb74d",
    main: "#ffa726",
    dark: "#f57c00",
  },
  info: {
    light: "#a1c3f9",
    main: "#8ab4f8",
    dark: "#4285f4",
  },
  success: {
    light: "#81c784",
    main: "#66bb6a",
    dark: "#388e3c",
  },
  grey: {
    50: "#fafafa",
    100: "#f5f5f5",
    200: "#eeeeee",
    300: "#e0e0e0",
    400: "#bdbdbd",
    500: "#9e9e9e",
    600: "#757575",
    700: "#616161",
    800: "#424242",
    900: "#212121",
    A100: "#f5f5f5",
    A200: "#eeeeee",
    A400: "#bdbdbd",
    A700: "#616161",
  },
  background: {
    paper: "#303134",
    default: "#202124",
  },
};

export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
  // font family settings
  // TODO: figure out how to bundle fonts in tauri
  let fontFamily = "GoogleSans";
  // switch (settings.display.font_family) {
  //   case "sans_serif":
  //     fontFamily = "GoogleSans, sans-serif";
  //     break;
  //   case "monospace":
  //     fontFamily = "JetBrainsMono, monospace";
  //     break;
  //   case "comic_sans":
  //     fontFamily = "ComicSans, sans-serif";
  //     break;
  //   case "system_font":
  //     fontFamily = "system-ui";
  //     break;
  // }

  // font scaling settings
  // const fontSize = (settings.display.font_scaling / 100) * 14;

  const userTheme = createTheme({
    typography: {
      fontFamily: fontFamily,
      // fontSize: fontSize,
    },
    palette: {
      mode: "dark",
      ...userPalette,
    },
    transitions: {
      duration: {
        // shortest: settings.display.transition_duration,
        // shorter: settings.display.transition_duration,
        // short: settings.display.transition_duration,
        // // most basic recommended timing
        // standard: settings.display.transition_duration,
        // // this is to be used in complex animations
        // complex: settings.display.transition_duration,
        // // recommended when something is entering screen
        // enteringScreen: settings.display.transition_duration,
        // // recommended when something is leaving screen
        // leavingScreen: settings.display.transition_duration,
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: { textTransform: "none" },
        },
      },
      MuiTab: {
        styleOverrides: {
          root: {
            textTransform: "none",
          },
        },
      },
    },
  });

  return <ThemeProvider theme={userTheme}>{children}</ThemeProvider>;
};