DEIXE DO SEU JEITO
Crie seu próprio tema.
Um tema do PixelyChat é um único arquivo pequeno. Você não precisa programar: descreva o visual que deseja, peça a um assistente de IA como Claude ou ChatGPT para modificar um tema existente e importe o resultado.
Quer mudar a aparência do chat? Crie um estilo de chat ↓
1. Obtenha um ponto de partida
- Baixe qualquer tema da Biblioteca de temas — de preferência um que já se aproxime do que você quer.
- Ou, no PixelyChat, abra Tema da cena, escolha um tema e selecione Exportar para edição nas Ferramentas do criador.
Um arquivo .pixelytheme é um arquivo ZIP normal com outro nome. Se seu chat de IA recusar o envio, renomeie o arquivo para .zip. Todo pacote contém um README.md que explica o formato para a IA.
2. Peça à IA
Use um assistente que consiga ler arquivos enviados e entregar um arquivo de volta para você (Claude com criação de arquivos ou ChatGPT com envio de arquivos e execução de código). Anexe o arquivo do tema, cole este prompt e preencha a parte marcada:
Anexei um tema do PixelyChat (um arquivo .pixelytheme, que é um arquivo ZIP — se você não conseguir abri-lo, trate-o como .zip). Transforme-o no meu próprio novo tema.
PRIMEIRO, descompacte-o e leia README.md — ele é o guia oficial do formato de temas do PixelyChat e lista todos os hooks de CSS. Depois leia theme.json, theme.css e fields.json.
O VISUAL QUE EU QUERO:
[Descreva seu tema aqui: clima, cores, formas, fontes, animações. Exemplo: "Neon synthwave - painéis roxo-escuros, detalhes em rosa choque e ciano, bordas brilhantes e um brilho pulsante lento nos alertas."]
REGRAS
- theme.json: dê a ele um novo "id" exclusivo (letras minúsculas, números e hífens) e um novo "name". Defina "author" como {"name": "[SEU NOME]", "type": "creator"}, "version" como "1.0.0" e adicione "released" com a data de hoje no formato YYYY-MM-DD. Mantenha os outros campos, incluindo "basedOn" e "supports".
- Os temas alteram apenas a aparência: CSS, JSON e arquivos incluídos. Sem JavaScript, sem @import e sem URLs externos. Imagens e fontes devem ficar em assets/ e ser referenciadas com caminhos relativos.
- Estilize todas as áreas listadas em "supports" (alertas, recompensas, widgets e as telas Starting Soon / Be Right Back / Shoutout). Mantenha o texto legível sobre qualquer fundo da transmissão e garanta que funcione em layouts horizontais e verticais.
- Mantenha o pacote pequeno. Use somente imagens, fontes e sons que você tem permissão para usar. Se o preview.webp antigo não corresponder mais ao novo visual e você não conseguir renderizar outro (WebP pequeno, cerca de 1280x720, abaixo de 150 KB), exclua-o.
- Empacote: compacte o CONTEÚDO da pasta do tema para que theme.json fique no nível superior do arquivo (não dentro de uma subpasta) e nomeie o arquivo como [id].pixelytheme.
Quando terminar, entregue o arquivo .pixelytheme final para download e liste o que você alterou e qualquer coisa que não conseguiu verificar.
3. Importe e teste
- Baixe o arquivo fornecido pela IA.
- No PixelyChat, abra Tema da cena e clique em Importar tema.
- Confira a prévia e depois seus alertas, widgets e telas. Ainda não ficou certo? Diga à IA o que mudar (capturas de tela ajudam) e importe o novo arquivo — o PixelyChat oferecerá atualizar o tema que você já instalou.
- Temas importados podem ser excluídos novamente a qualquer momento; os temas integrados permanecem.
4. Compartilhe (opcional)
Gostou do resultado? Envie o arquivo .pixelytheme para [email protected] com o nome que você quer exibir como autor. Fazemos uma análise parcial e, se fizer sentido, adicionamos à Biblioteca de temas para todo mundo.
Envie somente o que você tem direito de compartilhar. Ao enviar um tema, você confirma que o criou ou tem o direito de distribuí-lo e que ele não contém material protegido por direitos autorais de terceiros (imagens, fontes, sons, logotipos, personagens) sem permissão. Temas enviados são conteúdo criado por usuários e passam apenas por análise parcial do PixelyChat; o autor continua responsável pelo conteúdo, e podemos remover qualquer tema a qualquer momento.
ESTILOS DE CHAT
Crie seu próprio estilo de chat.
Um estilo de chat muda a aparência das mensagens no overlay do chat: etiquetas de nome, cartões, bordas, emblemas e decorações. Ele funciona como um tema: um pequeno arquivo .pixelystyle, e um assistente de IA pode criá-lo para você.
1. Escolha um ponto de partida
- Baixe qualquer estilo da biblioteca de estilos de chat.
- Ou, no PixelyChat, abra Chat → Estilo, selecione um estilo de chat instalado e clique em Exportar para edição em Opções do estilo. Essa cópia também inclui uma página de teste (
dev/test.html) que mostra todos os tipos de mensagem.
Um arquivo .pixelystyle é um arquivo ZIP comum com outro nome. Se o seu chat de IA recusar o envio, renomeie o arquivo para .zip. Todo pacote contém um README.md que explica o formato para a IA.
2. Peça à IA
Anexe o arquivo do estilo, cole este prompt e preencha a parte marcada:
Anexei um estilo de chat do PixelyChat (um arquivo .pixelystyle, que é um arquivo ZIP - se não conseguir abrir, trate-o como .zip). Transforme-o no meu próprio estilo de chat novo.
PRIMEIRO descompacte e leia o README.md: é o guia oficial do formato de estilos de chat do PixelyChat, com a estrutura das mensagens, todas as classes e atributos data e as variáveis CSS. Depois leia chat-style.json, style.css e fields.json.
O VISUAL QUE EU QUERO:
[Descreva aqui seu estilo de chat: clima, cores, formas, etiquetas de nome, emblemas, decorações. Exemplo: "Outono aconchegante - cartões marrons quentes, etiquetas de nome laranja, uma folhinha no canto de cada mensagem e um ícone de folha de bordo para os mods."]
REGRAS
- chat-style.json: dê a ele um "id" novo e único (letras minúsculas, números e hifens) e um "name" novo. Defina "author" como {"name": "[SEU NOME]"}, "version" como "1.0.0" e adicione "released" com a data de hoje no formato YYYY-MM-DD. Mantenha "format", "schemaVersion" e "styleApiVersion".
- Estilos de chat mudam só a aparência: CSS, JSON e arquivos incluídos. Nada de JavaScript, @import ou URLs externas. Imagens e fontes devem ficar em assets/ e ser referenciadas com caminhos relativos.
- Use as variáveis CSS de fundo, cantos, borda e cor de destaque (listadas no README.md) sempre que fizer sentido, para que as configurações do estilo no PixelyChat continuem funcionando. Pinte as decorações com a cor de destaque (SVGs de uma só cor usados como máscara) para que acompanhem a cor do streamer.
- Estilize todos os tipos de mensagem: mensagens normais de cada função (streamer, mod, VIP, sub, espectador), mensagens só com emotes e eventos (follows, subs, presentes, raids...). O texto deve ficar legível sobre qualquer fundo da live.
- Mantenha leve: sem animações em loop, sem backdrop-filter nem blur, e no máximo uma animação de entrada curta. Mantenha o pacote pequeno (5 MB no máximo). Use apenas imagens e fontes que eu tenho permissão para usar. Se o preview.webp antigo não combinar mais com o novo visual e você não conseguir gerar um novo (WebP pequeno, cerca de 960x540, abaixo de 150 KB), apague-o.
- Empacote: compacte o CONTEÚDO da pasta do estilo para que chat-style.json fique no nível superior do arquivo (não dentro de uma subpasta), deixe de fora a pasta dev/ e nomeie o arquivo como [id].pixelystyle.
Quando terminar, me entregue o arquivo .pixelystyle final para download e liste o que você mudou e o que não conseguiu verificar.
3. Importe e teste
- Baixe o arquivo que a IA entregar.
- No PixelyChat, abra Chat → Estilo → Biblioteca de estilos e clique em Importar estilo.
- Selecione o estilo em Overlay e confira a pré-visualização. As configurações de fundo, cantos, borda e cor de destaque também funcionam com ele. Ainda não ficou certo? Diga à IA o que mudar (capturas de tela ajudam) e importe o novo arquivo — o PixelyChat oferece atualizar o estilo que você já instalou.
- Mantenha leve: as mensagens ficam na tela durante toda a live, então animações em loop e blur custam desempenho no OBS.
4. Compartilhe (opcional)
Gostou do resultado? Envie o arquivo .pixelystyle (5 MB no máximo) para [email protected] com o nome que você quer mostrar como autor. Fazemos uma revisão parcial e, se fizer sentido, adicionamos à biblioteca de estilos de chat para todos.
Envie apenas o que você pode compartilhar. Ao enviar um estilo de chat, você confirma que o criou ou tem o direito de distribuí-lo, e que ele não contém material de terceiros protegido por direitos autorais (imagens, fontes, logos, personagens) sem permissão. Os estilos de chat enviados são conteúdo criado por usuários e revisados apenas parcialmente pelo PixelyChat; o autor continua responsável pelo conteúdo, e podemos remover qualquer estilo a qualquer momento.