Tematização

Trocar a aparência de um produto inteiro mexendo nos tokens, sem reescrever os componentes.

Hard

O que é

Tematização é a técnica de mudar o visual de um produto trocando os valores que alimentam o design, não os componentes em si. As cores, os espaçamentos e a tipografia vivem em tokens. O componente lê o token. Quando você troca o conjunto de tokens, a interface inteira muda de cara de uma vez.

É assim que um produto oferece modo claro e modo escuro sem manter duas versões de cada tela. O botão é o mesmo botão, só que o token de cor de fundo agora aponta pra um valor escuro. O mesmo mecanismo serve pra dar a uma marca parceira a sua própria identidade rodando sobre o mesmo sistema.

Na prática, tematização separa o que é estrutura do que é aparência. Quem mantém o produto ganha a liberdade de mudar o visual sem tocar na lógica, e isso é o que mantém a coisa sustentável com o tempo.

Em uma frase

Se os tokens estiverem certos, a tematização do modo escuro sai quase de graça.

A pergunta que ele responde

Como ofereço modo claro e escuro sem manter duas versões de cada tela?

Quando usar

Quando o produto precisa de mais de uma aparência (claro/escuro, marca parceira) sobre a mesma base de componentes.

Como não usar

Tematizar sem ter tokens de verdade, espalhando valores soltos pelo código, o que transforma a troca de tema numa caçada manual.

Na prática

A plataforma logada nasce branca e ganha uma chave de modo escuro. Nenhuma tela é refeita: o conjunto de tokens de cor troca e tudo se adapta.

Não confunda com

Tematização não é redesenho: redesenho muda estrutura e comportamento, tematização só troca os valores de aparência que os componentes já consomem. Se você precisou mexer no componente, não foi tematização.

D

Em inglês

Theming

Pronúncia

n/a

Também chamado de

theming, troca de tema

Origem

n/a

Fonte

Saiba mais

Material Design, documentação sobre theming e design tokens