{"id":30622249,"url":"https://github.com/bert27/nextjs-ssr-dark-starter","last_synced_at":"2026-05-08T09:33:27.395Z","repository":{"id":307886249,"uuid":"1030987991","full_name":"bert27/nextjs-ssr-dark-starter","owner":"bert27","description":"Modern Next.js 15 starter with true SSR dark mode—no FOUC, instant theme persistence via MUI v7 color schemes and Tailwind v4. Seamless theme switching, TypeScript, ESLint, Prettier, and production-ready structure. The perfect dark/light base!","archived":false,"fork":false,"pushed_at":"2025-08-03T14:55:06.000Z","size":74,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-30T15:36:09.604Z","etag":null,"topics":["css","dark-theme","mui","nextjs","react19","ssr","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/bert27.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,"zenodo":null}},"created_at":"2025-08-02T19:02:12.000Z","updated_at":"2025-08-03T14:55:09.000Z","dependencies_parsed_at":"2025-08-02T21:33:13.999Z","dependency_job_id":"376262bc-7fe6-4a18-b532-f52c0f6ff709","html_url":"https://github.com/bert27/nextjs-ssr-dark-starter","commit_stats":null,"previous_names":["bert27/nextjs-ssr-dark-starter"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bert27/nextjs-ssr-dark-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnextjs-ssr-dark-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnextjs-ssr-dark-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnextjs-ssr-dark-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnextjs-ssr-dark-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bert27","download_url":"https://codeload.github.com/bert27/nextjs-ssr-dark-starter/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bert27%2Fnextjs-ssr-dark-starter/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32774920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"ssl_error","status_checked_at":"2026-05-08T08:22:45.650Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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","dark-theme","mui","nextjs","react19","ssr","typescript"],"created_at":"2025-08-30T15:35:52.889Z","updated_at":"2026-05-08T09:33:27.371Z","avatar_url":"https://github.com/bert27.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌑 Next.js 15 SSR Dark Mode Starter\n\nA modern starter built with **Next.js 15**, **React 19**, **Material UI v7**, and **Tailwind CSS v4**—fully configured for TypeScript, true SSR dark mode (no FOUC!), blazing-fast theme switching, and robust theme persistence using HTTP cookies.\n\n---\n\n## ✨ Features\n\n- ⚡️ **Next.js 15** with App Router \u0026 Turbopack\n- ⚛️ **React 19**\n- 🎨 **Material UI v7** (colorSchemes, real CSS variables, SSR-aware)\n- 💨 **Tailwind CSS v4** (JIT, extendable)\n- 🧠 **TypeScript** support (strict, ready for production)\n- 🧹 **ESLint \u0026 Prettier** preconfigured for clean code\n- 🌙 **Record-setting Dark Mode with Real SSR**\n  - Uses **HTTP cookies** for SSR theme persistence (not just localStorage!)\n  - No flash of incorrect theme (zero FOUC) — the correct mode is rendered from the very first byte, even on reload or direct visit\n  - The `\u003chtml data-mui-color-scheme=\"...\"\u003e` attribute ensures global CSS and all MUI variables are in tight sync SSR ↔️ CSR\n- 🧩 **MUI \u0026 Tailwind Integration**\n  - All custom CSS and Tailwind utilities use MUI-generated CSS variables (`var(--mui-palette-background-default)`, etc.)\n  - No legacy `.dark` class toggling—full scalability/compatibility using the modern `data-mui-color-scheme` attribute\n\n## 🚀 Installation\n\n```\n\nnpm install\nnpm run dev\n\n```\n\n---\n\n## ⚡️ How Real SSR Theme Sync Works\n\n**This starter reads the user's theme from an HTTP cookie (`themeSaved`) on the server,** so every HTML page is generated in the correct color mode, instantly—even on the first visit, page reload, or deep link.\n\n\u003e **No FOUC. No hydration mismatch. Always the right theme from the server, thanks to HTTP cookie sync.**\n\n#### 💡 Example: SSR Root Layout (TypeScript)\n\n- **Theme preference** is set (and updated by toggling) in both localStorage (for instant client-side hydration) and HTTP cookie (for SSR).\n- With every browser reload, Next.js SSR reads the cookie so `\u003chtml data-mui-color-scheme=\"...\"\u003e` is always correct before React or JS runs.\n\n---\n\n### 🧑‍💻 Example: Theme-Aware CSS Components\n\nAll backgrounds and colors in your custom components/layouts use the same tokens as Material UI:\n\n```\n\nbody {\nbackground: var(--mui-palette-background-default);\ncolor: var(--mui-palette-text-primary);\n}\n.demo-theme-bg {\nbackground: var(--mui-palette-background-paper);\n}\n.icon-themed {\ncolor: var(--mui-palette-text-primary);\n}\n\n```\n\n### 🌈 Theme Persistence\n\n- **SSR:** Reads theme from `themeSaved` HTTP cookie to set color mode on `\u003chtml\u003e`\n- **CSR:** User toggling updates both localStorage (for client hydration) and the cookie (for future SSR renders)\n\n### 🦾 Modern \u0026 Future-Proof\n\n- Uses only official/recommended SSR methods of Next.js and MUI v7+\n- No legacy `.dark` class toggling or fragile client-side hacks—theme sync happens on the server for every page\n\n---\n\n## 📄 License\n\nMIT\n\n---\n\n**Enjoy a perfect dark/light experience with no flashes, no mismatches, and full server ↔️ client sync—out-of-the-box!**\n\n```\n\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert27%2Fnextjs-ssr-dark-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbert27%2Fnextjs-ssr-dark-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbert27%2Fnextjs-ssr-dark-starter/lists"}