From 05fd9bdd2c21bdd4db0ee3fbf695fb80cd539ba9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 24 Dec 2022 22:52:19 +0800
Subject: [PATCH] Make spoiler effect work in dark mode

---
 index.html                | 26 ++++++++++++++++++++++++++
 src/components/status.css |  7 ++++++-
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 08a9875..3bac29d 100644
--- a/index.html
+++ b/index.html
@@ -63,6 +63,32 @@
           result="displacementMap"
         />
       </filter>
+      <filter id="spoiler-dark" x="-20%" y="-20%" width="140%" height="140%">
+        <feColorMatrix
+          type="matrix"
+          values="1 0 0 .8 0
+            1 0 0 .8 0
+            1 0 0 .8 0
+            0 0 0 .5 0"
+          in="SourceGraphic"
+          result="colormatrix"
+        />
+        <feTurbulence
+          type="turbulence"
+          baseFrequency=".5 .5"
+          numOctaves="10"
+          seed="1"
+          result="turbulence"
+        />
+        <feDisplacementMap
+          in="colormatrix"
+          in2="turbulence"
+          scale="20"
+          xChannelSelector="R"
+          yChannelSelector="B"
+          result="displacementMap"
+        />
+      </filter>
     </svg>
   </body>
 </html>
diff --git a/src/components/status.css b/src/components/status.css
index d45913f..3e09453 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -185,6 +185,11 @@
   user-select: none;
   contain: layout;
 }
+@media (prefers-color-scheme: dark) {
+  .status .content-container.has-spoiler .spoiler ~ * {
+    filter: url(#spoiler-dark);
+  }
+}
 .status .content-container.has-spoiler .spoiler ~ .content ~ * {
   opacity: 0.5;
 }
@@ -192,7 +197,7 @@
   border-style: dotted;
 }
 .status .content-container.show-spoiler .spoiler ~ * {
-  filter: none;
+  filter: none !important;
   transform: none;
   pointer-events: auto;
   user-select: auto;