Lily Design System™

Chủ đề

Các thành phần Lily có class hook ổn định và không có CSS — nên một chủ đề chỉ là một bảng kiểu. Hướng dẫn này đi từ "liên kết một tệp" đến "để người dùng đổi chủ đề khi chạy và được lưu lại".

Bạn sẽ xây dựng gì

Một ứng dụng mà toàn bộ diện mạo người dùng có thể thay đổi — bắt đầu bằng một bảng kiểu được liên kết, kết thúc bằng bộ chuyển chủ đề khi chạy được lưu lại — trong khoảng 15 phút.

Trước khi bắt đầu

Hãy hoàn thành hướng dẫn framework cho bộ công nghệ của bạn trước, để có một biểu mẫu Lily nhỏ làm chủ đề. Mọi thứ ở đây hoạt động trong cả bảy framework; các mẫu mã dùng Svelte và HTML thuần.

Bước 1 — Liên kết một chủ đề dựng sẵn

themes/ thư mục chứa 45 bảng kiểu độc lập. Sao chép chúng vào tài nguyên tĩnh của ứng dụng và liên kết một cái: 

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

Điểm nổi bật của bộ chủ đề:

  • Khu vực công — NHS England / Scotland / Wales, mỗi nơi có bản dành cho bệnh nhân và bản dành cho người hành nghề; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Lấy cảm hứng từ nhà cung cấp — adobe-spectrum, mozilla-protocol.
  • Mục đích chung — light, dark, nord, dracula, wireframe, corporate, synthwave, và nhiều nữa.

Kiểm tra kết quả: tải lại trang. Cùng phần đánh dấu bạn đã dựng trong hướng dẫn framework giờ đã có kiểu dáng đầy đủ — nút, ô nhập, nhãn, vòng tiêu điểm. Một dòng HTML đã làm được điều đó — mọi thành phần vẫn y nguyên như trước.

Bước 2 — Ghi đè bất cứ thứ gì

Các bộ chọn của chủ đề được bọc trong :where(...)vốn có độ đặc hiệu bằng không — nên bất kỳ quy tắc nào bạn viết đều thắng, đơn giản vậy thôi: 

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

Bước 3 — Chuyển đổi khi chạy bằng theme-picker

theme-picker trợ giúp là một nút biểu tượng + listbox headless sở hữu toàn bộ vòng đời của chủ đề: nó tải bảng kiểu đã chọn bằng cách đổi một <link> được quản lý (chỉ chủ đề đang dùng mới được tải), đặt data-theme="{slug}" trên tài liệu, và tùy chọn lưu vào localStorage. Ở đây dùng Svelte; các bản chuyển sang React, Vue, Angular, HTML, Nunjucks và Blazor khớp từng hợp đồng một: 

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

Vậy là toàn bộ phần tích hợp. Hành vi bàn phím theo mẫu listbox của WAI-ARIA APG; bản thân điều khiển là headless (class hook .theme-picker), nên nó nhận bất cứ chủ đề nào đang dùng.

Đã xác minh 2026-08-29: đoạn mã chính xác này đã được biên dịch với 0.1.1 gói đã xuất bản thông qua svelte/server.

Bước 4 — Phản ứng với chủ đề trong CSS của bạn

Vì trợ giúp đặt data-theme trên gốc tài liệu, kiểu dáng của chính bạn có thể rẽ nhánh theo đó: 

[data-theme="dark"] .site-logo { filter: invert(1); }

Lưu ý cho hiển thị phía máy chủ

Trợ giúp thực hiện mọi thao tác ghi DOM trong vòng đời mount/effect của framework, nên an toàn với SSR về mặt cấu trúc. Để tránh nhấp nháy ở lần vẽ đầu, hãy hiển thị <link> và data-theme của chủ đề ban đầu trên máy chủ (ví dụ từ cookie) — kho mã trợ giúp Svelte kèm một ví dụ cookie SvelteKit chạy được, và các danh mục khác ghi lại cùng mẫu cho bộ công nghệ của chúng.

Các bước tiếp theo

  • Trợ giúp tùy chọn — cùng mẫu cho ngôn ngữ, cỡ chữ, chia sẻ và nhập ngày/giờ.
  • Đóng góp một chủ đề — mỗi chủ đề là một bảng kiểu độc lập nhắm vào các class hook; xem hướng dẫn đóng góp.

Có thắc mắc trên đường đi? Trang trợ giúp có đầy câu trả lời — và nếu một bước có thể rõ ràng hơn, hãy cho chúng tôi biết và chúng tôi sẽ vui lòng cải thiện hướng dẫn.