custom mui theme for easy use in projects
npm install srjuggernaut-mui-themeInstall the package and the required fonts with npm or yarn.
``bash`
npm install srjuggernaut-mui-theme @fontsource/roboto @fontsource/source-code-pro
or
`bash`
yarn add srjuggernaut-mui-theme @fontsource/roboto @fontsource/source-code-pro
You can use the theme in your project like this:
`jsx
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
const theme = useMemo(() => {
if (mode === 'light') {
return createTheme(lightTheme);
}
else {
return createTheme(darkTheme);
}
}, [mode]);
return (
Hello World
);
}
``
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.