diff --git a/src/styles/index.scss b/src/styles/index.scss
index 5222662..2a75f96 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -86,6 +86,18 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
   }
 }
 
+// TODO: use react to render the button content and set color with CSS variables
+@media (prefers-color-scheme: dark) {
+  :root[data-color-mode='auto'] .markdown-body .clippy .icon {
+    filter: invert(0.7); // hack to make it looks like a normal color :P
+  }
+}
+:root[data-color-mode='dark'] {
+  .markdown-body .clippy .icon {
+    filter: invert(0.7); // hack to make it looks like a normal color :P
+  }
+}
+
 .markdown-body {
   .clippy-wrapper {
     position: relative;