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, а інші каталоги документують той самий шаблон для своїх стеків.

Наступні кроки

  • Допоміжні засоби налаштувань — той самий шаблон для мови, розміру тексту, поширення та введення дати/часу.
  • Запропонуйте тему — кожна є однією автономною таблицею стилів, що націлена на клас-гачки; див. внесок.

Питання по дорозі? сторінка допомоги повна відповідей — а якщо якийсь крок може бути зрозумілішим, повідомте нам і ми із задоволенням покращимо посібник.