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