Vercel's Portfolio Blog Starter With Next Themes Toggle.

This template now includes Next-Themes for light and dark modes, along with a convenient toggle button.

To clarify, I only added a few components and changed the CSS structure; the rest is exactly the same as the original Vercel portfolio template. This template already includes:

• MDX and Markdown support
• Optimized for SEO (sitemap, robots, JSON-LD schema)
• RSS Feed
• Dynamic OG images
• Syntax highlighting
• Vercel Speed Insights / Web Analytics
• Geist font
• Next-Themes Light & Dark Mode Toggle

Live Demo

https://portfolio-starter-with-toggle.vercel.app/

Changes

I was having issues with the alpha version of Tailwind 4, so I reverted back to the latest stable release and installed Next-Themes.

Then I created 2 components app/components/mode-toggle.tsx, and app/components/theme-provider.tsx to make the toggle work. Then I wrapped the application with the theme provider in app/layout.tsx, and finally, I added the icon to the app/components/nav.tsx file.

Besides that, nothing else was changed or touched. This is the exact same template as the original Portfolio Blog Starter kit, with a light and dark mode toggle added for convenience.

For more details and a step-by-step guide, check the blog post

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/JPerez00/portfolio-starter-with-toggle/tree/main your-project-name-here

Then, run Next.js in development mode:

pnpm dev

Deploy it to the cloud with Vercel (Documentation).