https://github.com/mitinull/perfect-darkmode-nextjs-mui

Perfect light/dark theme with MUI and Next.js (App Router) (No flickering) (+Adding Fonts) (+Switching Images) (+Tutorial)
https://github.com/mitinull/perfect-darkmode-nextjs-mui

css-theme-variables dark dark-mode dark-theme darkmode font fonts google-fonts images material-ui mui next next14 nextjs switch-image switch-images switch-theme switch-theme-button theme themes

Last synced: about 2 months ago
JSON representation

Perfect light/dark theme with MUI and Next.js (App Router) (No flickering) (+Adding Fonts) (+Switching Images) (+Tutorial)

• Host: GitHub
• URL: https://github.com/mitinull/perfect-darkmode-nextjs-mui
• Owner: mitinull
• Created: 2024-08-02T09:13:23.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2024-08-06T20:43:11.000Z (10 months ago)
• Last Synced: 2025-02-13T14:48:44.878Z (4 months ago)
• Topics: css-theme-variables, dark, dark-mode, dark-theme, darkmode, font, fonts, google-fonts, images, material-ui, mui, next, next14, nextjs, switch-image, switch-images, switch-theme, switch-theme-button, theme, themes
• Language: JavaScript
• Homepage: https://perfect-darkmode-nextjs-mui.vercel.app/
• Size: 7.37 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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

![image](https://github.com/user-attachments/assets/85ce497a-f54b-48d1-a3e9-ad6a4c777792)

## Dark Mode

![image](https://github.com/user-attachments/assets/2403e04e-1372-4be8-9b91-b6dd2a5cd566)

## 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](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

First, run the development server:

```bash

npm run dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.