diff --git a/assets/dark.scss b/assets/dark.scss
index c2fcaad8a..55eab1ed8 100644
--- a/assets/dark.scss
+++ b/assets/dark.scss
@@ -360,10 +360,10 @@ body[data-theme="dark"] {
     }
 
     .spoiler {
-        background-color: $light;
-        color: $light;
+        background-color: $primary-bg-subtle-dark;
+        color: $primary-bg-subtle-dark;
         &:hover {
-            background-color: $dark;
+            color: $white;
         }
     }
 
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index e65d0e1c4..18cf408a4 100644
--- a/pages/blog/[slug].vue
+++ b/pages/blog/[slug].vue
@@ -160,14 +160,14 @@ onMounted(async () => {
    }
 
    .spoiler {
-           background-color: $dark;
-           color: $dark;
-           padding: map-get($spacers, 1);
-           border-radius: $border-radius;
-           cursor: pointer;
-           transition: background-color .2s ease-in-out;
-           &:hover {
-               background-color: $light;
-           }
+       background-color: $primary-bg-subtle;
+       color: $primary-bg-subtle;
+       padding: map-get($spacers, 1);
+       border-radius: $border-radius;
+       cursor: pointer;
+       transition: color .2s ease-in-out;
+       &:hover {
+           color: $black;
        }
+   }
 </style>