દરેક દૃશ્ય નિર્ણય 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