Crie um diretório com o nome do seu tema (o mesmo nome usado como chave no objeto de configuração, descrito no item acima). Dentro desse diretório, crie um arquivo chamado “index.css”. Nele, você poderá adicionar alguma imagem, caso seu tema necessite.
Customize os elementos prefixando suas classes com o “className” que você definiu no objeto de configuração do seu tema no arquivo list-of-themes.js.
Abra uma Pull Request submetendo seu tema para o projeto principal. Assim que a PR for aceita, seu tema entrará para a lista de temas na ferramenta.
Ambos “brazil” e “S” são SVGs. Já a letra “J” e sua linha de efeito são HTML puro (DIVs). Você pode brincar a vontade com estes elementos, e também com seus respectivos pseudo-elements (:before e :after). Caso adicione a classe “spin”, você verá o logo girando em 3D. Tenha em mente que alguns efeitos 3D ou de gradientes se comportam diferente em SVGs. A font-family usada por padrão é a “Roboto Mono”,monospace, caso você esteja usando “content” em algum pseudoelemento. Quando você define um gradiente ou imagem como uma das três variáveis de CSS (descritas abaixo), o controller fica bloqueado para que usuários não possam alterar aquele efeito. Do contrário, usuários poderão alterar a cor daquela variável para seu tema.
Você pode usar, também, strings para “gradientes” ou “image url”. Isto é válido também para o background do body no arquivo de configurações (por padrão, o body irá centralizar qualquer imagem de backrgound, e defini-la como “cover”).
IMPORTANTE: Quando usar cores que não sejam efeitos de gradiente nem URLs para imagens, sempre use valores válidos para RGB ou HEX para as cores, e não use a versão “curta” para definição em hexadecimal (por exemplo, use “#ff9900” no lugar de “#f90”). Nós usaremos estes valores nos campos de “color picker”, que são elementos HTML do tipo “color” que não aceitam estes formatos abreviados.
Todos os elementos vão animar qualquer alteração que sofrerem, por padrão, utilizando as CSS Transitions. Sinta-se à vontade para customizar as animações, mas certifique-se de que elas estão sempre sob a definição da classe de seu tema.
Ao submeter um novo tema, você está nos dando permissões para exibi-lo em diferentes locais. Sempre que possível, nós atribuiremos os créditos ao seu tema. Sua referência ficará também em nosso repositório como o author do tema, especificado no arquivo de configurações.