feat(MathJax): add dark mode adaptation for MathJax rendering

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 >}}

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);
+  }
+}

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 {