Dark mode

Modes

Appearance is light, dark or system. The resolved mode is written to data-tx-mode on the document element. Theme CSS defines both palettes; the mode attribute selects which variables apply.

No flash

noFlashScript(namespace, default) reads the stored preference synchronously and sets mode before the first paint. Namespace it per product so sites do not clash in localStorage.

import { noFlashScript } from '@texuli/tokens/no-flash';

// Inline first in <head> (Astro: is:inline)
<script is:inline set:html={noFlashScript('my-app', 'system')} />
<html data-tx-theme="enterprise-neutral" data-tx-mode="light">

Live mode

Change the control in the site header and watch the badge update.