One site, two looks.

Como funcionaHow it works

O botão de tema (o quadrado com hachura, ao lado do idioma) troca o visual do site inteiro. O conteúdo, o idioma e a troca automática entre claro e escuro pelo relógio não mudam. A escolha fica salva no navegador.The theme button (the hatched square, next to the language button) changes the look of the whole site. The content, the language and the automatic light/dark switch by the clock do not change. The choice is saved in the browser.

<html lang="pt-BR" data-theme="dark" data-site-theme="studio">

• data-theme é o claro/escuro por horário (boot.js).data-theme is the light/dark by time of day (boot.js).
• data-site-theme é o tema de design: default ou studio. Cada tema tem as duas variações, clara e escura.data-site-theme is the design theme: default or studio. Each theme has both variations, light and dark.
• boot.js lê a escolha salva e aplica o atributo antes da primeira pintura, então não há piscada. main.js cria o botão e troca o atributo.boot.js reads the saved choice and sets the attribute before first paint, so nothing flashes. main.js creates the button and flips the attribute.

O rótulo do botão diz para qual tema ele vai e é traduzido por i18n.js, como o resto da página.The button’s label names the theme it will switch to and is translated by i18n.js, like the rest of the page.

O tema EstúdioThe Studio theme

Foi derivado do visual do site estudio41.com.br: lemos as fontes, cores e o fundo de suas páginas e montamos um sistema próprio a partir disso. Nenhuma imagem ou arquivo do site de referência foi copiado.It was derived from the look of estudio41.com.br: we read the fonts, colours and background of its pages and built our own system from that. No image or file from the reference site was copied.

A variação escura do Estúdio usa papel #111012 e tinta #f4f4f5, com o rodapé ainda mais escuro.Studio’s dark variation uses paper #111012 and ink #f4f4f5, with an even darker footer.

O fundo triangularThe triangular background

Algumas seções do site de referência têm um fundo de linhas finas que formam triângulos. Aqui ele é um SVG desenhado à mão, de 84×57 px, repetido como imagem de fundo: duas verticais, duas diagonais cruzadas e duas diagonais que saem do topo do meio. Fica só no hero, na citação e no bloco de status, e as linhas têm 10% de opacidade.Some sections of the reference site have a background of fine lines that form triangles. Here it is a hand-drawn SVG, 84×57 px, repeated as a background image: two verticals, two crossing diagonals and two diagonals that fall from the top middle. It only appears on the hero, the quote and the status block, and the lines are at 10% opacity.

<svg xmlns="http://www.w3.org/2000/svg" width="84" height="57" viewBox="0 0 84 57"
     fill="none" stroke="#171617" stroke-opacity=".1">
  <path d="M0 0V57M42 0V57M0 0L84 57M0 57L84 0M42 0L84 57M42 0L0 57"/>
</svg>

A cor da linha vem do tema (escura no claro, branca no escuro), por isso o padrão fica em duas versões, guardadas na variável --pattern-image. No tema padrão ela vale none. Para vê-lo aqui, troque o tema.The line colour comes from the theme (dark on light, white on dark), so the pattern exists in two versions, kept in the --pattern-image variable. In the default theme it is none. To see it here, switch the theme.

Regras para criar um temaRules for creating a theme

1. Defina o tema só com variáveis e regras sob [data-site-theme="nome"], para as duas variações ([data-theme="light"] e [data-theme="dark"]).Define the theme only with variables and rules under [data-site-theme="name"], for both variations ([data-theme="light"] and [data-theme="dark"]).
2. Cores e fontes por variável (--paper, --ink, --muted, --line, --sans, --heading, --label); nunca no HTML.Colours and fonts through variables (--paper, --ink, --muted, --line, --sans, --heading, --label); never in the HTML.
3. Nunca mude texto nem estrutura: um tema só muda o visual.Never change text or structure: a theme only changes the look.
4. Carregue as fontes do tema só quando ele for usado (veja loadStudioFonts() em boot.js), para que o tema padrão não pague por elas.Load the theme’s fonts only when it is used (see loadStudioFonts() in boot.js), so the default theme does not pay for them.
5. Adicione o nome em SITE_THEMES (boot.js) e as chaves themeToggle.* em i18n.js, nos dois idiomas.Add the name to SITE_THEMES (boot.js) and the themeToggle.* keys in i18n.js, in both languages.