styles: add dark variant for placeholder component

Author: TusharThakur04

src/components/Placeholder/Placeholder.jsx

@@ -1,34 +1,34 @@
 // Placeholder string
 const placeholderString = () => `
   <div class="placeholder">
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
-    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
-    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</h2>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</p>
-    <h2 class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
-    <p class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <h2 class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <h2 class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</h2>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</p>
+    <h2 class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[35%]">&nbsp;</h2>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">&nbsp;</p>
+    <p class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">&nbsp;</p>
   </div>
 `;
 
 function PlaceholderComponent() {
   return (
     <div className="placeholder">
-      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4">
+      <p className="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4">
         &nbsp;
       </p>
-      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]">
+      <p className="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]">
         &nbsp;
       </p>
-      <p className="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2">
+      <p className="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2">
         &nbsp;
       </p>
     </div>

src/styles/dark.css

@@ -118,14 +118,14 @@
     @apply bg-[#121212] text-[#9ab3c0];
   }
 
-  .placeholder h2,
+  /* .placeholder h2,
   .placeholder p {
     @apply bg-[#252525];
 
     &:after {
       background: linear-gradient(90deg, #252525, #121212, #252525);
     }
-  }
+  } */
 
   .footer-openjsf-logo {
     @apply invert;