Writing a theme

A theme is a .theme file. It needs a name, whether it is light or dark, and some colours.

theme "Seafoam"
base dark

bg      #0d1a19
surface #12211f
text    #dcecea
accent  #4fd6c0

Save it as seafoam.theme in your themes folder, hit Reload in Settings, and it appears in the gallery.

base

base dark

base is either light or dark. It does two things: it tells Chattler which way round the interface should read, and it decides the handful of contrast tweaks that only make sense on one or the other. Get this wrong and text will fight the background, so set it to match your bg.

What you have to give it

Only two: bg and text. Everything else is worked out from them. That is usually enough for a first draft:

theme "Ink"
base dark
bg   #10121a
text #e6e8f0

Every colour you can set

Key	What it colours
bg	the window behind everything
surface	panels: chat area, cards, the settings sheet
surface2	inputs, buttons, the toolbar
surface3	raised things: hover states, sliders, toasts
line	borders and dividers
text	normal text
text2	secondary text: timestamps, descriptions
text3	faint text: hints, units
accent	links, the selected tab, focus rings
live	the LIVE dot, bans, urgent alerts
ok	success, first-time chatter bar
warn	AutoMod, warnings
mention	the wash behind a message that mentions you
first	the wash behind a first-time chatter
notice	the wash behind subs and notices
titlebar	the Windows title bar (defaults to bg)
titlebartext	the minimise/maximise/close symbols

Anything you leave out is derived:

• surface, surface2, surface3 step away from bg
• text2 and text3 fade text toward bg
• mention, first and notice are soft washes of live, ok and accent
• line is a small step from bg

Colours and comments

Colours are hex, with or without quotes: #0d1a19, #fff, #0d1a19ff.

A # that is not a colour starts a comment:

bg #0d1a19   # deep green, almost black

Getting it right

Start from a built-in. The eight that ship with Chattler are in resources\app.asar\src\themes in your install folder, and each one is a complete example. Copy the closest one and change it.

Check the two hard places. Usernames are tinted for readability against bg, and the AutoMod and suspicious-user cards use warn and live as washes. A busy chat will show you in seconds whether those still read.

Keep text and bg far apart. If you can comfortably read a timestamp (text3) at a glance, the rest will be fine.

Name it well. The name in quotes is what appears in the gallery, not the file name.

The eight that ship with Chattler

From lightest to darkest:

Theme	Base	Background
Daylight	light	#eceef3
Paper	light	#f1ece1
Mist	light	#e7edf2
Slate	light	#d6dbe3
Dusk	dark	#222634
Dark	dark	#111318
Carbon	dark	#0b0c0f
Midnight	dark	#000000

Slate is the one to steal for a dimmed light theme, Dusk for a dark theme that is not harsh in a lit room, and Midnight is pure black for OLED screens.

Replacing a built-in theme

Save your file under the same name as a built-in - dark.theme, midnight.theme - and yours is used instead. Delete it and the original comes back.

Transparency

Chattler's see-through window setting works with any theme. It fades the painted backgrounds and leaves text solid, so a theme with a busy bg will look softer than you expect at low opacity. Try it at 60% before you publish.