Lily Design System™

Темы

У компонентов 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 помощник — это безголовая кнопка-значок + список, владеющая всем жизненным циклом темы: он загружает выбранную таблицу стилей, подменяя один управляемый <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; сам элемент управления безголовый (крючок класса .theme-picker), поэтому он подхватывает любую активную тему.

Проверено 2026-08-29: именно этот фрагмент был скомпилирован против опубликованного 0.1.1 пакета через svelte/server.

Шаг 4 — Реагируйте на тему в собственном CSS

Поскольку помощник устанавливает data-theme в корне документа, ваши собственные стили могут ветвиться по нему: 

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

Заметки по серверному рендерингу

Помощник выполняет все записи в DOM внутри жизненного цикла mount/effect фреймворка, поэтому по построению безопасен для SSR. Чтобы избежать вспышки при первой отрисовке, отрисуйте на сервере <link> и data-theme начальной темы (например, из cookie) — репозиторий помощника Svelte включает исполняемый пример cookie для SvelteKit, а остальные каталоги документируют тот же шаблон для своих стеков.

Дальнейшие шаги

  • Помощники настроек — тот же шаблон для языка, размера текста, «Поделиться» и ввода даты/времени.
  • Внесите тему — каждая представляет собой одну автономную таблицу стилей, нацеленную на крючки классов; см. как внести вклад.

Есть вопросы по ходу дела? Страница справки полна ответов — а если какой-то шаг можно сделать яснее, сообщите нам и мы с радостью улучшим руководство.