Nutlope · yllenfer · Jul 8, 2025
diff --git a/app/(private)/upload/client.tsx b/app/(private)/upload/client.tsx
@@ -2,7 +2,7 @@
 
 import { Button } from '@/components/ui/button';
 import { Dropzone } from '@/components/ui/dropzone';
-import { Linkedin, X } from 'lucide-react';
+import { FileText, X } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import { toast } from 'sonner';
 import {
@@ -74,10 +74,10 @@ export default function UploadPageClient() {
           {fileState.status !== 'empty' && (
             <button
               onClick={handleReset}
-              className="absolute top-2 right-2 p-1 hover:bg-gray-100 rounded-full z-10"
+              className="absolute top-2 right-2 p-1 hover:bg-muted rounded-full z-10"
               disabled={isUpdating}
             >
-              <X className="h-4 w-4 text-gray-500" />
+              <X className="h-4 w-4 text-muted-foreground" />
             </button>
           )}
 
@@ -86,20 +86,20 @@ export default function UploadPageClient() {
             maxFiles={1}
             icon={
               fileState.status !== 'empty' ? (
-                <img src="/uploaded-pdf.svg" className="h-6 w-6" />
+                <img src="/uploaded-pdf.svg" className="h-6 w-6 dark:invert" />
               ) : (
-                <Linkedin className="h-6 w-6 text-gray-600" />
+                <FileText className="h-6 w-6 text-muted-foreground" />
               )
             }
             title={
-              <span className="text-base font-bold text-center text-design-black">
+              <span className="text-base font-bold text-center text-foreground">
                 {fileState.status !== 'empty'
                   ? fileState.file.name
                   : 'Upload PDF'}
               </span>
             }
             description={
-              <span className="text-xs font-light text-center text-design-gray">
+              <span className="text-xs font-light text-center text-muted-foreground">
                 {fileState.status !== 'empty'
                   ? `${(fileState.file.size / 1024 / 1024).toFixed(2)} MB`
                   : 'Resume or LinkedIn'}
@@ -138,7 +138,7 @@ export default function UploadPageClient() {
       <div className="font-mono">
         <div className="relative">
           <Button
-            className="px-4 py-3 h-auto bg-design-black hover:bg-design-black/95"
+            className="px-4 py-3 h-auto bg-primary hover:bg-primary/90 text-primary-foreground"
             disabled={fileState.status === 'empty' || isUpdating}
             onClick={() => router.push('/pdf')}
           >
@@ -152,7 +152,7 @@ export default function UploadPageClient() {
                 <img
                   src="/sparkle.png"
                   alt="Sparkle Icon"
-                  className="h-5 w-5 mr-2"
+                  className="h-5 w-5 mr-2 dark:invert"
                 />
                 Generate Website
               </>

diff --git a/app/[username]/loading.tsx b/app/[username]/loading.tsx
@@ -1,27 +1,27 @@
 export default function LoadingUsernamePage() {
   return (
     <section
-      className="mx-auto w-full max-w-2xl space-y-8 bg-white print:space-y-4 my-8 px-4"
+      className="mx-auto w-full max-w-2xl space-y-8 bg-background print:bg-white print:space-y-4 my-8 px-4"
       aria-label="Resume Content"
     >
       <header className="flex items-center justify-between">
         <div className="flex-1 space-y-1.5">
-          <div className="h-8 w-48 bg-gray-200 rounded animate-pulse" />
-          <div className="h-4 w-96 bg-gray-200 rounded animate-pulse" />
-          <div className="h-4 w-24 bg-gray-200 rounded animate-pulse" />
+          <div className="h-8 w-48 bg-muted rounded animate-pulse" />
+          <div className="h-4 w-96 bg-muted rounded animate-pulse" />
+          <div className="h-4 w-24 bg-muted rounded animate-pulse" />
           <div className="flex gap-x-1 pt-1">
-            <div className="h-8 w-8 bg-gray-200 rounded animate-pulse" />
-            <div className="h-8 w-8 bg-gray-200 rounded animate-pulse" />
-            <div className="h-8 w-8 bg-gray-200 rounded animate-pulse" />
+            <div className="h-8 w-8 bg-muted rounded animate-pulse" />
+            <div className="h-8 w-8 bg-muted rounded animate-pulse" />
+            <div className="h-8 w-8 bg-muted rounded animate-pulse" />
           </div>
         </div>
-        <div className="h-28 w-28 bg-gray-200 rounded-full animate-pulse" />
+        <div className="h-28 w-28 bg-muted rounded-full animate-pulse" />
       </header>
 
       <div className="flex flex-col gap-6">
         <section className="flex min-h-0 flex-col gap-y-3">
-          <div className="h-6 w-24 bg-gray-200 rounded animate-pulse" />
-          <div className="h-20 w-full bg-gray-200 rounded animate-pulse" />
+          <div className="h-6 w-24 bg-muted rounded animate-pulse" />
+          <div className="h-20 w-full bg-muted rounded animate-pulse" />
         </section>
       </div>
     </section>

diff --git a/app/[username]/page.tsx b/app/[username]/page.tsx
@@ -85,10 +85,10 @@ export default async function ProfilePage({
       <div className="text-center mt-8 mb-4">
         <Link
           href={`/?ref=${username}`}
-          className="text-design-gray font-mono text-sm"
+          className="text-muted-foreground font-mono text-sm"
         >
           Made by{' '}
-          <span className="text-design-black underline underline-offset-2">
+          <span className="text-foreground underline underline-offset-2">
             Self.so
           </span>
         </Link>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,7 @@ import { ClerkProvider } from '@clerk/nextjs';
 import './globals.css';
 import { Toaster } from '@/components/ui/sonner';
 import { ReactQueryClientProvider } from '@/components/ReactQueryClientProvider';
+import { ThemeProvider } from '@/components/theme-provider';
 import { Metadata } from 'next';
 import PlausibleProvider from 'next-plausible';
 
@@ -39,8 +40,15 @@ export default function RootLayout({
               {/* rest of your scripts go under */}
             </head>
             <body className={`${mono.className} min-h-screen flex flex-col`}>
-              <main className="flex-1 flex flex-col">{children}</main>
-              <Toaster richColors position="bottom-center" />
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
+                <main className="flex-1 flex flex-col">{children}</main>
+                <Toaster richColors position="bottom-center" />
+              </ThemeProvider>
             </body>
           </html>
         </ReactQueryClientProvider>

diff --git a/app/page.tsx b/app/page.tsx
@@ -17,11 +17,11 @@ export default function Home() {
             {/* Left side - Call to action */}
             <div className="w-full md:w-1/2 max-w-[378px] flex flex-col justify-center items-center md:items-start ">
               <div className="max-w-md text-center md:text-left">
-                <div className="inline-block font-mono gap-2.5 px-2.5 py-1.5 rounded bg-gray-100 text-sm mb-5 text-design-gray">
+                <div className="inline-block font-mono gap-2.5 px-2.5 py-1.5 rounded bg-muted text-sm mb-5 text-muted-foreground">
                   100% free & open source
                 </div>
 
-                <h1 className="text-[32px] font-bold mb-4 flex items-center justify-center md:justify-start gap-4 flex-wrap text-design-black font-mono leading-4">
+                <h1 className="text-[32px] font-bold mb-4 flex items-center justify-center md:justify-start gap-4 flex-wrap text-foreground font-mono leading-4">
                   <span>LinkedIn</span>
                   <img
                     src="/right-arrow.png"
@@ -44,26 +44,26 @@ export default function Home() {
                   />
                 </h1>
 
-                <p className="text-base text-gray-600 mb-[30px] font-mono text-center md:text-left">
+                <p className="text-base text-muted-foreground mb-[30px] font-mono text-center md:text-left">
                   Turn your resume/LinkedIn
                   <br /> into a professional website.
                 </p>
 
                 <div className="relative flex flex-col items-center font-mono w-full md:w-fit">
                   <Link href="/upload">
-                    <Button className="relative group flex items-center bg-design-black hover:bg-design-black/95 text-white px-6 py-3 h-auto text-base overflow-hidden">
+                    <Button className="relative group flex items-center bg-primary hover:bg-primary/90 text-primary-foreground px-6 py-3 h-auto text-base overflow-hidden">
                       <div className="h-[120px] w-10 bg-gradient-to-r from-white/10 via-white/50 to-white/10 absolute blur-sm -rotate-45 -left-16 group-hover:left-[150%] duration-500 delay-200" />
                       <img
                         src="/sparkle.png"
                         alt="Sparkle Icon"
-                        className="h-5 w-5 mr-2 relative"
+                        className="h-5 w-5 mr-2 relative dark:invert"
                       />
                       <span className="relative">Upload Resume</span>
                       <BorderBeam colorFrom="#5d5d5d" colorTo="#ffffff" />
                     </Button>
                   </Link>
 
-                  <p className="text-sm text-gray-500 mt-4 text-center">
+                  <p className="text-sm text-muted-foreground mt-4 text-center">
                     Takes 1 minute!
                   </p>
                 </div>
@@ -72,7 +72,7 @@ export default function Home() {
 
             {/* Right side - Preview */}
             <div className="w-full md:w-1/2 flex justify-center items-center flex-1 relative max-h-[700px] min-w-[50%] lg:min-w-[500px]">
-              <div className="absolute inset-0 -bottom-4 rounded-3xl bg-black/5 blur-xl h-full"></div>
+              <div className="absolute inset-0 -bottom-4 rounded-3xl bg-foreground/5 blur-xl h-full"></div>
               <BlurFade delay={0.25} inView>
                 <img
                   src="/cv-home.png"

diff --git a/components/CustomSpinner.tsx b/components/CustomSpinner.tsx
@@ -8,52 +8,52 @@ export const CustomSpinner = ({ className }: { className?: string }) => {
       viewBox="0 0 28 28"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn('animate-spin', className)}
+      className={cn('animate-spin text-foreground', className)}
     >
       <g clipPath="url(#clip0_199_1000)">
         <path
           d="M16.7559 2.95038C15.5932 2.66086 14.3912 2.55816 13.1833 2.64516C12.5964 2.68744 12.0102 2.77499 11.4407 2.90559L10.8564 0.356437C11.5558 0.196148 12.2755 0.0885781 12.9954 0.0367343C14.4791 -0.0701251 15.9569 0.0564218 17.3879 0.412875L16.7559 2.95038Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.9"
           d="M22.7212 6.67958C21.5687 5.30939 20.091 4.21575 18.448 3.51711L19.4714 1.11053C21.4909 1.96918 23.3068 3.31286 24.7227 4.99636L22.7212 6.67958Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.8"
           d="M25.3575 13.2014L25.3561 13.182C25.2258 11.3728 24.6889 9.67405 23.7603 8.13273L26.0004 6.78326C27.1435 8.68059 27.8043 10.7703 27.9645 12.9941L25.3575 13.2014Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.7"
           d="M25.8806 21.4092L23.6626 20.0236C24.6109 18.5057 25.1926 16.764 25.3447 14.9866L27.9505 15.2098C27.7631 17.3978 27.0474 19.5417 25.8806 21.4092Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.6"
           d="M19.2622 26.9771L18.28 24.5535C19.9315 23.8842 21.4255 22.8146 22.6006 21.4604L24.5759 23.1743C23.1317 24.8388 21.2942 26.1538 19.2622 26.9771Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.5"
           d="M15.0071 27.9634C13.5302 28.0696 12.0594 27.9446 10.6353 27.5921L11.2635 25.0536C12.4207 25.34 13.6171 25.4413 14.8194 25.3549C15.4121 25.3122 16.004 25.2233 16.5785 25.0907L17.1669 27.6388C16.461 27.8017 15.7344 27.911 15.0071 27.9634Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.4"
           d="M8.5507 26.8974C6.52989 26.0419 4.71202 24.7009 3.2937 23.0195L5.29253 21.3333C6.44715 22.7018 7.92633 23.7932 9.5704 24.4892L8.5507 26.8974Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.3"
           d="M2.01317 21.2351C0.863315 19.3325 0.198807 17.2368 0.0380801 15.0057L0.0354004 14.9673L2.64383 14.7794L2.64722 14.8277C2.77727 16.6329 3.31714 18.3368 4.25131 19.8822L2.01317 21.2351Z"
-          fill="black"
+          fill="currentColor"
         />
         <path
           opacity="0.2"
           d="M2.65946 12.9962L0.0541992 12.7691C0.24473 10.5815 0.963762 8.4387 2.13342 6.57288L4.34925 7.96177C3.39861 9.47837 2.81428 11.2192 2.65946 12.9962Z"
-          fill="black"
+          fill="currentColor"
         />
       </g>
       <defs>

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,21 +1,21 @@
 export function Footer() {
   return (
-    <footer className="w-full py-4 px-6  mt-auto border-t border-gray-200">
+    <footer className="w-full py-4 px-6  mt-auto border-t border-border">
       <div className="max-w-4xl justify-between items-center mx-auto w-full flex flex-col-reverse md:flex-row gap-2">
-        <div className="text-sm text-design-gray font-mono font-bold">
+        <div className="text-sm text-muted-foreground font-mono font-bold">
           Powered by{' '}
           <a
             target="_blank"
             href="https://togetherai.link"
-            className="text-design-black underline underline-offset-2"
+            className="text-foreground underline underline-offset-2"
           >
             Together.ai
           </a>{' '}
           &{' '}
           <a
             target="_blank"
             href="https://togetherai.link"
-            className="text-design-black underline underline-offset-2"
+            className="text-foreground underline underline-offset-2"
           >
             Llama 3.3
           </a>
@@ -26,18 +26,18 @@ export function Footer() {
             target="_blank"
             rel="noopener noreferrer"
             href="https://github.com/Nutlope/self.so"
-            className="size-6 flex items-center justify-center border-design-gray border rounded-md"
+            className="size-6 flex items-center justify-center border-border border rounded-md"
           >
-            <img src="/footer/github.svg" className="size-4" />
+            <img src="/footer/github.svg" className="size-4 dark:invert" />
             <span className="sr-only">GitHub</span>
           </a>
           <a
             target="_blank"
             rel="noopener noreferrer"
             href="https://x.com/nutlope"
-            className="size-6 flex items-center justify-center border-design-gray border rounded-md"
+            className="size-6 flex items-center justify-center border-border border rounded-md"
           >
-            <img src="/footer/x.svg" className="size-4" />
+            <img src="/footer/x.svg" className="size-4 dark:invert" />
             <span className="sr-only">Social</span>
           </a>
         </div>

diff --git a/components/PopupSiteLive.tsx b/components/PopupSiteLive.tsx
@@ -18,21 +18,21 @@ export const PopupSiteLive = ({
 
   const mainContent = useMemo(() => {
     return (
-      <div className="relative bg-white rounded-lg shadow-lg">
+      <div className="relative bg-background rounded-lg shadow-lg border">
         <div className="p-6 flex flex-col items-center justify-center h-full gap-5">
           {/* Site live icon */}
           <img
             src="/site-live.svg"
             alt="Site Live Icon"
-            className="h-[41px] w-[52px]"
+            className="h-[41px] w-[52px] dark:invert"
           />
 
-          <h3 className="text-2xl font-medium text-design-black mb-1 font-sans">
+          <h3 className="text-2xl font-medium text-foreground mb-1 font-sans">
             Your website is now live!
           </h3>
 
           <div className="flex w-full flex-col gap-4 md:gap-2">
-            <div className="flex-grow bg-gray-100 rounded-md border border-gray-300 p-2 px-3 text-sm text-gray-700 min-h-10">
+            <div className="flex-grow bg-muted rounded-md border p-2 px-3 text-sm text-muted-foreground min-h-10">
               {websiteUrl}
             </div>
             <div className="grid grid-cols-2 gap-4 md:gap-2 ">

diff --git a/components/PreviewActionbar.tsx b/components/PreviewActionbar.tsx
@@ -113,8 +113,8 @@ export default function PreviewActionbar({
               onClick={handleStatusChange}
               className={`flex items-center min-w-[100px] min-h-8 gap-1.5 px-3 py-1.5 h-auto ${
                 status === 'draft'
-                  ? 'bg-design-black hover:bg-[#333333] text-[#fcfcfc]'
-                  : 'bg-design-white text-design-black hover:bg-gray-100'
+                  ? 'bg-primary hover:bg-primary/90 text-primary-foreground'
+                  : 'bg-secondary text-secondary-foreground hover:bg-secondary/80'
               }`}
             >
               {isChangingStatus ? (

diff --git a/components/TopMenu.tsx b/components/TopMenu.tsx
@@ -1,16 +1,18 @@
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs';
+import { ThemeToggle } from '@/components/ui/theme-toggle';
 
 export function TopMenu() {
   return (
     <>
       <header className="w-full py-4 md:px-0 px-6 flex justify-between items-center max-w-4xl mx-auto h-[67px]">
         <Link href="/" className="flex items-center gap-2">
-          <img src="/logo.svg" alt="Self.so Logo" className="h-[30px] w-auto" />
+          <img src="/logo.svg" alt="Self.so Logo" className="h-[30px] w-auto dark:invert" />
         </Link>
 
-        <div>
+        <div className="flex items-center gap-3">
+          <ThemeToggle />
           <SignedIn>
             {/* User is signed in */}
             <UserButton />
@@ -24,20 +26,20 @@ export function TopMenu() {
               >
                 <Button
                   variant="outline"
-                  className=" flex flex-row gap-1.5 py-2 px-4 border-gray-300 text-design-gray text-sm font-medium"
+                  className=" flex flex-row gap-1.5 py-2 px-4 text-muted-foreground text-sm font-medium"
                 >
                   <img
                     src="/github.svg"
                     alt="Github Logo"
-                    className="size-[14px]"
+                    className="size-[14px] dark:invert"
                   />
                   <span>Github</span>
                 </Button>
               </a>
               <Link href="/upload">
                 <Button
                   variant="default"
-                  className="text-sm font-medium py-2 px-4 bg-design-black hover:bg-design-black/95"
+                  className="text-sm font-medium py-2 px-4"
                 >
                   Sign up
                 </Button>