Create MUI theme and add dark mode

[MikeLautensack]

I am having tremendously difficulty getting rid of the SSR dark mode flicker with MUI theming. I searched every article, github, redit, stack overflow post I can find and still cannot find a fix.

here are the relevant links for the current implementation

https://mui.com/material-ui/integrations/nextjs/ https://mui.com/material-ui/experimental-api/css-theme-variables/overview/#advantages https://mui.com/material-ui/experimental-api/css-theme-variables/usage/

[MikeLautensack]

Dark mode works but I have failed to find a solution to dark mode SSR flicker with MUI theming. I am currently way to frustrated with this being so hard to implement and am giving up on fixing the flicker for now until I see some better support for the app router in MUI.

[MikeLautensack]

After reviewing the next docs Its seems that next.js has much better support for tailwind than MUI. I have already configured tailwind and MUI so I can use tailwind to style MUI components. I also prefer to style with tailwind and like MUI because of the prebuilt components and the material design system.

Maybe the solution is to use tailwind for the theming/darkmode and styling the MUI components in order to fix the problem with SSR flicker while still being able to use MUI components and maybe use the material theme builder to create a tailwind theme in the project, so I can style with tailwind but still use material design in MUI components. (just an idea... WIP)

[MikeLautensack]

Combining next-themes and tailwind for theming was the solution. Now just have to create custom tailwind themes and style the app.

[MikeLautensack]

UPDATE: MUI v6.0.0-alpha.12 has the solution to the SSR flicker problem. I have successfully implemented dark mode.