fix: 404 image filter overriding

Former-commit-id: af2691e80de7d0df1cc71dcc9619a4400a29c0b7

1 files changed, 6 insertions, 2 deletions

diff --git a/layouts/404.html b/layouts/404.html
index f01e92f0..0beea0c1 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -14,9 +14,13 @@
         color: var(--secondary-text-color);
         margin: 0;
     }
+
     .image-404 {
         width: 10rem;
-        filter: url(#xs)
+        filter: url(#xs);
+        @media (prefers-color-scheme: dark) {
+            filter: url(#xs) invert(1);
+        }
     }
 
     @media screen and (min-width: 768px) {
@@ -32,7 +36,7 @@
     }
     </style>
     <article class="page-404">
-        <img src="/img/ghost-window.svg" class="image-404 invert-if-dark" />
+        <img src="/img/ghost-window.svg" class="image-404" />
         <div class="markdown-body">
             <h1 class="title-404">404</h1>
             <p>Windows 和幽灵偷走了你的页面</p>