Feat: enhance dark mode support and improve styling for MorePage

Author: rahul-vyas-dev

src/pages/More.tsx

@@ -20,6 +20,7 @@ const MorePage: React.FC = () => {
   const [pagesByCategory, setPagesByCategory] = useState<
     Record<string, MorePageType[]>
   >({});
+  const [isDarkMode, setIsDarkMode] = useState(false);
   const [activeCategory, setActiveCategory] = useState<string>('All');
   const [notFoundSlug, setNotFoundSlug] = useState<string | null>(null);
   const [zoomableImages, setZoomableImages] = useState<HTMLImageElement[]>([]);
@@ -28,6 +29,20 @@ const MorePage: React.FC = () => {
     alt: string;
   } | null>(null);
 
+  useEffect(() => {
+    const dark = document.documentElement.classList.contains('dark');
+    setIsDarkMode(dark);
+
+    const observer = new MutationObserver(() => {
+      const updatedDark = document.documentElement.classList.contains('dark');
+      setIsDarkMode(updatedDark);
+    });
+
+    observer.observe(document.documentElement, { attributes: true });
+
+    return () => observer.disconnect();
+  }, []);
+
   useEffect(() => {
     const loadPage = async () => {
       setIsLoading(true);
@@ -45,7 +60,7 @@ const MorePage: React.FC = () => {
           if (fetchedPage) {
             setPage(fetchedPage);
             setNotFoundSlug(null);
-            document.title = fetchedPage.title + ' - Sugar Labs';
+            document.title = `${fetchedPage.title} - Sugar Labs`;
 
             if (fetchedPage.category) {
               setActiveCategory(fetchedPage.category);
@@ -132,7 +147,11 @@ const MorePage: React.FC = () => {
             className="text-blue-600 hover:underline mb-2 inline-block"
           >
             <motion.button
-              className="mb-6 px-4 py-2 flex items-center text-blue-600 hover:text-blue-700 transition-colors rounded-md hover:bg-blue-50"
+              className={
+                'mb-6 px-4 py-2 flex items-center text-blue-600 ' +
+                'hover:text-blue-700 transition-colors rounded-md ' +
+                'hover:bg-blue-50'
+              }
               whileHover={{ scale: 1.05 }}
               whileTap={{ scale: 0.95 }}
             >
@@ -184,7 +203,7 @@ const MorePage: React.FC = () => {
               <h3 className="font-bold text-xl mb-4">
                 {activeCategory === 'All'
                   ? 'All Pages'
-                  : activeCategory + ' Pages'}
+                  : `${activeCategory} Pages`}
               </h3>
               <ul className="space-y-2">
                 {pagesByCategory[activeCategory]?.map((linkPage) => (
@@ -213,7 +232,11 @@ const MorePage: React.FC = () => {
             transition={{ duration: 0.5 }}
             key={page?.slug}
           >
-            <div className="bg-white rounded-lg shadow-md p-6">
+            <div
+              className={`${
+                isDarkMode ? 'bg-amber-950' : 'bg-white'
+              } rounded-lg shadow-md p-6`}
+            >
               {page ? (
                 <div className="prose prose-lg max-w-none">
                   <MarkdownRenderer
@@ -297,7 +320,12 @@ const MorePage: React.FC = () => {
             </p>
             <button
               onClick={closeImageModal}
-              className="absolute top-2 right-2 text-white text-2xl hover:text-gray-300 bg-black bg-opacity-50 rounded-full w-8 h-8 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white"
+              className={
+                'absolute top-2 right-2 text-white text-2xl ' +
+                'hover:text-gray-300 bg-black bg-opacity-50 rounded-full ' +
+                'w-8 h-8 flex items-center justify-center ' +
+                'focus:outline-none focus:ring-2 focus:ring-white'
+              }
               aria-label="Close image"
             >
               &times;