nextjs-mdx-food-blog VS next-themes

Here, we will use the previously created NextJS MDX Food Blog (simple).

You can download and use the static files in my repo for testing.

Next themes is used for themes switching

Shadcn UI supports dark mode for Next.js and Vite applications. For Next.js applications, Shadcn UI uses next-themes for the dark mode toggling functionality. When a user toggles between light and dark mode, the application switches between the light and dark theme tokens.

Let’s start with Next.js. We’ll use the next-themes package, which allows us to handle dark mode very easily without worrying about blocking page rendering to check user preferences.

"use client"; import React from "react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; import { ThemeProviderProps } from "next-themes/dist/types"; // https://github.com/pacocoursey/next-themes/issues/152#issuecomment-1364280564 // needs to be called NextThemesProvider not ThemesProvider // not sure why export function Providers(props: ThemeProviderProps) { return ; }

Next themes

It is that simple. It has 74,528 weekly npm downloads and if it's good enough for @leeerob, it's good for me too. Get creative with your loading state and toggle button (or not && KISS). Check out their next-themes GH repo for more info.

also: https://github.com/pacocoursey/next-themes

i usually use https://github.com/pacocoursey/next-themes when dealing with themes, it doesnt flash