ಪ್ರತಿಯೊಂದು ದೃಶ್ಯ ನಿರ್ಧಾರವೂ 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