ReactM3 Theme

This project has an npm library for Material 3 theme, so you can add to your project and play-around this theme created on the top of @mui/material.

npm i @react-m3/m3

Apply this custom theme in your project

import { useMemo } from 'react';
import { CssBaseline, ThemeProvider } from '@mui/material';
import { getPalette, getTheme } from '@react-m3/m3';

const color = "#6750a4";

export const MyCustomTheme = () => {
  
  const m3Theme = useMemo(() => {
    const palette = getPalette(color);
    return getTheme('light', palette);
  }, [color]);

  return (
    <ThemeProvider theme={m3Theme}>
      <CssBaseline enableColorScheme/>
      {/* Call your app component here */}
      <MyApp/>
    </ThemeProvider>
  );
}

Note

Open the next StackBlitz Example.

This project is an extension from the original repository created by ZakAlbert