From fda650ad58e9d28c7d0cbdcbc80e9d78135fff42 Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Sun, 8 Mar 2026 02:16:06 +0800
Subject: [PATCH] feat(MathJax): add dark mode adaptation for MathJax rendering

---
 apps/test/content/posts/mathjax-test.md | 20 ++++++++++++++++++++
 assets/css/_core/_common.scss           |  7 +++++++
 assets/css/_page/_single/_index.scss    | 11 +++++++----
 3 files changed, 34 insertions(+), 4 deletions(-)

diff --git a/apps/test/content/posts/mathjax-test.md b/apps/test/content/posts/mathjax-test.md
index 08acdefe..af82a4a5 100644
--- a/apps/test/content/posts/mathjax-test.md
+++ b/apps/test/content/posts/mathjax-test.md
@@ -117,3 +117,23 @@ U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 }
 \end{xy}
 $$
+
+## More
+
+### Dark Mode Adaptation
+
+Use `.auto-dark-mode` class to automatically adapt to dark mode by inverting the color and hue:
+
+For inline formula:
+
+$\bbox[border: solid .4pt magenta, pink]{x^2=4}$
+{.auto-dark-mode}
+
+For formula blocks:
+
+{{< style "[data-theme=dark] & { filter: invert(1) hue-rotate(0.5turn); }" >}}
+$$
+\bbox[border: solid .4pt magenta, pink]{x^2=4}
+$$
+{.auto-dark-mode}
+{{< /style >}}
diff --git a/assets/css/_core/_common.scss b/assets/css/_core/_common.scss
index 85bc87d8..fd2a17d9 100644
--- a/assets/css/_core/_common.scss
+++ b/assets/css/_core/_common.scss
@@ -58,3 +58,10 @@
 .rounded-full {
   @include border-radius(full);
 }
+
+// auto adapt to dark mode by inverting the color and hue
+.auto-dark-mode {
+  [data-theme=dark] & {
+    filter: invert(1) hue-rotate(0.5turn);
+  }
+}
diff --git a/assets/css/_page/_single/_index.scss b/assets/css/_page/_single/_index.scss
index 30160b64..3cf04c89 100644
--- a/assets/css/_page/_single/_index.scss
+++ b/assets/css/_page/_single/_index.scss
@@ -467,10 +467,13 @@
     }
 
     // MathJax styles
-    mjx-container[jax='CHTML'][display='true'] {
-      max-width: 100%;
-      overflow-x: auto;
-      overflow-y: hidden;
+    mjx-container[jax='CHTML'] {
+      // formula Blocks
+      &[display='true'] {
+        max-width: 100%;
+        overflow-x: auto;
+        overflow-y: hidden;
+      }
 
       // fix the color of xypic diagrams
       mjx-xypic {