Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix issue causing no color inversion when rendering equations #2956

Merged
merged 1 commit into from
Jan 16, 2025

Conversation

khamkarsuraj
Copy link
Contributor

@khamkarsuraj khamkarsuraj commented Jan 15, 2025

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

Copy link

netlify bot commented Jan 15, 2025

Deploy Preview for relaxed-lollipop-b6bc17 ready!

Name Link
🔨 Latest commit ee1d330
🔍 Latest deploy log https://app.netlify.com/sites/relaxed-lollipop-b6bc17/deploys/67882efa67fbc800086c12d4
😎 Deploy Preview https://deploy-preview-2956--relaxed-lollipop-b6bc17.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@george-gca george-gca merged commit da32034 into alshedivat:main Jan 16, 2025
10 checks passed
@george-gca
Copy link
Collaborator

Thanks for the fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Color: distill-style in-line math in dark mode remains black
2 participants