CSS variables

The Re:Maily style reads CSS variables, so a theme changes colors and spacing without touching templates. Set them on .remaily for every form, or on one form’s wrapper class.

.remaily {
	--remaily-accent: #0a7c55;
	--remaily-accent-hover: #086445;
	--remaily-radius: 10px;
}

Variable	Default	Used for
--remaily-accent	#1b2aff	Buttons, checked boxes, focus
--remaily-accent-hover	#1420d6	Buttons on hover
--remaily-on-accent	#ffffff	Text on the accent
--remaily-border	the text color at 22%	Field borders
--remaily-border-hover	the text color at 40%	Field borders on hover
--remaily-field-bg	transparent	Field background
--remaily-muted	the text color at 65%	Placeholders and hints
--remaily-danger	#d92d20	Errors
--remaily-success	#12805c	The sent message
--remaily-radius	6px	Corners
--remaily-gap	1.25rem	Space between fields
--remaily-control-padding	.75em 1em	Padding inside fields
--remaily-focus-ring	a 3px accent ring at 25%	The focus outline

The Re:Maily form style also has its own variables, named --remaily-form-default--{name}: gap, radius, border, field-bg, padding, button-bg, button-bg-hover, button-color, check-bg, check-mark and check-radius. They default to the variables above, so set them only to change one form style without the others.