Visit the Website and Test it 🌐

🔗 Website : https://perfect-darkmode-nextjs-mui.vercel.app/

Watch the YouTube Tutorial 🎓

• 🔗 YouTube Tutorial (Part 1) : https://youtu.be/tWarkEhnfv0
• 🔗 YouTube Tutorial (Part 2) : https://youtu.be/bgH1xsH8OZw

Lihgt Mode

Dark Mode

Description

This is an implementation of a light/dark theme with MUI and Next.js (App Router) with a matching scrollbar and no flickering. Adding Fonts to MUI is also implemented.

Update:

• Different images are shown in light / dark theme.
• No more button flickering!

⚠️ Implementing a dark theme in Next.js is not very straight forward because components are rendered on the server side.

Getting Started

This is a Next.js project bootstrapped with create-next-app.

First, run the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.