Put it in your app Styling and themes
Styling and themes
One stylesheet, scoped to
.rf-drive, every colour, radius and font a custom property. Each pair of colours reads at 4.5:1 or more, light and dark.Light and dark
theme="dark", "light", or "auto" as the system is. The drive’s settings give its own, and each person may choose theirs over it; the prop is between the two.
The brand colour
Whoever may configure the drive gives it the colour of the brand in its settings; the drive makes its darker and lighter pairs, and a text on it that reads, for both themes.
Custom properties
| Property | What it colours |
|---|---|
| --rf-brand | The colour of what is chosen and of the main buttons; from the brand colour of the settings. |
| --rf-brand-hover, --rf-brand-light | Its darker and lighter pairs. |
| --rf-ink, --rf-ink-soft, --rf-muted | The text, from the darkest. |
| --rf-bg, --rf-surface, --rf-hover | The backgrounds. |
| --rf-border, --rf-border-strong | The lines. |
| --rf-danger | What deletes. |
| --rf-k-<kind>, --rf-k-<kind>-fg | The tile of each kind of file: folder, docx, pdf, sheet, image, text, video, audio. |
| --rf-fc-<colour>, --rf-fc-<colour>-fg | The nine colours a folder may be given. |
| --rf-font, --rf-mono | The fonts. |
| --rf-radius | The corners. |
.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" />A look of your own
For markup and a look that are all yours, Tailwind or anything else, build it from the hooks.