{"id":15155224,"url":"https://github.com/mitinull/perfect-darkmode-nextjs-mui","last_synced_at":"2026-02-13T07:13:32.098Z","repository":{"id":251378853,"uuid":"837126366","full_name":"mitinull/perfect-darkmode-nextjs-mui","owner":"mitinull","description":"Perfect light/dark theme with MUI and Next.js (App Router) (No flickering) (+Adding Fonts) (+Switching Images) (+Tutorial)","archived":false,"fork":false,"pushed_at":"2024-08-06T20:43:11.000Z","size":7723,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-07T12:14:55.372Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://perfect-darkmode-nextjs-mui.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mitinull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-02T09:13:23.000Z","updated_at":"2024-08-06T20:43:14.000Z","dependencies_parsed_at":"2024-08-06T22:46:10.444Z","dependency_job_id":null,"html_url":"https://github.com/mitinull/perfect-darkmode-nextjs-mui","commit_stats":{"total_commits":20,"total_committers":1,"mean_commits":20.0,"dds":0.0,"last_synced_commit":"f7172a5a3a1f0377a37e16efd7b426b606f1f7a6"},"previous_names":["mitinull/perfect-darkmode-nextjs-mui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mitinull/perfect-darkmode-nextjs-mui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitinull%2Fperfect-darkmode-nextjs-mui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitinull%2Fperfect-darkmode-nextjs-mui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitinull%2Fperfect-darkmode-nextjs-mui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitinull%2Fperfect-darkmode-nextjs-mui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mitinull","download_url":"https://codeload.github.com/mitinull/perfect-darkmode-nextjs-mui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mitinull%2Fperfect-darkmode-nextjs-mui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276011919,"owners_count":25569840,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-19T02:00:09.700Z","response_time":108,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-09-26T18:03:16.555Z","updated_at":"2025-09-19T22:44:30.207Z","avatar_url":"https://github.com/mitinull.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Visit the Website and Test it 🌐\n🔗 Website : https://perfect-darkmode-nextjs-mui.vercel.app/\n\n## Watch the YouTube Tutorial 🎓\n- 🔗 YouTube Tutorial (Part 1) : https://youtu.be/tWarkEhnfv0\n- 🔗 YouTube Tutorial (Part 2) : https://youtu.be/bgH1xsH8OZw\n\n## Lihgt Mode\n![image](https://github.com/user-attachments/assets/85ce497a-f54b-48d1-a3e9-ad6a4c777792)\n\n## Dark Mode\n![image](https://github.com/user-attachments/assets/2403e04e-1372-4be8-9b91-b6dd2a5cd566)\n\n## Description\nThis 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.\n\nUpdate: \n- Different images are shown in light / dark theme.\n- No more button flickering!\n\n⚠️ Implementing a dark theme in Next.js is not very straight forward because components are rendered on the server side.\n\n## Getting Started\n\nThis 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).\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitinull%2Fperfect-darkmode-nextjs-mui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmitinull%2Fperfect-darkmode-nextjs-mui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmitinull%2Fperfect-darkmode-nextjs-mui/lists"}