Contents

Colours and themes

Typesetting

Colours and themes

Black text takes the page’s text colour, so a dark theme works without any configuration. Colours chosen by the author are kept, and a colour map can replace them per theme, so that \textcolor{blue} stays readable on a dark background. The options above the example set its text size and theme, for the example only; the same options in the corner set them for the whole page.

A blue remark, a red warning, and colour inside mathematics:

And tints, blue!20!white and red!20!white, shading a picture of a wave tunnelling through a barrier.

A \textcolor{blue}{blue remark}, a \textcolor{red}{red warning}, and
colour inside mathematics:
\[
  \textcolor{blue}{a^2} + \textcolor{red}{b^2} = c^2 .
\]
And \emph{tints}, \verb|blue!20!white| and \verb|red!20!white|, shading a
picture of a wave tunnelling through a barrier.
\begin{center}
\begin{tikzpicture}[x=1cm, y=1cm]
  % where the wave may travel, and the barrier it tunnels through
  \fill[blue!20!white] (0,0) rectangle (3,1.7);
  \fill[red!20!white]  (3,0) rectangle (4.2,1.7);
  \fill[blue!20!white] (4.2,0) rectangle (7,1.7);
  % the potential, and the wave's energy
  \draw[red, thick] (0,0.25) -- (3,0.25) -- (3,1.35) -- (4.2,1.35) -- (4.2,0.25) -- (7,0.25);
  \draw[black!50, dashed] (0,0.8) -- (7,0.8) node[right] {$E$};
  % the wave function: oscillating, decaying inside the barrier, and out again smaller
  \draw[blue, thick, smooth, samples=90, domain=0:3]   plot (\x, {0.8+0.4*sin(deg(4*\x+2.137))});
  \draw[blue, thick, smooth, samples=30, domain=3:4.2] plot (\x, {0.8+0.4*exp(-1.6*(\x-3))});
  \draw[blue, thick, smooth, samples=90, domain=4.2:7] plot (\x, {0.8+0.059*sin(deg(4*(\x-4.2))+90)});
  \node[blue] at (1.1,1.45) {$\psi$};
  \node[red]  at (3.6,1.52) {$V_0$};
\end{tikzpicture}
\end{center}

A colour map is a small JSON file. For each theme it lists the colours to replace. It also lists tints: colours mixed with white, like blue!20!white, which are mixed again with the current background. This site’s map, latex-color-maps/site.json, is the default for every block. Here is what it does to the blue and red of the example:

As TeX wrote itLightDarkSepiaHigh contrast
Aablue #0000ffAakeptAa#79c0ffAa#155e97Aa#0000b3
Aared #ff0000AakeptAa#ff7b72Aa#c02d0cAa#b30000
blue!20 = #ccccff20% #0000ff20% #79c0ff20% #155e9720% #0000b3
red!20 = #ffcccc20% #ff000020% #ff7b7220% #c02d0c20% #b30000

In the file:

{
  "colors": {
    "dark":     { "#0000ff": "#79c0ff", "#ff0000": "#ff7b72" },
    "sepia":    { "#0000ff": "#155e97", "#ff0000": "#c02d0c" },
    "contrast": { "#0000ff": "#0000b3", "#ff0000": "#b30000" }
  },
  "tints": { "#ccccff": ["#0000ff", 20], "#ffcccc": ["#ff0000", 20] }
}

A theme is a class on the page’s <html> element (dark, sepia or contrast), so switching themes only changes styles; nothing is drawn again. The Theming section of src/viewer/README.md has the details.