#Theming

Everything in hatex.css is scoped to elements with the class hatex and coloured through CSS custom properties (--hx-*). To restyle the output, override the variables; you rarely need to override the rules.

.hatex {
  --hx-accent: #0b57d0;          /* blue links and section numbers */
  --hx-cite: #3aa35b;            /* hyperref-style green boxes around citations */
  --hx-font-body: Georgia, serif;
}

#The default look

The default is plain, like a LaTeX article: black on white, set in KaTeX's Computer Modern (KaTeX_Main, which katex.min.css loads), with no rules under headings. \ref and \cite show as plain numbers that are underlined on hover. The body text is 1rem with a line height of 1.7, and headings are 1.4rem (section), 1.15rem (subsection) and 1rem (subsubsection).

HaTeX doesn't set a width: the output fills its container. A comfortable measure for an article is about 46rem; see the examples.

#Colours

#Fonts

To use your site's font, set --hx-font-body: inherit. Maths always uses KaTeX's fonts, whatever the body font is.

HaTeX loads no fonts itself: KaTeX_Main comes from katex.min.css, and the others must be installed or loaded by your page. The fallbacks in each list take over otherwise.

#Code colours

Code tokens (from Prism) are coloured from these variables. The defaults are Atom's One Light, and One Dark in dark mode.

Operators, variables and URLs use --hx-ink.

#Dark mode

Dark mode is switched with a data-theme attribute, on the .hatex element or on any ancestor, such as <html>:

document.documentElement.dataset.theme = 'dark';

The dark palette does more than swap black and white, because author-chosen colours were chosen for paper:

• \textcolor colours are mixed towards white (--hx-color-keep: 62%), so a dark blue stays blue but becomes readable.
• Author-chosen backgrounds (\hl, \colorbox, \rowcolor, \cellcolor) are usually light tints, so the text on them turns dark (--hx-on-highlight).
• TikZ drawings are black ink on transparent paper. They are inverted in lightness with their hues kept (--hx-tikz-filter), so black lines become light while a red curve stays red.

HaTeX doesn't colour the page background; set it on your body for each theme.

#Keeping TikZ on a light sheet

If you'd rather show TikZ drawings as they are, on a white card:

[data-theme="dark"] .hatex {
  --hx-tikz-filter: none;
  --hx-tikz-sheet: #fff;
  --hx-tikz-sheet-pad: 0.75rem;
}

#Custom dark palettes

The dark values are set on .hatex[data-theme="dark"] and [data-theme="dark"] .hatex. To override them, use a selector at least as specific:

[data-theme="dark"] .hatex { --hx-text: #d0d0d0; --hx-accent: #8ab4f8; }

#Recipes

Blue links and numbers, hyperref-style citation boxes:

.hatex { --hx-accent: #0b57d0; --hx-accent-2: #174ea6; --hx-cite: #3aa35b; }

Sans-serif body with serif headings:

.hatex { --hx-font-body: system-ui, sans-serif; --hx-font-heading: Georgia, serif; }

A rule under section headings:

.hatex h2 { border-bottom: 1px solid var(--hx-border); padding-bottom: 0.3rem; }

A red proof mark:

.hatex .latex-qed { color: #b3261e; }

For other selectors, see The HTML output.

#Motion

The page animates three things: scrolling to a clicked reference, the flash on its target, and the fade of the zoom overlay. The reader's prefers-reduced-motion: reduce setting turns all three off, and so does the animate: false option.

#Prism themes

Don't load a Prism theme. It would set token colours and backgrounds that fight hatex.css. The --hx-tok-* variables are the way to change code colours.

Previous: JavaScript API · Contents · Next: The HTML output