ஒவ்வொரு காட்சி முடிவும் 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