feat: implement dynamic theme switching with dark mode support

components/card/card.tsx

@@ -33,8 +33,11 @@
 
     return (
         <Box
-            className="flex flex-col shadow-md border-0 m-2 p-4 bg-neutral-100 rounded-md dark:bg-neutralGray-700 dark:text-white dark:shadow-gray-900"
-            style={{ height: thumbnail ? heightWithThumbnail : heightWithoutThumbnail }}
+            className="flex flex-col shadow-md border-0 m-2 p-4 rounded-md dark:text-white dark:shadow-gray-900"
+            style={{ 
+                backgroundColor: 'var(--theme-tertiary-100)',
+                height: thumbnail ? heightWithThumbnail : heightWithoutThumbnail 
+            }}
         >
             <Box style={{ flexGrow: 1, display: "flex", flexDirection: "column" }}>
                 {thumbnail && (
@@ -57,7 +60,7 @@
                             {
                                 tagsArray.length ?
                                     tagsArray.map(
-                                        (tag) => <Badge text={tag} className="mr-2 dark:bg-dark-primary-300" key={tag}/>,
+                                        (tag) => <Badge text={tag} className="mr-2" key={tag}/>,
                                     )
                                     : ""}
                         </div>

components/header/header.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import React, { useState } from "react";
 import { Burger, Box, Paper } from "@mantine/core";
 import Button from "../tailwind/button";
+import ThemeSwitcher from "../theme-switcher/ThemeSwitcher";
 
 export interface HeaderProps {
     logoUrl: string;
@@ -21,7 +22,7 @@ export const Header: React.FC<HeaderProps> = ({logoUrl, navMap = []}) => {
     };
 
     return (
-        <Box component="header" className="bg-brandMutedYellow-600 py-4 md:py-8 relative">
+        <Box component="header" className="py-4 md:py-8 relative" style={{ backgroundColor: "var(--theme-primary-600)" }}>
             <Box className="container flex justify-between items-center">
                 <Link href="/">
                     <Image height={56} width={250} src={logoUrl} alt="Logo" priority />
@@ -37,6 +38,7 @@ export const Header: React.FC<HeaderProps> = ({logoUrl, navMap = []}) => {
                             </Link>
                         </Button>
                     ))}
+                        <ThemeSwitcher variant="both" size="md" />
                 </Box>
 
                 <Box className="md:hidden ml-4">
@@ -52,7 +54,7 @@ export const Header: React.FC<HeaderProps> = ({logoUrl, navMap = []}) => {
             {opened && (
                 <Paper 
                     className="md:hidden absolute top-full left-0 right-0 z-20 shadow-lg"
-                    bg="brandMutedYellow.6"
+                    bg="primary.6"
                     p="md" 
                     withBorder
                     radius={0}
@@ -70,6 +72,9 @@ export const Header: React.FC<HeaderProps> = ({logoUrl, navMap = []}) => {
                                 </Link>
                             </li>
                         ))}
+                        <li className="px-3 py-2">
+                            <ThemeSwitcher variant="both" size="sm" />
+                        </li>
                     </ul>
                 </Paper>
             )}

components/horizontal-card/horizontal-card.tsx

@@ -8,10 +8,10 @@
 const HorizontalCard = ({
                             title, description,
                         }: HorizontalCardProps) => (
-    <div className="bg-white shadow-md my-2 rounded-xl dark:bg-neutralGray-800 dark:text-white" data-aos="fade-right">
+    <div className="shadow-md my-2 rounded-xl dark:text-white" style={{ backgroundColor: 'var(--theme-tertiary-50)' }} data-aos="fade-right">
         <div className="flex p-8">
             <div className="pl-4">
-                <Title order={5} className="text-brandMutedYellow-700 dark:text-brandMutedYellow-200 mb-4">{title}</Title>
+                <Title order={5} className="mb-4" style={{ color: 'var(--theme-primary-700)' }}>{title}</Title>
                 <Text className="dark:text-white"> 
                     {description}
                 </Text>

components/instagram/gallery.tsx

@@ -92,11 +92,11 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
     };
 
     return (
-        <div className="bg-brandMutedYellow-100 dark:bg-brandMutedYellow-800 min-h-screen">
+        <div className="bg-primary-100 dark:bg-primary-800 min-h-screen">
             <main className="container mx-auto px-6 py-12">
                 <header className="text-center mb-12">
-                    <h1 className="text-4xl sm:text-5xl font-bold text-neutralGray-900 dark:text-white mb-4">My Photo Book</h1>
-                    <p className="text-lg text-neutralGray-700 dark:text-neutralGray-300 max-w-2xl mx-auto">
+                    <h1 className="text-4xl sm:text-5xl font-bold text-tertiary-900 dark:text-white mb-4">My Photo Book</h1>
+                    <p className="text-lg text-tertiary-700 dark:text-tertiary-300 max-w-2xl mx-auto">
                         A collection of moments and memories captured during my journeys around the world.
                     </p>
                 </header>
@@ -109,8 +109,8 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
                             onClick={() => setActiveFilter(filter.key)}
                             className={`px-4 py-2 rounded-lg font-medium text-sm sm:text-base transition-colors duration-150
                                 ${activeFilter === filter.key
-                                    ? "bg-brandMutedYellow-500 text-neutralGray-900 border border-brandMutedYellow-500 dark:bg-brandMutedYellow-700 dark:text-white"
-                                    : "bg-white text-neutralGray-900 border border-neutralGray-300 hover:bg-brandMutedYellow-100 hover:border-brandMutedYellow-500 dark:bg-neutralGray-800 dark:text-white dark:border-neutralGray-700 dark:hover:bg-brandMutedYellow-800 dark:hover:border-brandMutedYellow-700"
+                                    ? "bg-primary-500 text-tertiary-900 border border-primary-500 dark:bg-primary-700 dark:text-white"
+                                    : "bg-white text-tertiary-900 border border-tertiary-300 hover:bg-primary-100 hover:border-primary-500 dark:bg-tertiary-800 dark:text-white dark:border-tertiary-700 dark:hover:bg-primary-800 dark:hover:border-primary-700"
                                 }`}
                         >
                             {filter.label}
@@ -124,13 +124,13 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
                         filteredImages.map((image, index) => (
                             <div
                                 key={image.id || index}
-                                className="group cursor-pointer overflow-hidden rounded-lg shadow-sm bg-white dark:bg-neutralGray-800 relative"
+                                className="group cursor-pointer overflow-hidden rounded-lg shadow-sm bg-white dark:bg-tertiary-800 relative"
                                 onClick={() => openModal(index)}
                             >
                                 {/* Loading spinner */}
                                 {imageLoading[image.id] !== false && (
-                                    <div className="absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-neutralGray-800/60 z-10">
-                                        <div className="w-8 h-8 border-4 border-brandMutedYellow-500 border-t-transparent rounded-full animate-spin"></div>
+                                    <div className="absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-tertiary-800/60 z-10">
+                                        <div className="w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
                                     </div>
                                 )}
                                 <Image
@@ -143,15 +143,15 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
                                     style={imageLoading[image.id] !== false ? { visibility: "hidden" } : {}}
                                 />
                                 <div className="p-3">
-                                    <p className="text-sm font-medium text-neutralGray-900 dark:text-white truncate" title={image.caption}>
+                                    <p className="text-sm font-medium text-tertiary-900 dark:text-white truncate" title={image.caption}>
                                         {image.caption}
                                     </p>
-                                    <p className="text-xs text-neutralGray-700 dark:text-neutralGray-300 capitalize">{image.category}</p>
+                                    <p className="text-xs text-tertiary-700 dark:text-tertiary-300 capitalize">{image.category}</p>
                                 </div>
                             </div>
                         ))
                     ) : (
-                        <p className="col-span-full text-center text-neutralGray-700 dark:text-neutralGray-300">
+                        <p className="col-span-full text-center text-tertiary-700 dark:text-tertiary-300">
                             No photos found for this category. More coming soon!
                         </p>
                     )}
@@ -168,25 +168,25 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
                     aria-labelledby="modalTitle"
                 >
                     <div
-                        className="mx-auto p-4 sm:p-6 bg-white dark:bg-neutralGray-800 rounded-lg shadow-xl w-11/12 md:w-3/4 lg:w-1/2 relative transform transition-all duration-300 ease-out max-h-[90vh]"
+                        className="mx-auto p-4 sm:p-6 bg-white dark:bg-tertiary-800 rounded-lg shadow-xl w-11/12 md:w-3/4 lg:w-1/2 relative transform transition-all duration-300 ease-out max-h-[90vh]"
                         onClick={(e) => e.stopPropagation()}
                     >
-                        <div className="flex justify-between items-center pb-3 border-b border-neutralGray-200 dark:border-neutralGray-700">
-                            <h3 id="modalTitle" className="text-xl font-semibold text-neutralGray-900 dark:text-white truncate max-w-[calc(100%-3rem)]">
+                        <div className="flex justify-between items-center pb-3 border-b border-tertiary-200 dark:border-tertiary-700">
+                            <h3 id="modalTitle" className="text-xl font-semibold text-tertiary-900 dark:text-white truncate max-w-[calc(100%-3rem)]">
                                 {modalImageDetails.caption || "Image Preview"}
                             </h3>
                             <button
                                 onClick={closeModal}
-                                className="text-neutralGray-400 hover:text-neutralGray-600 dark:text-neutralGray-500 dark:hover:text-neutralGray-300 transition-colors p-1 rounded-full"
+                                className="text-tertiary-400 hover:text-tertiary-600 dark:text-tertiary-500 dark:hover:text-tertiary-300 transition-colors p-1 rounded-full"
                                 aria-label="Close modal"
                             >
                                 <CloseIcon />
                             </button>
                         </div>
                         <div className="py-4 text-center relative">
                             {modalImageLoading && (
-                                <div className="absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-neutralGray-800/60 z-10">
-                                    <div className="w-8 h-8 border-4 border-brandMutedYellow-500 border-t-transparent rounded-full animate-spin"></div>
+                                <div className="absolute inset-0 flex items-center justify-center bg-white/60 dark:bg-tertiary-800/60 z-10">
+                                    <div className="w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
                                 </div>
                             )}
                             <Image
@@ -198,22 +198,22 @@ export default function PhotoGallery({ galleryItems }: PhotoGalleryProps) {
                                 onLoad={() => setModalImageLoading(false)}
                                 style={modalImageLoading ? { visibility: "hidden" } : {}}
                             />
-                            <p className="text-neutralGray-700 dark:text-neutralGray-300 text-sm mt-3">{modalImageDetails.caption}</p>
+                            <p className="text-tertiary-700 dark:text-tertiary-300 text-sm mt-3">{modalImageDetails.caption}</p>
                             {filteredImages[currentImageIndex]?.location && (
-                                <p className="text-xs text-neutralGray-600 dark:text-neutralGray-400 mt-1">{filteredImages[currentImageIndex].location}</p>
+                                <p className="text-xs text-tertiary-600 dark:text-tertiary-400 mt-1">{filteredImages[currentImageIndex].location}</p>
                             )}
                         </div>
-                        <div className="flex justify-between items-center pt-3 border-t border-neutralGray-200 dark:border-neutralGray-700">
+                        <div className="flex justify-between items-center pt-3 border-t border-tertiary-200 dark:border-tertiary-700">
                             <button
                                 onClick={showPrevImage}
-                                className="bg-brandMutedYellow-500 text-neutralGray-900 dark:bg-brandMutedYellow-700 dark:text-white px-4 py-2 rounded-lg hover:bg-brandMutedYellow-600 dark:hover:bg-brandMutedYellow-800 transition-colors text-sm font-medium"
+                                className="bg-primary-500 text-tertiary-900 dark:bg-primary-700 dark:text-white px-4 py-2 rounded-lg hover:bg-primary-600 dark:hover:bg-primary-800 transition-colors text-sm font-medium"
                                 aria-label="Previous image"
                             >
                                 &larr; Previous
                             </button>
                             <button
                                 onClick={showNextImage}
-                                className="bg-brandMutedYellow-500 text-neutralGray-900 dark:bg-brandMutedYellow-700 dark:text-white px-4 py-2 rounded-lg hover:bg-brandMutedYellow-600 dark:hover:bg-brandMutedYellow-800 transition-colors text-sm font-medium"
+                                className="bg-primary-500 text-tertiary-900 dark:bg-primary-700 dark:text-white px-4 py-2 rounded-lg hover:bg-primary-600 dark:hover:bg-primary-800 transition-colors text-sm font-medium"
                                 aria-label="Next image"
                             >
                                 Next &rarr;

components/markdown-renderer/markdown-renderer.tsx

@@ -31,7 +31,7 @@ export default function MarkdownRenderer({ content }: { content: string }) {
   if (error) return <div className="text-center py-8 text-red-500">Failed to load content.</div>;
 
   return (
-    <div className="markdown-body text-neutralGray-900 dark:text-white">
+    <div className="markdown-body text-tertiary-900 dark:text-white">
       <ReactMarkdown
         rehypePlugins={[rehypeRaw]}
         components={{

components/tailwind/badge.tsx

@@ -1,7 +1,13 @@
 export default function Badge({text, className} : {text: string, className?: string}) {
     return (
         <span
-            className={`inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 ${className}`}>
+            className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${className}`}
+            style={{
+                backgroundColor: "var(--theme-primary-100)",
+                color: "var(--theme-primary-700)",
+                ringColor: "var(--theme-primary-700)"
+            }}
+        >
         {text}
             </span>
     );

components/tailwind/section.tsx

@@ -12,10 +12,12 @@
     return (
         <section
             id={id}
-            className={`
-            mb-16 p-8
-            ${background === "primary" ? "bg-brandMutedYellow-100 dark:bg-brandMutedYellow-800" : "bg-white dark:bg-neutralGray-800"}
-            ${container ? "container" : ""}`.trim().replace(/\s+/g, " ")}
+            className={`mb-16 p-8 ${container ? "container" : ""}`}
+            style={{ 
+                backgroundColor: background === "primary" 
+                    ? 'var(--theme-primary-100)' 
+                    : 'var(--theme-tertiary-50)'
+            }}
         >
             {heading &&  <h3 className="text-center my-4 text-2xl font-weight-600 dark:text-white">{heading}</h3>}
             {children}