تخصيص المظهر

كل قرار بصري هو خاصية CSS مخصصة مُولَّدة من رموز تصميم 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