Theming

Every color, space, radius and font of the lists, trees and boards comes from a --narabe-* custom property. The defaults have no specificity, so a value set on :root, on an ancestor or on .narabe itself wins:

:root {
  --narabe-accent: #0f766e;
  --narabe-radius: 4px;
  --narabe-row-height: 2.5rem;
}

The defaults are Erabi's, so that a page with both looks like one thing.

The properties

• --narabe-accent is the focus outline, the drop line and the swipe actions; --narabe-refused is the line of a drop that the rules refuse.
• --narabe-hover and --narabe-selected are the backgrounds of a row under the pointer and of a selected row; by default they mix the text or the accent into the background.
• --narabe-match marks the letters the filter matched (a CSS custom highlight, ::highlight(narabe-match)).
• --narabe-indent is a tree's indent per level. A drag reads it too: a pointer that moves one indent sideways changes the level by one.
• --narabe-shadow is the shadow of the dragged copy; --narabe-card-shadow that of a board's cards.

Narabe sets --narabe-level on each row (its level in a tree) and --narabe-peer on rows that other people are on (their color); use them in your own rules, do not set them.

Dark

The defaults are light, and dark under data-theme="dark" (the attribute of Phoenix's themes) or the class dark on an ancestor. narabe.css does not follow prefers-color-scheme by itself.

Sumi

narabe-sumi.css, after narabe.css, maps every property to the Sumi tokens of the page: its daisyUI theme colors, or the short --sumi-* names (--sumi-ink, --sumi-paper, --sumi-accent, ...), or Sumi's own palette when the page has none. Its palette is dark under data-theme="dark", and under a dark preference unless the page says data-theme="light".

Touch

On a coarse pointer, rows are taller (--narabe-row-height is 2.75rem), handles are larger, and a board's columns snap into place as it scrolls sideways, each at most 85% of the screen wide. Swipe actions show on a coarse pointer only.

Reduced motion

With prefers-reduced-motion, the rows, the tree's arrows and the lines of other people do not animate.

Classes

While a drag is on, the page's <html> has .narabe-dragging.