diff --git a/src/components/Placeholder/Placeholder.jsx b/src/components/Placeholder/Placeholder.jsx
index dcfac6a150a4..db63f42b3521 100644
--- a/src/components/Placeholder/Placeholder.jsx
+++ b/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>
diff --git a/src/components/Placeholder/__snapshots__/Placeholder.test.jsx.snap b/src/components/Placeholder/__snapshots__/Placeholder.test.jsx.snap
index 07a0ffbab705..7e2b20f8dc29 100644
--- a/src/components/Placeholder/__snapshots__/Placeholder.test.jsx.snap
+++ b/src/components/Placeholder/__snapshots__/Placeholder.test.jsx.snap
@@ -5,17 +5,17 @@ exports[`PlaceholderComponent renders correctly 1`] = `
   class="placeholder"
 >
   <p
-    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-3/4"
+    class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-3/4"
   >
      
   </p>
   <p
-    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-[85%]"
+    class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-[85%]"
   >
      
   </p>
   <p
-    class="bg-gray-100 font-sans overflow-hidden relative animate-pulse w-1/2"
+    class="bg-gray-100 dark:bg-gray-800 font-sans overflow-hidden relative animate-pulse w-1/2"
   >
      
   </p>
diff --git a/src/styles/dark.css b/src/styles/dark.css
index 848e50c9c2e3..c761f6a8448a 100644
--- a/src/styles/dark.css
+++ b/src/styles/dark.css
@@ -118,15 +118,6 @@
     @apply bg-[#121212] text-[#9ab3c0];
   }
 
-  .placeholder h2,
-  .placeholder p {
-    @apply bg-[#252525];
-
-    &:after {
-      background: linear-gradient(90deg, #252525, #121212, #252525);
-    }
-  }
-
   .footer-openjsf-logo {
     @apply invert;
   }