প্রতিটি ভিজ্যুয়াল সিদ্ধান্তই W3C ডিজাইন টোকেন থেকে তৈরি একটি CSS কাস্টম প্রপার্টি। কম্পোনেন্টগুলো শুধু --nui-color-accent-solid-এর মতো সিম্যান্টিক টোকেন ব্যবহার করে, তাই একটি টোকেন বদলালে সেটি ব্যবহার করা প্রতিটি কম্পোনেন্টের স্টাইল বদলে যায়।
হালকা ও গাঢ়
ডিফল্টভাবে অপারেটিং সিস্টেমের পছন্দ অনুযায়ী মোড ঠিক হয়। data-nui-theme দিয়ে যেকোনো এলিমেন্টে মোড নির্দিষ্ট করুন, আর থিমগুলো ইচ্ছেমতো নেস্ট করুন।
<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-এ সেট করুন, অথবা কোনো একটি অংশের জন্য যেকোনো এলিমেন্টে।
/* 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-তে মানিয়ে নেয় এবং টেক্সট ও ব্যাকগ্রাউন্ডের প্রতিটি জোড়ার কনট্রাস্ট আবার যাচাই করে।
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens