Custom CSS and code injection

Ghost has a place for custom CSS and JavaScript that is not inside the theme. It is called code injection, it lives in Ghost's database rather than in any theme file, and that single fact is the whole reason to use it: it survives every theme update, permanently, without you having to remember it exists.

Editing theme files directly does the opposite. Any update — manual or automatic, on self-hosted Ghost only, since Ghost(Pro) has no filesystem to edit — replaces the theme's files and your edits with them. There is no merge, no warning and no record of what was lost. If you have customisations in theme files today, moving them into code injection before your next update is worth the twenty minutes.

Beyond where to put it, there are a few conventions worth knowing so that custom CSS works with the theme rather than fighting it. Neutrino is built on a system of design tokens — sizes, colours and radii that adapt to screen size, colour scheme and corner style. CSS that reaches for those tokens keeps adapting; CSS that hardcodes values around them looks right in exactly one configuration and wrong in the rest.