Theming

Dark mode

The components follow a dark class on <html> — the convention of Tailwind and shadcn/ui. SVG views (trees, gene models) follow it through CSS; canvas views (alignments, distance matrices) re-render when the class changes. Toggle this site’s theme (top right) to see it.

To force a mode regardless of the page, canvas components take options.darkMode:

<MultipleSequenceAlignment msa={msa} options={{ darkMode: true }} />

If your app marks its theme differently, mirror it onto the class. This site does exactly that for Starlight’s data-theme attribute:

const root = document.documentElement;
const sync = () => root.classList.toggle("dark", root.dataset.theme === "dark");
sync();
new MutationObserver(sync).observe(root, { attributes: true, attributeFilter: ["data-theme"] });

Theme tokens

Colours come from the shadcn/ui CSS variables — --background, --foreground, --muted-foreground, --border, --popover, … — plus one of the library’s own:

Variable	Used for
--rbv-accent	Hover outlines, the cursor caret, active nodes — the one saturated colour reserved for “you can interact with this”.

The components’ stylesheet defines defaults for all of them at zero specificity, so any value your app sets wins, whichever stylesheet loads first. An app already using shadcn/ui gets matching components with no extra work.

Note

The stylesheet never touches anything outside the components: no CSS reset, no html/body rules. Everything it styles is scoped to the components’ own .rbv root class.

Colour schemes

Residue colours follow the standard schemes — DNA, DNA ClustalX for nucleotides and AA ClustalX, AA Zappo, AA Taylor for proteins — each with a dark-mode variant. The alignment picks one from its own alphabet unless you set options.colorStyle. See the alignment page for the analysis and score styles.