Custom CSS

What it is

Custom CSS lets you restyle Omniscio itself. Out of the box the app offers themes, which recolour a fixed list of colour variables. Custom CSS is the open-ended version of that: any CSS property, against any part of any screen — spacing, borders, rounding, hiding things, rearranging them.

That means you or your agent can make the app look and behave the way you want, rather than the way a fixed set of options allows. It is aimed at people who are comfortable with CSS, and at their agents, who can write it for them.

Two things worth knowing from the start:

• Your CSS is applied after the app's own styling, so it wins. That is what makes it powerful, and it also means a mistake is very visible.
• It can never load anything from the internet — no web images, no web fonts, no importing another stylesheet. Those references are removed automatically and the app tells you how many it removed. If one is hidden in a way the app cannot safely rewrite, the stylesheet is not applied at all and the card says why — safer than applying half of it.

Where to find it

Settings → Appearance → Custom CSS. The card holds a text box for your stylesheet, a Save & Apply button, an Undo button, an Edit the file button that opens the stylesheet in your own editor, an on/off switch, and a line telling you who last changed the styling and when.

Under the covers it is one file — styles/custom.css inside your Omniscio data folder (on Windows, %APPDATA%\omniscio\styles\custom.css). Editing that file directly, in any editor, has exactly the same effect as typing in the card. An empty file, or no file, simply means no custom CSS.

There is also a keyboard shortcut that toggles it on and off — Ctrl+Alt+Shift+C — and agents can reach everything through the app's own command line.

How it behaves

Type or paste your CSS and press Save & Apply. The change appears immediately, in every window you already have open — there is nothing to restart.

What you can target. The app's colour and spacing variables (the same ones a theme sets, named --accent, --color-surface-100 and so on) restyle the app everywhere when you set them on :root. Beyond that, every visible region of the app carries a stable name tag, and you can style one directly — the reply box, for example, is named session-input, so [data-ui-anchor="session-input"] { border-radius: 14px; } rounds off just that box. Plain selectors work too; there is no allow-list.

The one rule: session row height. To change how tall a session row is, set the variable --amc-session-row-height rather than restyling the row's height directly:

:root {
  --amc-session-row-height: 48px;
}

The list of sessions is drawn using only the rows you can currently see, and it works out where each one goes from a fixed estimate instead of measuring them. If your CSS makes a row taller without that estimate moving in step, rows land in slots of the wrong size: long lists overlap and clip as you scroll, with no error shown. --amc-session-row-height moves both halves together. If you restyle the row's height or padding directly instead, the app will warn you in the card — your CSS still applies, but long lists may misbehave.

When something goes wrong. Because your CSS is applied last, a bad rule can make the app look wrong very quickly. There are three ways off, in order of how broken the screen is: the Ctrl+Alt+Shift+C shortcut, the switch in the card, and — when the screen is too broken to click anything — starting the app with the --no-custom-css option, or turning it off from the command line. The app also starts with custom CSS off in Safe Mode.

Turning the layer off never deletes your stylesheet: the file is left exactly as it was, so you can fix it and switch it back on. The Undo button restores the version your last save replaced, so an experiment that goes wrong is one step away from the version that worked.

For agents

Everything the card does is available over the app's local command line, on http://127.0.0.1:19519, with the usual bearer token:

Call	What it does
GET /custom-css	The current stylesheet, whether it is live, who last changed it, and any warnings.
PUT /custom-css	Replace the whole stylesheet. Body: {"text": "…"}.
POST /custom-css/undo	Restore the version the last write replaced.
POST /custom-css/disable · POST /custom-css/enable	The one-action escape, both directions.
GET /custom-css/anchors?q=	Every name tag the app carries, so you can target a region by name instead of guessing it.

The settings key is customCssEnabled, and the launch flag that disables the layer before the first paint is --no-custom-css (the environment variable AMC_DISABLE_CUSTOM_CSS=1 does the same).

An agent session holds a scoped token and can write CSS with it — that is deliberate, because "let my agent customize the app" is the point of the feature. Every write is recorded against the session that made it and shown in the card. There is no approval prompt for a write; the safety net is the off switch and undo.

Related

If what you want is a different colour scheme rather than arbitrary styling, a custom theme is the simpler path — it fills in a fixed list of colours and the app applies them, and you can share a theme as a single file. Custom CSS composes with it: pick a theme, then layer your own CSS on top.

The rest of the appearance settings — text size, dark or light, motion and polish — live alongside it in Settings → Appearance, and are the right place to look before writing CSS to achieve the same thing.