شخصی‌سازی تم

هر تصمیم بصری یک متغیر CSS (custom property) است که از توکن‌های طراحی W3C تولید می‌شود. کامپوننت‌ها فقط از توکن‌های معنایی مثل --nui-color-accent-solid استفاده می‌کنند؛ پس تغییر یک توکن، ظاهر همهٔ کامپوننت‌هایی را که از آن استفاده می‌کنند تغییر می‌دهد.

روشن و تیره

به‌طور پیش‌فرض، ترجیح سیستم‌عامل حالت را تعیین می‌کند. با 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"

بازنویسی توکن‌ها

توکن‌ها داخل @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);
}

پالت رنگ برند شما

طیف‌های رنگی تولیدشده‌اند. یک فام (hue) را در 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