Update MathJax to 4.1.0. #2878
Update MathJax to 4.1.0. #2878
Conversation
drgrice1
left a comment
drgrice1
left a comment
There was a problem hiding this comment.
I think that this generally is okay. However, version 4.1.0 has changed some styling that is causing issues if dark mode is enabled for the browser. This is perhaps due to the fact that webwork2 doesn't have a dark mode, but when tab focus is on a MathJax rendered math element the contrast is not good. Also, if you right click on a MathJax rendered element and open one of the dialogs (such as the "About MathJax" dialog), then the coloring of all of the links in the page gets messed up and the contrast for that is also not good. It seems that MathJax should scope this injected style instead of adding a style that applies to all links in the page.
|
@dpvc Any thoughts on this, that when MathJax detects dark mode is being used, it applies an inline style which can override all links on the page, not just the ones in the mathjax about window? |
|
I think we need to hold on this PR until this is fixed. |
Yes, that should have been scoped, but apparently I messed up with the styles for the anchors. Sorry about that. I will fix that for the upcoming 4.1.1 release.
You may want to wait for 4.1.1 anyway, as that is nearly ready for release (I have to add the fix for this issue, now, and there is one outstanding PR). If you want to disable the dark-mode colors, you can do that using the following configuration: MathJax = {
loader: {
core: {
ready() {
const {DraggableDialog} = MathJax._.ui.dialog.DraggableDialog;
delete DraggableDialog.styles['@media (prefers-color-scheme: dark)'];
}
},
'output/chtml': {
ready() {
const {CHTML} = MathJax._.output.chtml_ts;
delete CHTML.commonStyles['@media (prefers-color-scheme: dark)'];
const {ChtmlMaction} = MathJax._.output.chtml.Wrappers.maction;
delete ChtmlMaction.styles['@media (prefers-color-scheme: dark) /* chtml maction */'];
}
},
'output/svg': {
ready() {
const {SVG} = MathJax._.output.svg_ts;
delete SVG.commonStyles['@media (prefers-color-scheme: dark)'];
const {SvgMaction} = MathJax._.output.svg.Wrappers.maction;
delete SvgMaction.styles['@media (prefers-color-scheme: dark) /* svg maction */'];
}
},
'a11y/explorer': {
ready() {
const Region = MathJax._.a11y.explorer.Region;
for (const region of ['LiveRegion', 'HoverRegion', 'ToolTip']) {
Region[region].style.styles['@media (prefers-color-scheme: dark)'] = {};
}
Region.LiveRegion.style.styles['@media (prefers-color-scheme: dark)']['mjx-ignore'] = {ignore: 1};
MathJax.startup.extendHandler((handler) => {
delete handler.documentClass.speechStyles['@media (prefers-color-scheme: dark) /* explorer */'];
return handler;
});
}
}
}
};It is also possible to make this into an extension rather than in-lining the code. For example, create the file if (MathJax.loader) {
MathJax.loader.checkVersion('[no-dark-mode]', '4.1.0', 'extension');
}
[
[MathJax._.ui?.dialog, 'core', () => {
const {DraggableDialog} = MathJax._.ui.dialog.DraggableDialog;
delete DraggableDialog.styles['@media (prefers-color-scheme: dark)'];
}],
[MathJax._.a11y?.explorer, 'a11y/explorer', () => {
const Region = MathJax._.a11y.explorer.Region;
for (const region of ['LiveRegion', 'HoverRegion', 'ToolTip']) {
Region[region].style.styles['@media (prefers-color-scheme: dark)'] = {};
}
Region.LiveRegion.style.styles['@media (prefers-color-scheme: dark)']['mjx-ignore'] = {ignore: 1};
MathJax.startup.extendHandler((handler) => {
delete handler.documentClass.speechStyles['@media (prefers-color-scheme: dark) /* explorer */'];
return handler;
});
}],
[MathJax._.output?.chtml, 'output/chtml', () => {
const {CHTML} = MathJax._.output.chtml_ts;
delete CHTML.commonStyles['@media (prefers-color-scheme: dark)'];
const {ChtmlMaction} = MathJax._.output.chtml.Wrappers.maction;
delete ChtmlMaction.styles['@media (prefers-color-scheme: dark) /* chtml maction */'];
}],
[MathJax._.output?.svg, 'output/svg', () => {
const {SVG} = MathJax._.output.svg_ts;
delete SVG.commonStyles['@media (prefers-color-scheme: dark)'];
const {SvgMaction} = MathJax._.output.svg.Wrappers.maction;
delete SvgMaction.styles['@media (prefers-color-scheme: dark) /* svg maction */'];
}]
].forEach(([immediate, extension, ready]) => {
if (immediate) {
ready();
} else {
const config = MathJax.config.loader;
config[extension] ??= {};
config[extension].extraLoads ??= [];
const check = config[extension].checkReady;
config[extension].checkReady = async () => {
if (check) await check();
return ready();
}
}
});and then use MathJax = {
loader: {
load: ['[no-dark-mode]'],
paths: { 'no-dark-mode': './no-dark-mode.js' },
}
};where the I may make an official [PS, I tend not to read all the many WW github messages, so I may not always see something like this. I do have a filter for messages that tag me, so if you want to be sure I check something, please do include @dpvc.] |
The extension is the code suggested by @dpvc in openwebwork#2878.
|
I think that the As you can see, the contrast is not good there. With the That is very similar to how it looks with MathJax 4.0.0 (except the help icon is far to the right with 4.0.0 in this case). Perhaps once someone gets around to implementing dark mode for webwork2 things will be different. |
|
@somiaj: I added a pull request to this branch that adds the |
Add a no-dark-mode extension for MathJax.
|
I think this will work with the |
4 participants
I don't think anything else needs updated. This is the result of
npm install mathjax@latest.