SrJuggernaut Mui Theme

Installation

Install the package and the required fonts with npm or yarn.

npm install srjuggernaut-mui-theme @fontsource/roboto @fontsource/source-code-pro

or

yarn add srjuggernaut-mui-theme @fontsource/roboto @fontsource/source-code-pro

Usage

You can use the theme in your project like this:

import React, { useMemo } from 'react';
import { ThemeProvider, createTheme } from '@mui/material'
import CssBaseline from '@material-ui/core/CssBaseline';
import { darkTheme, lightTheme } from 'srjuggernaut-mui-theme';

import "@fontsource/roboto/latin-300.css";
import "@fontsource/roboto/latin-400.css";
import "@fontsource/roboto/latin-700.css";
import "@fontsource/source-code-pro/latin-400.css";
import "@fontsource/source-code-pro/latin-900.css";

function App() {
  const [mode, setMode] = React.useState<PaletteMode>('light')

  const theme = useMemo(() => {
    if (mode === 'light') {
      return createTheme(lightTheme);
    }
    else {
      return createTheme(darkTheme);
    }
  }, [mode]);

  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <div className="App">
        <h1>Hello World</h1>
      </div>
    </ThemeProvider>
  );
} 

It is important to import the fonts in your project, otherwise the theme will not work properly, this is because the theme uses the fonts from the @fontsource packages and cannot be imported automatically because some packages complain about the fonts being imported from other places than the root component.

License

MIT © SrJuggernaut