主题
Lily 组件带有稳定个类名钩子搭零 CSS——所以主题只是一份样式表。本教程从“链接一个文件”开始，一直到“让用户在运行时切换主题，并且保存下来”。
侬将构建啥
一个整体外观侪可由用户更改个应用——从链接一份样式表开始，到带持久化个运行时主题切换器结束——大约 15 分钟完成。
开始之前
请先完成侬所用技术栈个框架教程，这样侬就有一个可以套用主题个小型 Lily 表单。搿搭个一切侪适用于全部七种框架；代码示例展示 Svelte 搭纯 HTML。
第 1 步——链接一套现成个主题
themes/ 目录提供 45 份独立个样式表。把伊拉复制到侬应用个静态资源中，并链接其中一份：
<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />这套主题个亮点：
-
公共部门——NHS England / Scotland / Wales，每个侪有面向患者搭面向从业者个变体；GOV.UK
（
united-kingdom-government-digital-service）；USWDS （united-states-web-design-system）。 - 受厂商启发——
adobe-spectrum、mozilla-protocol。 -
通用——
light、dark、nord、dracula、wireframe、corporate、synthwave，还有更多。
检查侬个成果：重新加载页面。侬在框架教程中构建个同一份标记，现在已经完全有了样式——按钮、输入框、标签、焦点环。这只是一行 HTML 个功劳——每个组件侪保持原样。
第 2 步——覆盖任何内容
主题选择器侪包裹在 :where(...) 中，伊个优先级为零——因此侬写个任何规则侪会生效，简单直接：
/* After the theme link: your brand button, everything else themed */
.button {
background: #7c3aed;
border-radius: 9999px;
}第 3 步——用 theme-picker 实现运行时切换
theme-picker 辅助包是一个 headless 个图标按钮加列表框，负责整个主题个生命周期：伊通过替换一个受管理个 <link>
来加载所选个样式表（只会获取当前启用个主题），在文档上设置
data-theme="{slug}"，并且可以选择保存到 localStorage。搿搭展示个是 Svelte；React、Vue、Angular、HTML、Nunjucks 搭 Blazor 个移植版在契约上逐条一致：
<script>
import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>
<ThemePicker
label="Theme"
themesUrl="/assets/themes/"
themes={["light", "dark", "nord", "wireframe"]}
storageKey="my-app-theme"
/>
整个集成就是搿眼。键盘行为遵循 WAI-ARIA APG 列表框模式；控件本身是 headless 个（类名钩子是
.theme-picker），所以伊会采用当前启用个任何主题。
2026-08-29 已验证：这段代码经 svelte/server，针对已发布个 0.1.1 包编译通过。
第 4 步——在侬自己个 CSS 中响应主题
因为辅助包会在文档根元素上设置 data-theme，侬自己个样式可以据此分支：
[data-theme="dark"] .site-logo { filter: invert(1); }服务端渲染个注意事项
辅助包个所有 DOM 写入侪在框架个挂载/副作用生命周期内进行，因此从构造上就是 SSR 安全个。为了避免首次绘制时个闪烁，请在服务端渲染初始主题个 <link> 搭
data-theme（例如根据 cookie）——Svelte 辅助包仓库提供了一个可运行个 SvelteKit cookie 示例，其伊目录也记录了适用于各自技术栈个相同模式。