Lily Design System™

Temas

Os componentes da Lily têm ganchos de classe estáveis e zero CSS — por isso um tema é apenas uma folha de estilos. Este tutorial vai de «ligue um ficheiro» a «deixe o utilizador mudar de tema em tempo de execução, com persistência».

O que vai construir

Uma aplicação cujo aspeto completo o utilizador pode alterar — começando com uma folha de estilos ligada e acabando num alternador de temas persistente em tempo de execução — em cerca de 15 minutos.

Antes de começar

Conclua primeiro o tutorial do framework da sua stack primeiro, para ter um pequeno formulário Lily a que aplicar o tema. Tudo aqui funciona nos sete frameworks; os exemplos de código mostram Svelte e HTML simples.

Passo 1 — Ligar um tema pronto

themes/ o diretório contém 45 folhas de estilo autónomas. Copie-as para os recursos estáticos da sua aplicação e ligue uma: 

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

Destaques do conjunto:

  • Setor público — NHS England / Scotland / Wales, cada um em variantes para doentes e para profissionais; GOV.UK (united-kingdom-government-digital-service); USWDS (united-states-web-design-system).
  • Inspirados em fornecedores — adobe-spectrum, mozilla-protocol.
  • Uso geral — light, dark, nord, dracula, wireframe, corporate, synthwave, e muitos mais.

Verifique o seu trabalho: recarregue a página. A mesma marcação que construiu no tutorial do framework está agora totalmente estilizada — botões, entradas, etiquetas, anéis de foco. Uma linha de HTML fez isso — cada componente ficou exatamente como estava.

Passo 2 — Substituir o que quiser

Os seletores do tema estão envolvidos em :where(...)que tem especificidade zero — pelo que qualquer regra que escreva ganha, simplesmente: 

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

Passo 3 — Alternância em tempo de execução com theme-picker

theme-picker o auxiliar é um botão de ícone sem cabeça + caixa de lista que é dono de todo o ciclo de vida do tema: carrega a folha de estilos escolhida trocando um único <link> gerido (só o tema ativo é obtido), define data-theme="{slug}" no documento e, opcionalmente, persiste em localStorage. Aqui mostra-se Svelte; as portagens de React, Vue, Angular, HTML, Nunjucks e Blazor correspondem contrato a contrato: 

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

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

Essa é toda a integração. O comportamento de teclado segue o padrão de caixa de lista do WAI-ARIA APG; o controlo em si é sem cabeça (gancho de classe .theme-picker), pelo que adota o tema que estiver ativo.

Verificado em 2026-08-29: este excerto exato foi compilado contra o pacote 0.1.1 publicado, através de svelte/server.

Passo 4 — Reagir ao tema no seu próprio CSS

Como o auxiliar define data-theme na raiz do documento, os seus próprios estilos podem ramificar-se a partir dele: 

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

Notas sobre renderização no servidor

O auxiliar faz todas as escritas no DOM dentro do ciclo de vida mount/effect do framework, pelo que é seguro para SSR por construção. Para evitar um clarão na primeira pintura, renderize no servidor o <link> e data-theme do tema inicial (por exemplo, a partir de um cookie) — o repositório do auxiliar Svelte inclui um exemplo executável de cookie para SvelteKit, e os outros catálogos documentam o mesmo padrão para as suas stacks.

Passos seguintes

  • Auxiliares de preferências — o mesmo padrão para idioma, tamanho do texto, partilha e introdução de data/hora.
  • Contribua com um tema — cada um é uma folha de estilos autónoma que visa os ganchos de classe; veja contribuir.

Dúvidas pelo caminho? A página de ajuda está cheia de respostas — e se algum passo puder ser mais claro, diga-nos e melhoraremos o tutorial com todo o gosto.