{"repo":"Rjk-Jami/theme_changing_template","free":true,"listed":false,"github":"https://github.com/Rjk-Jami/theme_changing_template","clone":"git clone https://github.com/Rjk-Jami/theme_changing_template.git","description":"A production-ready Next.js theme template demonstrating smooth light/dark mode switching using the View Transitions API, CSS variables, and next-themes.","language":"TypeScript","stars":13,"topics":["dark-mode","dark-theme","frontend","nextjs","react","tailwindcss","tailwindcss-v4","theme","theme-switcher","view-transitions"],"license":null,"category":"saas-starters-boilerplates","readme_excerpt":"Theme Changing Template — KhanDevs A production-ready Next.js theme template demonstrating a correct and modern implementation of light and dark mode switching using the View Transitions API . This repository is focused on theming architecture , not UI gimmicks. It serves as a reference implementation for smooth, predictable, and hydration-safe theme transitions in real-world applications. Built with Next.js App Router , Tailwind CSS 4 , shadcn/ui , and next-themes . --- Quick Start 1. Clone and install dependencies 2. Run the development server Open: http://localhost:3000 --- Purpose Most theme implementations suffer from: - Flickering during hydration - Abrupt or jarring theme changes - Server/client theme mismatch - Hard-to-maintain hacks This template demonstrates: - Correct class-based theming - Single-button theme toggle - Circular reveal transition originating from the toggle button - Hydration-safe behavior - Token-based styling using CSS variables --- Features - Next.js App Router (Next.js 15 / React 19 ready) - View Transitions API for theme switching - Circular clip-path reveal animation - Tailwind CSS 4 with design tokens - shadcn/ui component foundation - Fully responsive - Type-safe and production-oriented --- Project Structure --- How the Theme Transition Works The transition uses the View Transitions API to animate between the old and new DOM snapshots. 1. Global CSS (Required) Add the following to app/globals.css : --- 2. Theme Toggle Logic --- 3. Hydration S","default_branch":null,"files":null,"tree":[],"storefront":"/r/Rjk-Jami","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/Rjk-Jami/theme_changing_template/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}