Temas / Crie o seu

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

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

  1. Baixe o arquivo fornecido pela IA.
  2. No PixelyChat, abra Tema da cena e clique em Importar tema.
  3. 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.
  4. 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

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

  1. Baixe o arquivo que a IA entregar.
  2. No PixelyChat, abra Chat → Estilo → Biblioteca de estilos e clique em Importar estilo.
  3. 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.
  4. 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.