Needless UI

指南

主题定制

每一项视觉决策都是一个由 W3C Design Token 生成的 CSS 自定义属性。组件只使用 --nui-color-accent-solid 这样的语义 token，因此修改一个 token，所有用到它的组件都会随之更新样式。

浅色与深色

默认由操作系统的偏好设置决定模式。你可以用 data-nui-theme 在任意元素上固定模式，并且可以自由嵌套。

theme-attribute.html
<html data-nui-theme="dark">
  <!-- Everything here is dark… -->
  <aside data-nui-theme="light">…except this panel.</aside>
</html>
data-nui-theme="light"
data-nui-theme="dark"

覆盖 token

这些 token 位于 @layer nui 中，因此应用里的普通 CSS 就能覆盖它们。在 :root 上设置会作用于整个应用，在某个元素上设置则只作用于该部分。

override.css
/* The whole app */
:root {
  --nui-color-accent-solid: oklch(0.52 0.16 150);
  --nui-radius-md: 0.75rem;
}

/* One part of it */
.checkout {
  --nui-color-accent-solid: var(--nui-color-success-solid);
}

品牌调色板

色阶是自动生成的。在 packages/tokens/scripts/palette.ts 中修改色相后重新生成：脚本会把每种颜色重新适配到 sRGB 色域，并重新检查每一组文本与背景颜色的对比度。

palette.sh
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens