การปรับธีม

ทุกการตัดสินใจด้านภาพคือตัวแปร CSS ที่สร้างจาก design token ของ W3C คอมโพเนนต์ใช้เฉพาะ token เชิงความหมาย เช่น --nui-color-accent-solid การเปลี่ยน token เดียวจึงเปลี่ยนสไตล์ของทุกคอมโพเนนต์ที่ใช้ token นั้น

สว่างและมืด

โดยค่าเริ่มต้น โหมดจะเป็นไปตามการตั้งค่าของระบบปฏิบัติการ กำหนดโหมดให้เอลิเมนต์ใดก็ได้ด้วย data-nui-theme และซ้อนกันได้อย่างอิสระ

theme-attribute.html

<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

Token อยู่ใน @layer nui จึงเขียนทับได้ด้วย CSS ธรรมดาในแอปของคุณ กำหนดที่ :root เพื่อใช้กับทั้งแอป หรือที่เอลิเมนต์ใดก็ได้เพื่อใช้เฉพาะส่วนนั้น

override.css

/* 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);
}

ชุดสีของแบรนด์

สเกลสีต่าง ๆ สร้างขึ้นโดยอัตโนมัติ เปลี่ยนค่า hue ใน packages/tokens/scripts/palette.ts แล้วสร้างใหม่ สคริปต์จะปรับทุกสีให้อยู่ในขอบเขต sRGB และตรวจคอนทราสต์ของทุกคู่ข้อความกับพื้นหลังอีกครั้ง

palette.sh

# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens