zahid ansari
Building scalable systems by applying mental models to code and architecture.
Website
Install this app to stay connected and in the loop.
Building meaningful experiences one pixel at a time 😉.
Made with by Zahid
views
zahid ansari
Building scalable systems by applying mental models to code and architecture.
Website
Install this app to stay connected and in the loop.
Building meaningful experiences one pixel at a time 😉.
Made with by Zahid
views

Share
If you’re using Next.js and Clerk, though, it’s a breeze! In just two lines of code, you can sync Clerk’s theme with Next.js and keep everything looking on point.
Switching between light and dark mode is cool — until you have to sync it across multiple integrations. If you’re using Next.js and Clerk, though, it’s a breeze! In just two lines of code, you can sync Clerk’s theme with Next.js and keep everything looking on point. Here’s the quick and easy way to make sure your theme is in harmony.
Make sure you’ve installed next-themes and @clerk/themes:
1npm install next-themes @clerk/themesNow, pop this into your Clerk component to sync its theme with your app’s theme. Below is an example using the UserProfile component.
1"use client"
2import { UserProfile } from "@clerk/nextjs";
3import { dark } from "@clerk/themes";
4import { useTheme } from "next-themes";
5const UserProfilePage = () => {
6 const { resolvedTheme } = useTheme();
7 return (
8 <UserProfile
9 appearance={{
10 baseTheme: resolvedTheme === "dark" ? dark : undefined,
11 }}
12 path="/profile"
13 />
14 );
15};
16export default UserProfilePage;With this, Clerk components will automatically switch between light and dark mode based on your app’s current theme. Clean, simple, and all in just two lines!
Tech Stack : Next.js , ShadCN UI , Clerk.js