stort/src/contexts/ThemeContext.tsx

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

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

interface UserThemeProviderProps {
  children: ReactNode;
}

export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
  const { settings } = useSettings();

  // palette and accent settings
  const userPalette = {
    primary: {
      // light: '#a1c3f9',
      main: settings.style.accent_color || "#8ab4f8",
      // dark: '#4285f4',
    },
    secondary: {
      // light: '#a1c3f9',
      main: settings.style.accent_color || "#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: settings.style.dark_mode ? "#303134" : "#fff",
      default: settings.style.dark_mode ? "#202124" : "#fff",
    },
  };

  // font family settings
  // TODO: figure out how to bundle fonts in tauri
  let fontFamily = "GoogleSans";
  switch (settings.style.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.style.font_scaling / 100) * 14;

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

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