From da3203452589608efdab85702e58c9a51c7e51ba Mon Sep 17 00:00:00 2001
From: Suraj Khamkar <112414255+khamkarsuraj@users.noreply.github.com>
Date: Wed, 15 Jan 2025 21:11:44 -0500
Subject: [PATCH] Fix issue causing no color inversion when rendering equations
 (#2956)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Problem Description

When dark mode is enabled, inline math expressions rendered using
`$...$` in distill-style blog posts are displayed in black text. This
makes them difficult to read against the dark background. The issue
occurs because the default styles for MathJax-rendered content do not
account for dark mode and set the text color to black.

## Proposed Solution

This PR updates the MathJax setup to dynamically apply inline styles to
ensure the text color of MathJax-rendered content inherits the parent
container’s color. Specifically:
- Added a custom action in the _MathJax.options.renderActions_ section
to inject a CSS rule that sets _.mjx-container_ to inherit its color
from its parent element.
- Ensures that inline math expressions render correctly in both light
and dark modes without explicitly setting a fixed color.

## Changes Made
Modified the _mathjax-setup.js_ file to include:
- Custom inline styles injected via JavaScript for _.mjx-container_
elements.
- Explicit handling of _inlineMath_ delimiters to ensure consistency in
rendering.

## Testing and Validation
- Tested the fix in both light and dark modes to confirm that inline
math expressions render in the correct color.
- Verified that the changes do not introduce regressions in light mode
or affect block math expressions rendered using `$$...$$`.

## Impact
- Improves readability of inline math expressions in dark mode.
- Provides a consistent user experience for distill-style blog posts
across light and dark themes.
- Resolves #2915

Co-authored-by: Suraj Khamkar <surajk@atlanticpkg.com>
---
 assets/js/mathjax-setup.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/assets/js/mathjax-setup.js b/assets/js/mathjax-setup.js
index c821206..53f40b4 100644
--- a/assets/js/mathjax-setup.js
+++ b/assets/js/mathjax-setup.js
@@ -1,5 +1,26 @@
 window.MathJax = {
   tex: {
     tags: "ams",
+    inlineMath: [
+      ["$", "$"],
+      ["\\(", "\\)"],
+    ],
+  },
+  options: {
+    renderActions: {
+      addCss: [
+        200,
+        function (doc) {
+          const style = document.createElement("style");
+          style.innerHTML = `
+          .mjx-container {
+            color: inherit;
+          }
+        `;
+          document.head.appendChild(style);
+        },
+        "",
+      ],
+    },
   },
 };