Her görsel karar, W3C tasarım token’larından üretilen bir CSS değişkenidir. Bileşenler yalnızca --nui-color-accent-solid gibi anlamsal token’lar kullanır; bu yüzden tek bir token’ı değiştirmek onu kullanan her bileşenin görünümünü değiştirir.
Açık ve koyu
Varsayılan olarak mod, işletim sisteminin tercihine göre seçilir. data-nui-theme ile herhangi bir öğede modu sabitleyin ve temaları dilediğiniz gibi iç içe kullanın.
<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"Token’ları geçersiz kılın
Token’lar @layer nui içinde yer alır; bu yüzden uygulamanızdaki düz CSS onları geçersiz kılar. Tüm uygulama için :root üzerinde, uygulamanın bir bölümü içinse herhangi bir öğede tanımlayın.
/* 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);
}Marka paleti
Renk skalaları üretilir. packages/tokens/scripts/palette.ts içinde bir renk tonunu (hue) değiştirin ve yeniden üretin: betik her rengi sRGB’ye yeniden uydurur ve her metin ile arka plan çiftinin kontrastını yeniden denetler.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens