集成到你的应用样式与主题

样式与主题

只有一份样式表，限定在 .rf-drive 范围内，每种颜色、圆角和字体都是自定义属性。每组颜色的对比度都在 4.5:1 以上，浅色和深色主题皆是如此。

主题

浅色与深色

theme="dark"、"light"，或跟随系统的 "auto"。网盘的设置提供默认主题，每个人可以在此之上选择自己的；这个属性介于两者之间。

设置

品牌色

有权配置网盘的人可以在设置中指定品牌色；网盘会生成它的深色和浅色变体，以及在其上清晰可读的文字颜色，适用于两种主题。

CSS

自定义属性

属性	作用范围
--rf-brand	选中项和主要按钮的颜色；取自设置中的品牌色。
--rf-brand-hover, --rf-brand-light	它的深色和浅色变体。
--rf-ink, --rf-ink-soft, --rf-muted	文字颜色，由深到浅。
--rf-bg, --rf-surface, --rf-hover	背景。
--rf-border, --rf-border-strong	线条。
--rf-danger	删除类操作。
--rf-k-<kind>, --rf-k-<kind>-fg	每种文件类型的图标块：folder、docx、pdf、sheet、image、text、video、audio。
--rf-fc-<colour>, --rf-fc-<colour>-fg	文件夹可用的九种颜色。
--rf-font, --rf-mono	字体。
--rf-radius	圆角。

.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" />

Headless

你自己的外观

如果要完全使用你自己的标记和外观（Tailwind 或其他任何方案），请用 hooks 构建。