Kila uamuzi wa kimuonekano ni custom property ya CSS inayozalishwa kutoka design token za W3C. Vijenzi hutumia token za kisemantiki tu, kama --nui-color-accent-solid, kwa hivyo kubadilisha token moja hubadilisha mtindo wa kila kijenzi kinachoitumia.
Mwanga na giza
Kwa chaguomsingi, mapendeleo ya mfumo wa uendeshaji ndiyo huchagua hali. Funga hali kwenye kipengele chochote kwa data-nui-theme, na uweke mandhari ndani ya nyingine kwa uhuru.
<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"Batilisha token
Token zinaishi ndani ya @layer nui, kwa hivyo CSS ya kawaida katika programu yako huzibatilisha. Ziweke kwenye :root kwa programu nzima, au kwenye kipengele chochote kwa sehemu moja tu.
/* 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);
}Paleti ya chapa
Mizani ya rangi huzalishwa. Badilisha hue katika packages/tokens/scripts/palette.ts na uzalishe upya: script hurekebisha kila rangi iingie ndani ya sRGB na kukagua upya utofautishaji wa kila jozi ya maandishi na mandharinyuma.
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens