Ponlo en tu app Estilos y temas
Estilos y temas
Una sola hoja de estilos, limitada a
.rf-drive, con cada color, radio y fuente como propiedad personalizada. Cada par de colores se lee a 4.5:1 o más, en claro y en oscuro.Claro y oscuro
theme="dark", "light", o "auto" según el sistema. Los ajustes del drive dan el suyo, y cada persona puede elegir el propio por encima; la prop queda entre ambos.
El color de marca
Quien puede configurar el drive le da el color de la marca en sus ajustes; el drive genera sus variantes más oscura y más clara, y un texto encima que se lea bien, para ambos temas.
Propiedades personalizadas
| Propiedad | Qué colorea |
|---|---|
| --rf-brand | El color de lo elegido y de los botones principales; sale del color de marca de los ajustes. |
| --rf-brand-hover, --rf-brand-light | Sus variantes más oscura y más clara. |
| --rf-ink, --rf-ink-soft, --rf-muted | El texto, del más oscuro al más claro. |
| --rf-bg, --rf-surface, --rf-hover | Los fondos. |
| --rf-border, --rf-border-strong | Las líneas. |
| --rf-danger | Lo que borra. |
| --rf-k-<kind>, --rf-k-<kind>-fg | El mosaico de cada tipo de archivo: folder, docx, pdf, sheet, image, text, video, audio. |
| --rf-fc-<colour>, --rf-fc-<colour>-fg | Los nueve colores que puede tener una carpeta. |
| --rf-font, --rf-mono | Las fuentes. |
| --rf-radius | Las esquinas. |
.acme-files {
--rf-brand: #6d28d9;
--rf-brand-hover: #5b21b6;
--rf-brand-light: #ede9fe;
--rf-font: 'Söhne', system-ui, sans-serif;
--rf-radius: 8px;
}
<FileDrive className="acme-files" theme="auto" />Un aspecto propio
Para un marcado y un aspecto totalmente tuyos, con Tailwind o lo que sea, constrúyelo con los hooks.