प्रत्येक दृश्य निर्णय म्हणजे 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