Improve gallery compatibility with light and dark mode

frontend/src/components/CatalogueControls.tsx

@@ -281,7 +281,7 @@ export default function CatalogueControls({
           onClick={onToggleFilters}
           aria-expanded={showFilters}
           aria-controls="catalogue-filters"
-          className="inline-flex cursor-pointer items-center gap-3 border-0 bg-transparent px-0 py-1 text-[0.95rem] text-[#80766f] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:text-white lg:text-base"
+          className="inline-flex cursor-pointer items-center gap-3 border-0 bg-transparent px-0 py-1 text-[0.95rem] text-[#80766f] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-[#c0b5aa] dark:hover:text-white lg:text-base"
         >
           <SlidersHorizontal size={19} strokeWidth={1.5} aria-hidden="true" />
           {showFilters ? "Hide filters" : "Show filters"}
@@ -290,11 +290,11 @@ export default function CatalogueControls({
         <Link
           to={isLoggedIn ? "/profile" : "/login"}
           aria-label={isLoggedIn ? "Open profile" : "Open login"}
-          className="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white"
+          className="grid h-10 w-10 shrink-0 place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white"
         >
           <CircleUserRound size={23} strokeWidth={1.5} aria-hidden="true" />
         </Link>
-        <ThemeToggleButton className="grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white" />
+        <ThemeToggleButton className="grid h-10 w-10 shrink-0 cursor-pointer place-items-center rounded-full text-[#80766f] transition-colors hover:bg-[#f4f1ee] hover:text-[#292624] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:text-[#c0b5aa] dark:hover:bg-white/10 dark:hover:text-white" />
 
         <form role="search" onSubmit={handleSubmit} className="ml-auto flex min-w-0 flex-1 lg:max-w-[27rem]">
           <label htmlFor="artwork-search" className="sr-only">
@@ -308,12 +308,12 @@ export default function CatalogueControls({
             placeholder="Search by artist or artwork..."
             value={searchInput}
             onChange={(event) => setSearchInput(event.target.value)}
-            className="min-w-0 flex-1 rounded-none border border-r-0 border-[#d7d3d0] bg-white px-2.5 py-2 text-sm text-[#292624] placeholder:text-gray-500 focus:border-[#80766f] focus:outline-2 focus:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea] dark:placeholder:text-gray-400 lg:px-3"
+            className="min-w-0 flex-1 rounded-none border border-r-0 border-[#d7d3d0] bg-white px-2.5 py-2 text-sm text-[#292624] placeholder:text-gray-500 focus:border-[#80766f] focus:outline-2 focus:outline-gray-700 dark:focus:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#f3f0ea] dark:placeholder:text-gray-400 lg:px-3"
           />
 
           <button
             type="submit"
-            className="grid shrink-0 cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-3 text-[#514943] hover:bg-[#f4f1ee] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] dark:hover:bg-[#35322e] lg:px-4"
+            className="grid shrink-0 cursor-pointer place-items-center border border-[#d7d3d0] bg-white px-3 text-[#514943] hover:bg-[#f4f1ee] focus-visible:z-10 focus-visible:outline-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#242321] dark:text-[#e6dfd6] dark:hover:bg-[#35322e] lg:px-4"
             aria-label="Search artworks"
           >
             <Search size={18} aria-hidden="true" />

frontend/src/components/Hero.tsx

@@ -45,18 +45,18 @@ function Hero({ onExploreClick }: HeroProps) {
           <Link
             to={isLoggedIn ? "/profile" : "/login"}
             aria-label={isLoggedIn ? "Open profile" : "Open login"}
-            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+            className="flex min-h-20 flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
           >
             <CircleUserRound size={22} strokeWidth={1.5} aria-hidden="true" />
             <span>{isLoggedIn ? "Profile" : "Log in"}</span>
           </Link>
 
-          <ThemeToggleButton showLabel className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm" />
+          <ThemeToggleButton showLabel className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color] hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm" />
 
           <button
             type="button"
             onClick={onExploreClick}
-            className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-colors hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#80766f] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
+            className="flex min-h-20 cursor-pointer flex-col items-center justify-center gap-2 rounded border border-[#dedbd8] bg-white/60 px-2 py-3 text-center text-xs text-[#514943] transition-[background-color,border-color,color] hover:border-[#aaa19a] hover:bg-[#f7f5f2] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#22211f]/70 dark:text-[#e6dfd6] dark:hover:border-[#777068] dark:hover:bg-[#302e2a] sm:text-sm"
           >
             <ArrowDown size={20} strokeWidth={1.5} aria-hidden="true" />
             <span>Explore art</span>

frontend/src/components/artwork/ArtworkCard.css

@@ -41,3 +41,7 @@
   color: #595959;
   overflow-wrap: anywhere;
 }
+
+.dark .artwork-card__artist {
+  color: #d1d5db;
+}

frontend/src/components/artwork/ArtworkCard.tsx

@@ -66,7 +66,7 @@ export default function ArtworkCard({
     <article className="artwork-card relative border-[#dedede] bg-white text-[#171717] dark:border-[#47433e] dark:bg-[#22211f] dark:text-[#f3f0ea]">
       <Link
         to={`/artworks/${artwork.id}`}
-        className="group block"
+        className="group block rounded-sm focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
         state={{ from: `${location.pathname}${location.search}`, showFilters }}
         onClick={rememberCataloguePosition}
       >
@@ -99,7 +99,7 @@ export default function ArtworkCard({
             if (isLoggedIn) setShowGalleryModal(true);
             else navigate("/login");
           }}
-          className="absolute right-5 top-5 z-10 grid h-10 w-10 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white/95 text-gray-700 shadow-sm transition hover:border-gray-500 hover:bg-white hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#5b554e] dark:bg-[#292724]/95 dark:text-gray-200 dark:hover:border-gray-400 dark:hover:bg-[#35322e] dark:hover:text-white"
+          className="absolute right-5 top-5 z-10 grid h-10 w-10 cursor-pointer place-items-center rounded-full border border-gray-300 bg-white/95 text-gray-700 shadow-sm transition-[background-color,border-color,color] hover:border-gray-500 hover:bg-white hover:text-black focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:border-[#5b554e] dark:bg-[#292724]/95 dark:text-gray-200 dark:hover:border-gray-400 dark:hover:bg-[#35322e] dark:hover:text-white dark:focus-visible:outline-[#e6dfd6]"
         >
           <Plus size={21} strokeWidth={1.7} aria-hidden="true" />
         </button>

frontend/src/components/gallery/AddToGalleryModal.tsx

@@ -174,7 +174,7 @@ export default function AddToGalleryModal({
         )}
 
         {message && (
-          <p role="alert" className="mt-4 text-sm text-red-600">
+          <p role="alert" className="mt-4 text-sm text-red-600 dark:text-red-400">
             {message}
           </p>
         )}

frontend/src/components/gallery/CreateGalleryModal.tsx

@@ -1,5 +1,5 @@
 import { LucideX } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useAuthStore } from "../../store/authStore";
 
 type CreateGalleryModalProps = {
@@ -16,6 +16,15 @@ export default function CreateGalleryModal({
   const [error, setError] = useState("");
 
   const token = useAuthStore((state) => state.token);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+
+    dialog.showModal();
+    return () => dialog.close();
+  }, []);
 
   async function handleCreateGallery() {
     if (!title.trim() || isCreating) return;
@@ -70,51 +79,59 @@ export default function CreateGalleryModal({
   }
 
   return (
-    <div className="fixed inset-0 z-50 flex text-center items-center justify-center bg-black/50">
-      <div className="relative w-3/4 h-3/4 rounded-2xl bg-white p-8 shadow-xl dark:bg-[#242321] dark:text-[#f3f0ea]">
-        <button
-          type="button"
-          onClick={onClose}
-          className="absolute top-6 right-6 cursor-pointer"
-          aria-label="Close"
-        >
-          <LucideX size={28} />
-        </button>
-
-        <h2 className="text-3xl font-light">Create a new gallery</h2>
-        <div className="illustration flex items-center justify-center mt-10">
-          <div className="right h-40 w-40 bg-gray-300 border-2 border-white rounded-tl-lg rounded-bl-lg"></div>
-          <div className="left">
-            <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-tr-lg"></div>
-            <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-br-lg"></div>
-          </div>
+    <dialog
+      ref={dialogRef}
+      aria-labelledby="create-gallery-title"
+      onCancel={(event) => {
+        event.preventDefault();
+        onClose();
+      }}
+      className="relative m-auto h-3/4 w-3/4 overflow-y-auto rounded-2xl bg-white p-8 text-center shadow-xl backdrop:bg-black/50 dark:bg-[#242321] dark:text-[#f3f0ea]"
+    >
+      <button
+        type="button"
+        onClick={onClose}
+        className="absolute right-6 top-6 cursor-pointer rounded focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
+        aria-label="Close"
+      >
+        <LucideX size={28} />
+      </button>
+
+      <h2 id="create-gallery-title" className="text-3xl font-light">
+        Create a new gallery
+      </h2>
+
+      <div className="illustration flex items-center justify-center mt-10">
+        <div className="right h-40 w-40 bg-gray-300 border-2 border-white rounded-tl-lg rounded-bl-lg"></div>
+        <div className="left">
+          <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-tr-lg"></div>
+          <div className="h-20 w-40 bg-gray-300 border-2 border-white rounded-br-lg"></div>
         </div>
-        <input
-          id="gallery-title"
-          type="text"
-          value={title}
-          onChange={(e) => setTitle(e.target.value)}
-          placeholder="Enter gallery title"
-          className="w-full rounded-lg border mt-10 border-gray-300 p-3 outline-none focus:border-blue-600 dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
-        />
-        <button
-          type="button"
-          onClick={handleCreateGallery}
-          disabled={!title.trim() || isCreating}
-          className={`w-full rounded-full h-15 text-xl mt-10 transition-colors ${
-            title.trim() && !isCreating
-              ? "bg-amber-300 cursor-pointer hover:bg-amber-400"
-              : "bg-gray-300 text-gray-500 cursor-not-allowed"
-          }`}
-        >
-          {isCreating ? "Creating..." : "Create"}
-        </button>
-        {error && (
-          <p role="alert" className="mt-4 text-red-600">
-            {error}
-          </p>
-        )}
       </div>
-    </div>
+      <input
+        id="gallery-title"
+        type="text"
+        value={title}
+        onChange={(e) => setTitle(e.target.value)}
+        placeholder="Enter gallery title"
+        className="w-full rounded-lg border mt-10 border-gray-300 p-3 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] dark:border-[#504b46] dark:bg-[#1d1c1a] dark:text-[#f3f0ea] dark:placeholder:text-gray-400"
+      />
+      <button
+        type="button"
+        onClick={handleCreateGallery}
+        disabled={!title.trim() || isCreating}
+        className={`w-full rounded-full h-15 text-xl mt-10 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6] ${title.trim() && !isCreating
+          ? "bg-amber-300 cursor-pointer hover:bg-amber-400 text-gray-900"
+          : "bg-gray-300 text-gray-500 cursor-not-allowed"
+          }`}
+      >
+        {isCreating ? "Creating..." : "Create"}
+      </button>
+      {error && (
+        <p role="alert" className="mt-4 text-red-600 dark:text-red-400">
+          {error}
+        </p>
+      )}
+    </dialog>
   );
 }

frontend/src/components/gallery/DeleteGalleryDialog.tsx

@@ -66,7 +66,7 @@ export default function DeleteGalleryDialog({
           type="button"
           onClick={onCancel}
           disabled={deleting}
-          className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:opacity-50 dark:border-[#504b46] dark:hover:bg-[#302e2a]"
+          className="min-h-11 cursor-pointer rounded border border-gray-300 px-4 py-2 text-sm hover:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 disabled:opacity-50 dark:border-[#504b46] dark:hover:bg-[#302e2a] dark:focus-visible:outline-[#e6dfd6]"
         >
           Cancel
         </button>
@@ -75,7 +75,7 @@ export default function DeleteGalleryDialog({
           type="button"
           onClick={onConfirm}
           disabled={deleting}
-          className="min-h-11 cursor-pointer rounded bg-red-700 px-4 py-2 text-sm text-white hover:bg-red-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 disabled:cursor-wait disabled:opacity-50"
+          className="min-h-11 cursor-pointer rounded bg-red-700 px-4 py-2 text-sm text-white hover:bg-red-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-700 disabled:cursor-wait disabled:opacity-50 dark:focus-visible:outline-red-400  "
         >
           {deleting ? "Deleting..." : "Delete gallery"}
         </button>

frontend/src/components/gallery/GalleryCard.tsx

@@ -16,7 +16,7 @@ export default function GalleryCard({
   return (
     <Link
       to={`/galleries/${id}`}
-      className="block w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700"
+      className="block w-64 max-w-full min-w-0 rounded-xl focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-gray-700 dark:focus-visible:outline-[#e6dfd6]"
     >
       {imageUrls.length === 0 ? (
         <div className="flex h-40 w-full items-center justify-center rounded-xl bg-gray-200 dark:bg-[#302e2a]">