Matcha Glass Default
A glass of iced matcha with light shining through
- Colors
- See-through deep green, pale mint names, pale green text
- Shape
- 12px corners and a thin light border
- Motion
- Fade in
Washi
Messages written on washi paper
- Colors
- Rice paper, ink text, tea-brown names, vermilion accents
- Shape
- Almost square corners, Noto Serif TC
- Motion
- Fade in
Bubbles
Chat bubbles on a phone
- Colors
- Pale coral bubbles, dark tea text, coral accents
- Shape
- Large corners with one tucked in; events get a border and a tilted sticker
- Motion
- Pop in
Outline
Game subtitles
- Colors
- White text with a black outline, mint names, gold accents
- Shape
- No background, only text, a little larger
- Motion
- Fade in
Noren
The curtain at a shop’s door
- Colors
- Indigo cloth, names on a deeper block, gold accents
- Shape
- Name and message as two blocks, 6px corners
- Motion
- Slide in from the left
Terminal
A developer’s terminal
- Colors
- Near-black panel, light grey text, teal names
- Shape
- Monospace, an @ before names, timestamps, one panel
- Motion
- None
Tea Leaf
Chatto’s own look
- Colors
- Dark ground, a pale matcha frame, sakura accents
- Shape
- A nine-slice image frame with two leaves at opposite corners
- Motion
- Pop in
Blank
No styles at all, only the structure and classes, for writing CSS from scratch.
.chatto-message { }Customize
The theme editor shows a sample of every element at once, so you see each change right away. The desktop overlay and OBS can each use their own theme.
- Padding for each side, radius for each corner, borders, shadow and blur
- Nine-slice image frames (PNG, WebP, GIF)
- Separate styles for moderators, VIPs and subscribers
- Styles and wording for subs, raids and other events
- Custom CSS with autocomplete and an inspector
- Export and import, with images in a .chattotheme file