Styling

glyphline/style.css is small and every colour is a custom property on .gl-overlay:

.gl-overlay {
  --gl-sentence: oklch(0.93 0.09 95 / 0.75);
  --gl-word: oklch(0.85 0.15 85 / 0.9);
  --gl-selection: oklch(0.82 0.1 250 / 0.55);
  --gl-mark: oklch(0.9 0.12 140 / 0.6);
  --gl-blend: multiply;
}

The overlay uses mix-blend-mode: multiply, so on white paper the text stays fully dark under the colour, the way a highlighter pen looks.

Dark modeCopy Anchor Link

Multiply darkens on a dark background, so the stylesheet switches to dimmer colours with screen when <html> has a dark class or data-theme="dark", or when the system is dark and <html> is not marked light. A PDF page usually stays white in a dark interface: mark its overlay data-gl-theme="light" (theme="light" on GlyphOverlay in React and Svelte).

Class namesCopy Anchor Link

Paths are drawn in that order, so the cursor is on top. classPrefix: "hl" changes every gl- to hl-, for apps that already use the names.

ShapesCopy Anchor Link

createHighlighter(svg, source, {
  sentenceShape: { pad: 2, radius: 5, snap: 4 }, // overlay units
  wordShape: { pad: 1.5, radius: 3 },
});

For PDFs the units are page points at scale 1, so the shapes scale with the zoom. For HTML they are CSS pixels.