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 Color: distill-style in-line math in dark mode remains black #2915