थीमिंग · Needless UI

हर विज़ुअल फ़ैसला W3C डिज़ाइन टोकन से बनी एक CSS कस्टम प्रॉपर्टी है। कंपोनेंट सिर्फ़ --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);
}

ब्रैंड पैलेट

रंगों के स्केल जनरेट किए जाते हैं। 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