From 4c8f4686b4499a2d3eda6a2e8ec2b3e657090066 Mon Sep 17 00:00:00 2001 From: Abinash Panda Date: Tue, 14 Oct 2025 01:12:36 +0530 Subject: [PATCH 1/2] Using next-themes to avoid flicker on initial page load --- package-lock.json | 11 +++++++++ package.json | 1 + src/app/layout.js | 6 ++--- src/components/ThemeContext.jsx | 42 --------------------------------- src/components/ThemeToggle.jsx | 30 ++++++++++++++++++++--- 5 files changed, 42 insertions(+), 48 deletions(-) delete mode 100644 src/components/ThemeContext.jsx diff --git a/package-lock.json b/package-lock.json index 4cc8278..57dcb91 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@tailwindcss/typography": "^0.5.15", "@types/mdx": "^2.0.13", "next": "15.0.1", + "next-themes": "^0.4.6", "react": "19.0.0-rc-69d4b800-20241021", "react-dom": "19.0.0-rc-69d4b800-20241021", "react-icons": "^5.3.0" @@ -5237,6 +5238,16 @@ } } }, + "node_modules/next-themes": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz", + "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==", + "license": "MIT", + "peerDependencies": { + "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc" + } + }, "node_modules/next/node_modules/postcss": { "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", diff --git a/package.json b/package.json index c11aa89..08cfcae 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@tailwindcss/typography": "^0.5.15", "@types/mdx": "^2.0.13", "next": "15.0.1", + "next-themes": "^0.4.6", "react": "19.0.0-rc-69d4b800-20241021", "react-dom": "19.0.0-rc-69d4b800-20241021", "react-icons": "^5.3.0" diff --git a/src/app/layout.js b/src/app/layout.js index a2c5431..8c3dabf 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,16 +1,16 @@ import './globals.css'; import { metadata } from '@/metadata'; +import { ThemeProvider } from 'next-themes'; import Header from '@/components/Header'; import Footer from '@/components/Footer'; import { ThemeToggle } from '@/components/ThemeToggle'; -import { ThemeProvider } from '@/components/ThemeContext'; export { metadata }; export default function RootLayout({ children }) { return ( - + - +
} />
{children}