ప్రతి దృశ్య నిర్ణయం 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 లో ఒక రంగు ఛాయను (hue) మార్చి మళ్లీ జనరేట్ చేయండి: స్క్రిప్ట్ ప్రతి రంగును sRGB పరిధిలోకి సరిపెడుతుంది, ప్రతి టెక్స్ట్, బ్యాక్గ్రౌండ్ జత కాంట్రాస్ట్ను మళ్లీ తనిఖీ చేస్తుంది.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens