fix dark/light theme details page

vabatista · Mar 13, 2024 · e533f74 · e533f74
1 parent e182cb8
commit e533f74
Showing 1 changed file with 13 additions and 4 deletions.
diff --git a/src/pages/details-page.tsx b/src/pages/details-page.tsx
@@ -17,6 +17,7 @@ export default function DetailsPage() {
   const { postId } = useParams();
   const navigate = useNavigate();
 
+
   useEffect(() => {
     const getPostById = async () => {
       try {
@@ -34,6 +35,14 @@ export default function DetailsPage() {
     }
   }, [post]);
 
+  useEffect(() => {
+    const storedTheme = localStorage.getItem('theme') ?? 'light';
+    const textContainer = document.getElementById('textcontainer');
+    if (textContainer) {
+      textContainer.setAttribute('data-color-mode', storedTheme);
+    }
+  }, [])
+
   if (!loading)
     return (
       <div className="min-h-screen bg-light dark:bg-dark">
@@ -58,10 +67,10 @@ export default function DetailsPage() {
             </p>
           </div>
         </div>
-        <div className="items-center gap-y-4 px-4 py-10">
-          <div>
-            <MDEditor.Markdown source={post.description} className={style.reactMarkDown} style={{ whiteSpace: 'pre-wrap' }} />
-          </div>
+        <div className="items-center gap-y-4 px-4 py-10" >
+            <div id="textcontainer" className="wmde-markdown-var">
+              <MDEditor.Markdown source={post.description} className="  bg-light dark:bg-dark" style={{ whiteSpace: 'pre-wrap' }} />
+            </div>
         </div>
       </div>
     );