Temas y modos
Tema, modo, densidad y movimiento: cuatro atributos, en cualquier elemento, que aplican a todo lo que está dentro.
En esta página
Cuatro atributos
Tema, modo, densidad y movimiento se seleccionan por atributo, en cualquier elemento, y aplican a todo lo que hay dentro. Cuando uno cambia, todo transiciona junto.
| Atributo | Valores | Para qué sirve |
|---|---|---|
data-theme | "casa" o una fachada | Cuáles colores llenan los roles. Sin él, el tema principal. |
data-mode | "light", "dark" | Fuerza día o noche. Sin él, sigue el sistema. |
data-density | "compact" | Ajusta celdas y controles para pantallas de trabajo. |
data-motion | "direct" | Apaga transiciones en una zona de arrastre o dibujo. |
Pruébalo
| Respaldo semanal | Domingo, 3 am |
| Regar las plantas | Martes, 9 am |
<div data-theme="casa">…</div>Tema
El tema de inicio se activa. La fachada es otro archivo de tokens, con los mismos roles de color:
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 lang="pt-BR" data-theme="horta">Las razones y las reglas están en El inicio y las fachadas.
Modo
Sin data-mode, Feitio sigue el sistema (prefers-color-scheme). Para mantener la elección de la persona, aplique el atributo antes de que la página se pinte, en un pequeño script dentro del <head>; de lo contrario, la página parpadea en el modo del sistema antes de cambiar.
<script>
const mode = localStorage.getItem('feitio-mode');
if (mode) document.documentElement.dataset.mode = mode;
</script>Densidad
data-density="compact" en el área de trabajo, no en toda la página: la lectura permanece cómoda a su lado.
Motion
El CSS base ya transiciona cada cambio de estado y detiene todo con la reducción de movimiento del sistema. data-motion="direct" desactiva las transiciones solo donde podrían interferir: arrastrar, dibujar, redimensionar.