Themes and modes

Theme, mode, density and motion: four attributes, on any element, that apply to everything inside.

On this page

Four attributes

Theme, mode, density and motion are picked by attribute, on any element, and apply to everything inside it. When one changes, everything transitions together.

Attribute	Values	What for
`data-theme`	`"casa"` or a facade	Which colors fill the roles. Without it, the home theme.
`data-mode`	`"light"`, `"dark"`	Forces day or night. Without it, follows the system.
`data-density`	`"compact"`	Tightens cells and controls for work screens.
`data-motion`	`"direct"`	Turns transitions off in a dragging or drawing area.

Try it

data-mode

data-density

Schedules

Weekly backup	Sunday, 3 am
Water the plants	Tuesday, 9 am

New scheduleFilters

HTML

<div data-theme="casa">…</div>

Theme

The home theme comes on. A facade is another token file, with the same color roles:

Shell

tokens/themes/horta.light.tokens.json   # os papéis de cor da fachada
bun run build                           # gera o CSS do tema
bun run check                           # o contraste precisa passar

HTML

<html lang="pt-BR" data-theme="horta">

The why and the rules are in The home and the facades.

Mode

Without data-mode, Feitio follows the system (prefers-color-scheme). To keep the person’s choice, apply the attribute before the page paints, in a small script in the <head>; otherwise the page flashes in the system mode before switching.

HTML

<script>
  const mode = localStorage.getItem('feitio-mode');
  if (mode) document.documentElement.dataset.mode = mode;
</script>

Density

data-density="compact" on the work area, not on the whole page: reading stays comfortable next to it.

Motion

The base CSS already transitions every change of state and stops everything with the system’s reduced motion. data-motion="direct" turns transitions off only where they would get in the way: dragging, drawing, resizing.