MAKE IT YOURS

Create your own theme.

A PixelyChat theme is one small file. You don't need to code: describe the look you want, let an AI assistant such as Claude or ChatGPT change an existing theme for you, and import the result.

Want to change how chat looks instead? Create a chat style ↓

1. Get a starting point

Download any theme from the Theme Library — for example one that is close to what you want.
Or, in PixelyChat, open Scene Theme, pick a theme and choose Export for Editing in the Creator Tools.

A .pixelytheme file is a normal ZIP archive with a different name. If your AI chat refuses the upload, rename the file to .zip. Every package contains a README.md that explains the format to the AI.

2. Ask the AI

Use an assistant that can read uploaded files and hand you a file back (Claude with file creation, or ChatGPT with file uploads and code execution). Attach the theme file, paste this prompt and fill in the marked part:

I attached a PixelyChat theme (a .pixelytheme file, which is a ZIP archive - if you cannot open it, treat it as .zip). Please turn it into my own new theme.

FIRST unzip it and read README.md - it is the official guide to the PixelyChat theme format and lists every CSS hook. Then read theme.json, theme.css and fields.json.

THE LOOK I WANT:
[Describe your theme here: mood, colors, shapes, fonts, animations. Example: "Neon synthwave - dark purple panels, hot pink and cyan accents, glowing borders, a slow pulsing glow on alerts."]

RULES
- theme.json: give it a new, unique "id" (lowercase letters, digits and hyphens) and a new "name". Set "author" to {"name": "[YOUR NAME]", "type": "creator"}, "version" to "1.0.0" and add "released" with today's date as YYYY-MM-DD. Keep the other fields, including "basedOn" and "supports".
- Themes are appearance only: CSS, JSON and bundled files. No JavaScript, no @import, no external URLs. Images and fonts must live in assets/ and be referenced with relative paths.
- Style every area listed in "supports" (alerts, rewards, widgets, and the Starting Soon / Be Right Back / Shoutout screens). Keep text readable on any stream background, and make sure it works in both horizontal and vertical layouts.
- Keep it small. Use only images, fonts and sounds I am allowed to use. If the old preview.webp no longer matches the new look and you cannot render a new one (small WebP, about 1280x720, under 150 KB), delete it.
- Package it: zip the CONTENTS of the theme folder so theme.json sits at the top level of the archive (not inside a subfolder) and name the file [id].pixelytheme.

When you are done, give me the finished .pixelytheme file to download, and list what you changed and anything you could not check.

3. Import and try it

Download the file the AI gives you.
In PixelyChat open Scene Theme and click Import theme.
Check the preview, then your alerts, widgets and screens. Not right yet? Tell the AI what to change (screenshots help) and import the new file — it offers to update the theme you already installed.
Themes you imported can be deleted again at any time; the built-in themes stay.

4. Share it (optional)

Happy with the result? Send the .pixelytheme file to [email protected] with the name you want shown as author. We do a partial review and, if it fits, add it to the Theme Library for everyone.

Only submit what you may share. By sending a theme you confirm that you created it or have the right to distribute it, and that it contains no third-party copyrighted material (images, fonts, sounds, logos, characters) without permission. Submitted themes are user-created content and are only partially reviewed by PixelyChat; the author remains responsible for their content, and we may remove any theme at any time.

CHAT STYLES

Create your own chat style.

A chat style changes how messages look in the Chat overlay: name tags, cards, borders, badges and decorations. It works like a theme: one small .pixelystyle file, and an AI assistant can make one for you.

1. Get a starting point

Download any style from the Chat Styles library.
Or, in PixelyChat, open Chat → Style, select an installed chat style and click Export for editing under Style Options. That copy also includes a test page (dev/test.html) that shows every kind of message.

A .pixelystyle file is a normal ZIP archive with a different name. If your AI chat refuses the upload, rename the file to .zip. Every package contains a README.md that explains the format to the AI.

2. Ask the AI

Attach the style file, paste this prompt and fill in the marked part:

I attached a PixelyChat chat style (a .pixelystyle file, which is a ZIP archive - if you cannot open it, treat it as .zip). Please turn it into my own new chat style.

FIRST unzip it and read README.md - it is the official guide to the PixelyChat chat style format: the message structure, every class and data attribute, and the CSS variables. Then read chat-style.json, style.css and fields.json.

THE LOOK I WANT:
[Describe your chat style here: mood, colors, shapes, name tags, badges, decorations. Example: "Cozy autumn - warm brown cards, orange name tags, a small leaf in the corner of each message, a maple leaf icon for mods."]

RULES
- chat-style.json: give it a new, unique "id" (lowercase letters, digits and hyphens) and a new "name". Set "author" to {"name": "[YOUR NAME]"}, "version" to "1.0.0" and add "released" with today's date as YYYY-MM-DD. Keep "format", "schemaVersion" and "styleApiVersion".
- Chat styles are appearance only: CSS, JSON and bundled files. No JavaScript, no @import, no external URLs. Images and fonts must live in assets/ and be referenced with relative paths.
- Use the CSS variables for background, corners, edge and accent (listed in README.md) wherever it makes sense, so the style settings in PixelyChat keep working. Paint decorations with the accent color (single-color SVGs used as a mask), so they follow the streamer's color.
- Style every kind of message: normal messages for each role (streamer, mod, VIP, sub, viewer), emote-only messages and events (follows, subs, gifts, raids...). Keep text readable on any stream background.
- Keep it light: no looping animations, no backdrop-filter, no blur, at most one short entry animation. Keep the package small (5 MB at most). Use only images and fonts I am allowed to use. If the old preview.webp no longer matches the new look and you cannot render a new one (small WebP, about 960x540, under 150 KB), delete it.
- Package it: zip the CONTENTS of the style folder so chat-style.json sits at the top level of the archive (not inside a subfolder), leave out the dev/ folder, and name the file [id].pixelystyle.

When you are done, give me the finished .pixelystyle file to download, and list what you changed and anything you could not check.

3. Import and try it

Download the file the AI gives you.
In PixelyChat open Chat → Style → Style Library and click Import style.
Select the style under Overlay and check the preview. The background, corner, edge and accent settings work with it too. Not right yet? Tell the AI what to change (screenshots help) and import the new file — it offers to update the style you already installed.
Keep it light: messages stay on screen during your whole stream, so looping animations and blur cost performance in OBS.

4. Share it (optional)

Happy with the result? Send the .pixelystyle file (5 MB at most) to [email protected] with the name you want shown as author. We do a partial review and, if it fits, add it to the Chat Styles library for everyone.

Only submit what you may share. By sending a chat style you confirm that you created it or have the right to distribute it, and that it contains no third-party copyrighted material (images, fonts, logos, characters) without permission. Submitted chat styles are user-created content and are only partially reviewed by PixelyChat; the author remains responsible for their content, and we may remove any style at any time.