Dark theme for profile

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@ably-labs/react-hooks": "^2.1.1",
     "@clerk/nextjs": "^4.23.3",
+    "@clerk/themes": "^1.7.5",
     "@neondatabase/serverless": "^0.6.0",
     "@paralleldrive/cuid2": "^2.2.2",
     "@t3-oss/env-nextjs": "^0.6.1",
@@ -29,9 +30,11 @@
     "autoprefixer": "^10.4.15",
     "dotenv": "^16.3.1",
     "drizzle-orm": "^0.28.5",
+    "install": "^0.13.0",
     "json2csv": "6.0.0-alpha.2",
     "next": "^13.4.19",
     "nextjs-cors": "^2.1.2",
+    "pnpm": "^8.7.1",
     "postcss": "^8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@clerk/nextjs':
     specifier: ^4.23.3
     version: 4.23.3(next@13.4.19)(react-dom@18.2.0)(react@18.2.0)
+  '@clerk/themes':
+    specifier: ^1.7.5
+    version: 1.7.5(react@18.2.0)
   '@neondatabase/serverless':
     specifier: ^0.6.0
     version: 0.6.0
@@ -53,6 +56,9 @@ dependencies:
   drizzle-orm:
     specifier: ^0.28.5
     version: 0.28.5(@neondatabase/serverless@0.6.0)(pg@8.11.3)
+  install:
+    specifier: ^0.13.0
+    version: 0.13.0
   json2csv:
     specifier: 6.0.0-alpha.2
     version: 6.0.0-alpha.2
@@ -62,6 +68,9 @@ dependencies:
   nextjs-cors:
     specifier: ^2.1.2
     version: 2.1.2(next@13.4.19)
+  pnpm:
+    specifier: ^8.7.1
+    version: 8.7.1
   postcss:
     specifier: ^8.4.29
     version: 8.4.29
@@ -268,6 +277,15 @@ packages:
       swr: 2.2.0(react@18.2.0)
     dev: false
 
+  /@clerk/themes@1.7.5(react@18.2.0):
+    resolution: {integrity: sha512-kIdCIBSCp6t1saGAzbelcfZi5P+L3+CuVFwSjpulwGTRxeOOs/S8hB4CAHVbTwfxPw5Ms+AnN4dXJKHjSnxPIg==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      react: '>=16'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@clerk/types@3.50.0:
     resolution: {integrity: sha512-3TWalDWPTFToXC/W07QUIBN96TA+4dR3YLBvwr9U2Z4RVG9in9HW4CTC6aHTnJ2kVtTcgDkXjDKeVKS1GjPCcA==}
     engines: {node: '>=14'}
@@ -3506,6 +3524,11 @@ packages:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
     dev: false
 
+  /install@0.13.0:
+    resolution: {integrity: sha512-zDml/jzr2PKU9I8J/xyZBQn8rPCAY//UOYNmR01XwNwyfhEWObo2SWfSl1+0tm1u6PhxLwDnfsT/6jB7OUxqFA==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
   /internal-slot@1.0.5:
     resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
     engines: {node: '>= 0.4'}
@@ -4518,6 +4541,12 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /pnpm@8.7.1:
+    resolution: {integrity: sha512-Qbt3EhYUaXFS2k4FLQA7r2/eYz/JoDeG680/3UXG0Ga03LPuY4GgdvCLe+zO3M7ZnWG4VI4bAwk7QpJyfr5eqA==}
+    engines: {node: '>=16.14'}
+    hasBin: true
+    dev: false
+
   /postcss-import@15.1.0(postcss@8.4.29):
     resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
     engines: {node: '>=14.0.0'}

src/app/_components/Header.tsx

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useRouter, usePathname } from "next/navigation";
 import { env } from "@/env.mjs";
 import Loading from "./Loading";
+import { dark } from "@clerk/themes";
 
 interface NavbarProps {
   title: string;
@@ -61,7 +62,11 @@ const Navbar = ({ title }: NavbarProps) => {
       </div>
 
       {!isLoaded ? <Loading /> : navigationMenu()}
-      <UserButton afterSignOutUrl="/" userProfileMode="modal" />
+      <UserButton
+        afterSignOutUrl="/"
+        userProfileMode="modal"
+        appearance={{ baseTheme: dark }}
+      />
     </nav>
   );
 };

src/app/sign-in/[[...sign-in]]/page.tsx

@@ -1,12 +1,18 @@
 "use client";
 
 import { SignIn } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
 
 export const dynamic = "force-static";
 
 const SignInPage = () => (
   <div style={styles}>
-    <SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
+    <SignIn
+      path="/sign-in"
+      routing="path"
+      signUpUrl="/sign-up"
+      appearance={{ baseTheme: dark }}
+    />
   </div>
 );
 

src/app/sign-up/[[...sign-up]]/page.tsx

@@ -1,12 +1,18 @@
 "use client";
 
 import { SignUp } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
 
 export const dynamic = "force-static";
 
 const SignUpPage = () => (
   <div style={styles}>
-    <SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />
+    <SignUp
+      path="/sign-up"
+      routing="path"
+      signInUrl="/sign-in"
+      appearance={{ baseTheme: dark }}
+    />
   </div>
 );