Creating and customizing styles

A Textual style is a folder containing the files that control how chat is rendered. Basic styles can use CSS, while more extensive changes can customize JavaScript and selected templates.

Start with a copy

Open the custom styles folder using Textual's custom styles link, or use the relevant controls in the app. Copy a bundled style into your custom styles location before editing it; files inside the application bundle are not a suitable place for changes because modifying them can invalidate the code signature.

Use the folder name as the style's display name and retain any licence or attribution file that accompanies it.

Files and templates

The original layout includes design.css, scripts.js, Data/Settings/styleSettings.plist, and optional resources and templates beneath Data. The full style reference preserves the layout, configuration keys and key-value storage API.

Override only the templates that need to change. Copying an entire default template directory for one small edit can prevent later fixes from reaching the parts you did not intend to replace.

Declare the template-engine compatibility expected by the Textual version you target, and check the actual templates bundled with that app. The older reference uses template version 3; it should not be treated as a promise about every future release.

Inspect the rendered view

Developer Mode is documented under Help → Advanced. It adds tools for inspecting the WebKit view, copying its HTML, and reloading a style. Use the rendered structure and the app's bundled JavaScript API as your reference when a selector or callback behaves differently from an old example.

Version-specific changes

The style migration collection preserves all seven-era and earlier migration details, including downloadable diffs. Textual 7.2.4 also changed chat rendering to WebKit2, so test a style on the actual release you intend to support.