Navio in dark mode

Navio ships no stylesheet — every colour it draws is an inline style or a canvas stroke — so a dark page used to get black column headers on a black background. It now reads the background it is sitting on and picks its ink to suit, while staying transparent itself.

The buttons only change the page's colours. Nothing tells the widget which theme to use — it looks at the ground behind it. Headers, counts, borders, row dividers, the gear and the settings panel all follow; open the gear in both. The data colours never change: a category that is teal on a light page is the same teal on a dark one, and so is the pink used for missing values.

// if you know what your page looks like, say so once
const nv = navio(d3.select("#nv"), { height: 400, theme: "dark" });

// "auto" is the default: read the background behind the widget, and
// re-read it on every redraw
const nv = navio(d3.select("#nv"), { height: 400 });

// or change it later
nv.theme = "light";
nv.hardUpdate();

There is a Theme control in the settings panel too — the gear, under Layout — so a reader can override whatever the page chose. It is remembered with the rest of the panel's settings.

Navio only redraws when something asks it to, so a page that repaints itself calls nv.hardUpdate() afterwards — that is all the buttons above do. nv.resolvedTheme() reports which theme won.