From fed3c6c6f25bfd5c3906581c074fb9b76c13e312 Mon Sep 17 00:00:00 2001
From: Yllen Fernandez <59622068+yllenfer@users.noreply.github.com>
Date: Tue, 8 Jul 2025 23:45:36 +0200
Subject: [PATCH] feat: implement comprehensive dark mode support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ Features:
- Add dark mode toggle button with sun/moon icons
- Implement theme persistence using next-themes
- Add smooth transitions between light and dark themes

🎨 UI Improvements:
- Update all hardcoded colors to use theme-aware Tailwind classes
- Fix font visibility in dark mode across all components
- Add dark:invert class to all SVG icons for proper contrast
- Update loading animations and skeleton states for dark mode

🔧 Components Updated:
- TopMenu: Added theme toggle and updated button colors
- CustomSpinner: Fixed loading animation visibility
- Resume components: Updated all text and background colors
- Form components: Updated input and button styling
- Footer: Updated links and icon colors

🖼️ Icons Fixed:
- Logo, GitHub, footer icons with dark:invert
- Sparkle icons in upload and generate buttons
- Site live and upload PDF icons

📱 Features:
- System theme preference detection
- Theme persistence across sessions
- Print-friendly resume (stays white for printing)
- No theme flash on page load
---
 app/(private)/upload/client.tsx               | 18 ++++----
 app/[username]/loading.tsx                    | 20 ++++-----
 app/[username]/page.tsx                       |  4 +-
 app/layout.tsx                                | 12 +++++-
 app/page.tsx                                  | 14 +++----
 components/CustomSpinner.tsx                  | 20 ++++-----
 components/Footer.tsx                         | 16 +++----
 components/PopupSiteLive.tsx                  |  8 ++--
 components/PreviewActionbar.tsx               |  4 +-
 components/TopMenu.tsx                        | 12 +++---
 components/resume/Education.tsx               |  4 +-
 components/resume/FullResume.tsx              |  2 +-
 components/resume/Header.tsx                  |  8 ++--
 components/resume/Summary.tsx                 |  2 +-
 components/resume/WorkExperience.tsx          | 12 +++---
 components/resume/editing/AddButton.tsx       |  2 +-
 components/resume/editing/EditResume.tsx      |  8 ++--
 components/resume/editing/EducationField.tsx  |  2 +-
 components/resume/editing/SkillField.tsx      |  4 +-
 .../resume/editing/WorkExperienceField.tsx    |  2 +-
 components/ui/dropzone.tsx                    |  8 ++--
 components/ui/theme-toggle.tsx                | 42 +++++++++++++++++++
 22 files changed, 138 insertions(+), 86 deletions(-)
 create mode 100644 components/ui/theme-toggle.tsx

diff --git a/app/(private)/upload/client.tsx b/app/(private)/upload/client.tsx
index 2761726..c00b6de 100644
--- 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
index 91b47d0..e9500f7 100644
--- 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
index ef76693..cdae94a 100644
--- 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
index b5ea15d..be52fb7 100644
--- 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
index d0971fb..74ed843 100644
--- 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
index 757f353..0b6274a 100644
--- 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
index 3af9479..f75f546 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -1,13 +1,13 @@
 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>{' '}
@@ -15,7 +15,7 @@ export function Footer() {
           <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
index 3e5d055..9763c33 100644
--- 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
index fac6f8f..4d48aed 100644
--- 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
index 661e25b..5ab48a8 100644
--- 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,12 +26,12 @@ 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>
@@ -37,7 +39,7 @@ export function TopMenu() {
               <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>
diff --git a/components/resume/Education.tsx b/components/resume/Education.tsx
index 3c7a911..faed001 100644
--- a/components/resume/Education.tsx
+++ b/components/resume/Education.tsx
@@ -30,7 +30,7 @@ function EducationItem({
             {school}
           </h3>
           <div
-            className="text-sm tabular-nums text-gray-500"
+            className="text-sm tabular-nums text-muted-foreground"
             aria-label={`Period: ${getYear(start)} to ${
               end ? ` ${getYear(end)}` : 'Present'
             }`}
@@ -40,7 +40,7 @@ function EducationItem({
         </div>
       </CardHeader>
       <CardContent
-        className="mt-2 text-design-resume print:text-[12px]"
+        className="mt-2 text-muted-foreground print:text-[12px]"
         aria-labelledby={`education-${school
           .toLowerCase()
           .replace(/\s+/g, '-')}`}
diff --git a/components/resume/FullResume.tsx b/components/resume/FullResume.tsx
index 3241111..20e0dcf 100644
--- a/components/resume/FullResume.tsx
+++ b/components/resume/FullResume.tsx
@@ -19,7 +19,7 @@ export const FullResume = ({
 
   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 header={resume?.header} picture={profilePicture} />
diff --git a/components/resume/Header.tsx b/components/resume/Header.tsx
index 893c20a..808584c 100644
--- a/components/resume/Header.tsx
+++ b/components/resume/Header.tsx
@@ -99,7 +99,7 @@ export function Header({
           {header.name}
         </h1>
         <p
-          className="max-w-md text-pretty font-mono text-sm text-design-resume print:text-[12px]"
+          className="max-w-md text-pretty font-mono text-sm text-muted-foreground print:text-[12px]"
           aria-labelledby="resume-name"
         >
           {header.shortAbout}
@@ -107,7 +107,7 @@ export function Header({
 
         <p className="max-w-md items-center text-pretty font-mono text-xs text-foreground">
           <a
-            className="inline-flex gap-x-1.5 align-baseline leading-none hover:underline text-[#9CA0A8]"
+            className="inline-flex gap-x-1.5 align-baseline leading-none hover:underline text-muted-foreground"
             href={`https://www.google.com/maps/search/${encodeURIComponent(
               header.location || ''
             )}`}
@@ -120,7 +120,7 @@ export function Header({
         </p>
 
         <div
-          className="flex gap-x-1 pt-1 font-mono text-sm text-design-resume print:hidden"
+          className="flex gap-x-1 pt-1 font-mono text-sm text-muted-foreground print:hidden"
           role="list"
           aria-label="Contact links"
         >
@@ -169,7 +169,7 @@ export function Header({
         </div>
 
         <div
-          className="hidden gap-x-2 font-mono text-sm text-design-resume print:flex print:text-[12px]"
+          className="hidden gap-x-2 font-mono text-sm text-muted-foreground print:flex print:text-[12px]"
           aria-label="Print contact information"
         >
           {socialLinks.website && (
diff --git a/components/resume/Summary.tsx b/components/resume/Summary.tsx
index e22e823..da6a7fc 100644
--- a/components/resume/Summary.tsx
+++ b/components/resume/Summary.tsx
@@ -17,7 +17,7 @@ export function Summary({ summary, className }: AboutProps) {
         About
       </h2>
       <div
-        className="text-pretty font-mono text-sm text-design-resume print:text-[12px]"
+        className="text-pretty font-mono text-sm text-muted-foreground print:text-[12px]"
         aria-labelledby="about-section"
       >
         {summary}
diff --git a/components/resume/WorkExperience.tsx b/components/resume/WorkExperience.tsx
index 1f21de9..6190d23 100644
--- a/components/resume/WorkExperience.tsx
+++ b/components/resume/WorkExperience.tsx
@@ -48,26 +48,26 @@ export function WorkExperience({
             >
               <div className="flex flex-wrap justify-between items-start self-stretch gap-2">
                 <div className="flex flex-wrap justify-start items-center gap-2">
-                  <p className="text-base font-semibold text-left text-[#050914]">
+                  <p className="text-base font-semibold text-left text-foreground">
                     {item.title}
                   </p>
-                  <div className="flex justify-center items-center relative overflow-hidden gap-2.5 px-[7px] py-0.5 rounded bg-[#eeeff0]">
-                    <p className="text-[12px] font-semibold text-center text-[#54575e]">
+                  <div className="flex justify-center items-center relative overflow-hidden gap-2.5 px-[7px] py-0.5 rounded bg-muted">
+                    <p className="text-[12px] font-semibold text-center text-muted-foreground">
                       {item.location}
                     </p>
                   </div>
                 </div>
-                <p className="text-sm text-right text-[#54575e]">
+                <p className="text-sm text-right text-muted-foreground">
                   {item.formattedDate}
                 </p>
               </div>
               <div className="flex flex-col justify-start items-start relative gap-1.5">
-                <p className="self-stretch text-sm font-medium text-left text-[#54575e] font-mono capitalize flex flex-wrap gap-1">
+                <p className="self-stretch text-sm font-medium text-left text-muted-foreground font-mono capitalize flex flex-wrap gap-1">
                   <span>{item.companyLower}</span>
                   {item.company && item.contract && <span>·</span>}
                   <span>{item.contract}</span>
                 </p>
-                <p className="self-stretch text-sm font-medium text-left text-[#6c737f]">
+                <p className="self-stretch text-sm font-medium text-left text-muted-foreground">
                   {item.description}
                 </p>
               </div>
diff --git a/components/resume/editing/AddButton.tsx b/components/resume/editing/AddButton.tsx
index 5a191e6..cf13b4f 100644
--- a/components/resume/editing/AddButton.tsx
+++ b/components/resume/editing/AddButton.tsx
@@ -8,7 +8,7 @@ interface AddButtonProps {
 export const AddButton: React.FC<AddButtonProps> = ({ label, onClick }) => {
   return (
     <button
-      className="w-full p-2 border-2 border-dashed rounded-md text-gray-500 hover:border-gray-400"
+      className="w-full p-2 border-2 border-dashed border-border rounded-md text-muted-foreground hover:border-muted-foreground"
       onClick={onClick}
     >
       + {label}
diff --git a/components/resume/editing/EditResume.tsx b/components/resume/editing/EditResume.tsx
index 2b51e75..234a07f 100644
--- a/components/resume/editing/EditResume.tsx
+++ b/components/resume/editing/EditResume.tsx
@@ -36,14 +36,14 @@ export const EditResume = ({
 
   return (
     <section
-      className="mx-auto w-full max-w-2xl space-y-8 bg-white my-8"
+      className="mx-auto w-full max-w-2xl space-y-8 bg-background my-8"
       aria-label="Resume Content editing"
     >
       <div className="flex flex-col gap-2">
         <h2 className="text-xl font-bold">Header</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="flex flex-col gap-2 col-span-2 md:col-span-1">
-            <Label htmlFor="name" className="text-sm font-medium text-gray-700">
+            <Label htmlFor="name" className="text-sm font-medium text-foreground">
               Name
             </Label>
             <Input
@@ -90,7 +90,7 @@ export const EditResume = ({
           <div className="flex flex-col gap-2 col-span-2">
             <Label
               htmlFor="shortAbout"
-              className="text-sm font-medium text-gray-700"
+              className="text-sm font-medium text-foreground"
             >
               Short About
             </Label>
@@ -115,7 +115,7 @@ export const EditResume = ({
             <div className="flex flex-col gap-2">
               <Label
                 htmlFor="email"
-                className="text-sm font-medium text-gray-700"
+                className="text-sm font-medium text-foreground"
               >
                 Email
               </Label>
diff --git a/components/resume/editing/EducationField.tsx b/components/resume/editing/EducationField.tsx
index 38cebe9..3f11962 100644
--- a/components/resume/editing/EducationField.tsx
+++ b/components/resume/editing/EducationField.tsx
@@ -26,7 +26,7 @@ export const EducationField: React.FC<EducationFieldProps> = ({
   return (
     <div className="relative p-4 border rounded-md group">
       <button
-        className="absolute top-2 right-2 text-gray-400 hover:text-red-500 transition-colors"
+        className="absolute top-2 right-2 text-muted-foreground hover:text-destructive transition-colors"
         onClick={() => onDelete(index)}
       >
         <svg
diff --git a/components/resume/editing/SkillField.tsx b/components/resume/editing/SkillField.tsx
index 6d8f043..f7ec79d 100644
--- a/components/resume/editing/SkillField.tsx
+++ b/components/resume/editing/SkillField.tsx
@@ -14,7 +14,7 @@ export const SkillField: React.FC<SkillFieldProps> = ({
   onDelete,
 }) => {
   return (
-    <div className="group relative bg-gray-100 px-3 py-1 rounded-full w-fit flex items-center gap-2">
+    <div className="group relative bg-muted px-3 py-1 rounded-full w-fit flex items-center gap-2">
       <div
         contentEditable
         suppressContentEditableWarning
@@ -29,7 +29,7 @@ export const SkillField: React.FC<SkillFieldProps> = ({
         {skill}
       </div>
       <button
-        className="text-gray-400 hover:text-red-500 transition-colors"
+        className="text-muted-foreground hover:text-destructive transition-colors"
         onClick={() => onDelete(index)}
       >
         <svg
diff --git a/components/resume/editing/WorkExperienceField.tsx b/components/resume/editing/WorkExperienceField.tsx
index 518ad5a..d87d432 100644
--- a/components/resume/editing/WorkExperienceField.tsx
+++ b/components/resume/editing/WorkExperienceField.tsx
@@ -30,7 +30,7 @@ export const WorkExperienceField: React.FC<WorkExperienceFieldProps> = ({
   return (
     <div className="relative p-4 border rounded-md group">
       <button
-        className="absolute top-2 right-2 text-gray-400 hover:text-red-500 transition-colors"
+        className="absolute top-2 right-2 text-muted-foreground hover:text-destructive transition-colors"
         onClick={() => onDelete(index)}
       >
         <svg
diff --git a/components/ui/dropzone.tsx b/components/ui/dropzone.tsx
index 1860a40..000f036 100644
--- a/components/ui/dropzone.tsx
+++ b/components/ui/dropzone.tsx
@@ -63,17 +63,17 @@ export function Dropzone({
 
       {files.length > 0 ? (
         <div className="flex flex-col items-center gap-2">
-          <div className="bg-gray-100 p-3 rounded-md">{icon}</div>
+          <div className="bg-muted p-3 rounded-md">{icon}</div>
           <div className="text-lg font-medium mt-2">{files[0].name}</div>
-          <p className="text-sm text-gray-500">
+          <p className="text-sm text-muted-foreground">
             {(files[0].size / 1024 / 1024).toFixed(2)} MB
           </p>
         </div>
       ) : (
         <>
-          <div className="bg-gray-100 p-3 rounded-md">{icon}</div>
+          <div className="bg-muted p-3 rounded-md">{icon}</div>
           <h2 className="text-lg font-medium mt-2">{title}</h2>
-          <p className="text-sm text-gray-500">{description}</p>
+          <p className="text-sm text-muted-foreground">{description}</p>
         </>
       )}
     </div>
diff --git a/components/ui/theme-toggle.tsx b/components/ui/theme-toggle.tsx
new file mode 100644
index 0000000..0554f2b
--- /dev/null
+++ b/components/ui/theme-toggle.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import * as React from 'react';
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+import { Button } from '@/components/ui/button';
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  // useEffect only runs on the client, so now we can safely show the UI
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="outline" size="icon" disabled>
+        <Sun className="h-[1.2rem] w-[1.2rem]" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    );
+  }
+
+  const toggleTheme = () => {
+    if (theme === 'dark') {
+      setTheme('light');
+    } else {
+      setTheme('dark');
+    }
+  };
+
+  return (
+    <Button variant="outline" size="icon" onClick={toggleTheme}>
+      <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}