How to change the foreground/background colors of LaTeX equations exported to svg using dvisvgm?

[kaushalmodi]

This discussion is created from #611 by @Perangelot.
Below text mostly a copy of that original issue (only the details related to the SVG color are copied).

---

Actual Behavior

Using the option #+tex:dvisvgm, LaTeX images are created, which works fine in general.

The svg images are, unlike the usual org-preview-images, not generated with the emacs theme colors, but in black with no background. This is, in principle, what you want, but those who use a dark theme like me need other colors (I, for example, need the font color to be light gray).

Expected Behavior

Have customizable variables governing the foreground and background colors of the images.

How to Reproduce the Issue

Try this MWE:

#+title: tryout svg
#+startup: latexpreview
#+options: tex:dvisvgm

Let us try an inline formula like $p \to q$. Does this work? $r \to s$ 

Does this =tikz= picture work?

$\begin{tikzpicture}
  \draw (9,3) -- (1,4);
\end{tikzpicture}$

In org-mode:

HTML output:

[kaushalmodi]

@Perangelot

The svg images are, unlike the usual org-preview-images, not generated with the emacs theme colors, but in black with no background.

I am afraid this is out of my expertise. Also, this wouldn't be something specific to ox-hugo. You should be getting the same colors whether you exported using ox-html or any other backend. If you can figure out how to export with custom colors using ox-html, the same would work for ox-hugo as well.

Trying asking this question on customizing dvisvgm image background and foreground colors on the Org mode mailing list.

If you find out how to do that, let me know in comments so that it gets documented for other users.

[kaushalmodi]

@Perangelot

I looked around in the Org manual and I found this node (org) Previewing LaTeX fragments -- There a variable org-format-latex-options is documented.

Upon doing C-h v org-format-latex-options, you will see:

org-format-latex-options is a variable defined in ‘org.el’.

Its value is
(:foreground default :background default :scale 1.0 :html-foreground "Black" :html-background "Transparent" :html-scale 1.0 :matchers
             ("begin" "$1" "$" "$$" "\\(" "\\["))

Options for creating images from LaTeX fragments.
This is a property list with the following properties:
:foreground  the foreground color for images embedded in Emacs, e.g. "Black".
             ‘default’ means use the foreground of the default face.
             ‘auto’ means use the foreground from the text face.
:background  the background color, or "Transparent".
             ‘default’ means use the background of the default face.
             ‘auto’ means use the background from the text face.
:scale       a scaling factor for the size of the images, to get more pixels
:html-foreground, :html-background, :html-scale
             the same numbers for HTML export.
:matchers    a list indicating which matchers should be used to
             find LaTeX fragments.  Valid members of this list are:
             "begin" find environments
             "$1"    find single characters surrounded by $.$
             "$"     find math expressions surrounded by $...$
             "$$"    find math expressions surrounded by $$....$$
             "\("    find math expressions surrounded by \(...\)
             "\["    find math expressions surrounded by \[...\]

  You can customize this variable.

---

The relevant pieces are:

:html-foreground "Black" :html-background "Transparent" :html-scale 1.0

:html-foreground, :html-background, :html-scale
the same numbers for HTML export.

• org-format-latex-options is a plist.
• You can customize the foreground and background colors in the generated SVG/PNG when exporting to an HTML derived backend (ox-hugo extends indirectly from ox-html!) by modifying the :html-foreground and :html-background properties.

Default LaTeX -> dvisvgm -> SVG foreground/background

From https://ox-hugo.scripter.co/test/posts/equations-exported-to-svg/, the equations show up in black foreground with transparent background by default:

SVG foreground/background after customization

If you evaluate this:

(with-eval-after-load 'org
  (plist-put org-format-latex-options :html-foreground "Yellow")
  (plist-put org-format-latex-options :html-background "Blue"))

you will get:

Yes, it's not pretty -- I am just demonstrating the customization of SVG foreground/background.

PS: The fonts are different because this second screenshot is from my localhost server where the default font type happens to be Serif.

[Perangelot]

Wow, thanks for the efforts! I had actually seen that variable myself but must have overlooked the attributes in that list. Since the formulae were placed too high, I added
margin-bottom: -3.6px; !important;
to the respective css class. Now it it perfectly aligned with the usual text:

This looks awesome now! I cannot stress how much you've helped me out. Thank you!