change color of formulas in v4

[saraOrkide]

Some formulas look very faint in version 4, of course, in version 2.7.5, it cannot be improved.
Or if I want to change the color of the formulas, I did not understand the document
example mml code:
<math display='inline'> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <msub> <mrow> <mi>r</mi> </mrow> <mrow> <mi>a</mi> </mrow> </msub> </mrow> </mfrac> <mo>+</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <msub> <mrow> <mi>r</mi> </mrow> <mrow> <mi>b</mi> </mrow> </msub> </mrow> </mfrac> <mo>+</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <msub> <mrow> <mi>r</mi> </mrow> <mrow> <mi>c</mi> </mrow> </msub> </mrow> </mfrac> <mo>=</mo> <mfrac> <mrow> <mn>1</mn> </mrow> <mrow> <mi>r</mi> </mrow> </mfrac> <mi> </mi> </math>
output:

[dpvc]

The default font in MathJax v4 is now based on the Latin Modern font rather than the Computer Modern fonts, which where what the original MathJax TeX fonts were developed from. The original fonts were produced using a program that traced around the bitmapped fonts produced from metafont for the Computer Modern definitions, and because the Windows font rendering produces somewhat thin-looking fonts, the metafont parameters were set to make them a bit darker than usual. This gave slightly bold looking fonts on Windows, and slightly thin looking fonts on the Mac.

In contrast, the Latin Modern font is already available in a modern font format (.otf), and so there is no metafont parameters involved, and so the mathjax-modern font (the default for v4) is produced from the Latin Modern .otf files directly. Latin Modern is a bit thinner than the original MathJax TeX as a result, and they look thin to you because you are used to the more bold MathJax TeX fonts.

There are three options:

1. Wait a bit until you get used to the Latin Modern and its weight and they won't feel thin.
2. Version 4 provides 11 different fonts, and one is based on the old MathJax TeX fonts, so you could switch to the mathjax-tex font (by adding output: {font: 'mathjax-tex'} to your configuration). Note, however, that the mathjax-modern font has far greater coverage of characters, so switching to mathjax-tex may reduce the quality of some expressions.
3. Switch to svg output and set svg: {blacker: 15} which will stroke the outline of all the characters with a .015em line (the default is blacker: 3). Adjust the blackness to whatever works best for you. Note, however, that different browsers and operating systems may look different, so you will want to try this out on several browser/OS combinations.

As for the color, use <math display='inline' mathcolor="red"> to get the expression in red. Change the color to whatever you what it to be. You can use the mathcolor attribute on any element in the expression in case you want to have different colors within the same expression.

[saraOrkide]

How can I switch to svg?
The fonts are very pale and have little legibility

[dpvc]

How can I switch to svg?

Use one of the combined components that ends in -svg.js rather than -chtml.js. You don't say how you re loading MathJax, so it is hard for me to tell you the exact one to choose.

The fonts are very pale and have little legibility

Can you provide a screen snapshot of what you are seeing?

[saraOrkide]

I use mml-chtml.js version 4
font-size of root-element: 13px
As you can see, the mathematical symbols that are in power are very faint
The mathjax settings I use are:

MathJax = {
            options: {
                enableMenu: !1,
                menuOptions: {
                    settings: {
                        texHints: !0,
                        semantics: !1,
                        zoom: "NoZoom",
                        zscale: "200%",
                        renderer: "CHTML",
                        alt: !1,
                        cmd: !1,
                        ctrl: !1,
                        shift: !1,
                        scale: 1,
                        inTabOrder: !0,
                        assistiveMml: !0,
                        collapsible: !1,
                        explorer: !1
                    },
                    annotationTypes: {
                        TeX: ["TeX", "LaTeX", "application/x-tex"],
                        StarMath: ["StarMath 5.0"],
                        Maple: ["Maple"],
                        ContentMathML: ["MathML-Content", "application/mathml-content+xml"],
                        OpenMath: ["OpenMath"]
                    }
                }
            },
            loader: {
                load: ["[tex]/tagformat", "[tex]/mathtools", "output/chtml"]
            },
            extensions: ["mml2jax.js", "MathMenu.js", "MathZoom.js"],
            MathML: {
                extensions: ["mml3.js"]
            },
            chtml: {
                scale: 1,
                minScale: .5,
                mtextInheritFont: !0,
                merrorInheritFont: !0,
                mathmlSpacing: !1,
                skipAttributes: {},
                exFactor: .5,
                displayAlign: "center",
                displayIndent: "0",
                matchFontHeight: !0,
                adaptiveCSS: !0
            },
            linebreaks: {
                inline: !0,
                width: "100%",
                lineleading: 2,
                LinebreakVisitor: null
            },
            includeHtmlTags: {
                br: "\n",
                wbr: "",
                "#comment": ""
            },
            ignoreHtmlClass: "tex2jax_ignore",
            processHtmlClass: "tex2jax_process",
            tex: {
                inlineMath: [["$", "$"]],
                processEscapes: !1
            },
            startup: {
                ready() {
                    const t = MathJax._.input.tex.ParseMethods.default
                      , {RegExpMap: e} = MathJax._.input.tex.TokenMap;
                    new e("digit",t.digit,/[\d.٫۰-۹]/);
                    const {ChtmlMn: a} = MathJax._.output.chtml.Wrappers.mn;
                    a.prototype.remapChars = function(t) {
                        const e = [];
                        for (const a of t) {
                            const t = this.font.getRemappedChar("mn", a);
                            e.push(...t ? this.unicodeChars(t, this.variant) : [a])
                        }
                        return e
                    }
                    ;
                    const {FontData: n} = MathJax._.output.common.FontData
                      , o = n.defaultMnMap;
                    for (var s = 0; s < 10; s++)
                        o[48 + s] = String.fromCodePoint(1776 + s);
                    MathJax.startup.defaultReady()
                }
            }
        });

[saraOrkide]

Another question, if I use mml-svg.js, how can I display Persian numbers?

[saraOrkide]

I also used svg, but the same problem still exists, I can even say that it has gotten worse

As you can see, sin is not readable at all

[dpvc]

What browser are you using, and on what OS?

[saraOrkide]

What browser are you using, and on what OS?

browser: chrome
os: linux , windows

[dpvc]

See my comments in your other issues for some suggestions about these issues.