diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css
index 8f6a4bcc5..e2c5ad565 100644
--- a/app/javascript/src/styles/base/040_colors.css
+++ b/app/javascript/src/styles/base/040_colors.css
@@ -177,7 +177,6 @@
   --dtext-blockquote-background: #EEE;
   --dtext-code-background: #EEE;
   --dtext-expand-border: 1px inset #666;
-  --dtext-spoiler-color: black;
   --dtext-spoiler-background-color: black;
   --dtext-spoiler-hover-color: white;
 
@@ -312,7 +311,6 @@ body[data-user-theme="dark"] {
   --dtext-blockquote-border: 1px solid var(--grey-4);
   --dtext-code-background: var(--grey-2);
   --dtext-expand-border: 1px inset var(--grey-4);
-  --dtext-spoiler-color: black;
   --dtext-spoiler-background-color: black;
   --dtext-spoiler-hover-color: var(--text-color);
 
diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index f93cfea03..5518c7daf 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -113,14 +113,17 @@ div.prose {
     text-decoration: dotted underline;
   }
 
-  .spoiler, .spoiler * {
-    color: var(--dtext-spoiler-color);
-    background: var(--dtext-spoiler-background-color);
+  .spoiler:not(:hover), .spoiler:not(:hover) * {
+    color: transparent !important;
   }
 
-  .spoiler:hover, .spoiler:hover * {
+  .spoiler:hover {
     color: var(--dtext-spoiler-hover-color);
   }
+
+  .spoiler {
+    background: var(--dtext-spoiler-background-color);
+  }
 }
 
 // avoid empty gaps beneath dtext blocks in table rows.