Themes, dark mode and RTL
Customize shared tokens and persisted appearance settings.
Palette identifiers
| Label | Identifier |
|---|---|
| Emerald | emerald |
| Ruby | red-light |
| Aqua | aqua-light |
| Teal | green-blue |
| Ocean | ocean |
| Indigo | indigo |
| Violet | violet |
| Rose | rose |
| Amber | amber |
| Slate | slate |
HTML update
After preferences.js loads, use the partial-update API:
NavrenzaAppearance.update({
theme: 'violet', dark: true, direction: 'rtl',
navigationLayout: 'vertical', sidebarStyle: 'brand'
});Override shared tokens
Add custom rules to assets/css/html.css, after the shared stylesheet. To change or add Tailwind utilities, rebuild with the optional tooling: open _source, run npm install once, then npm run build. The build writes assets/css/tailwind.css. Keep custom overrides in assets/css/html.css.
.my-panel {
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
padding-inline: 1.5rem;
}Persisted preferences
Appearance is saved under navrenza:html-tailwind:appearance. Reset the Settings page before testing changed defaults. Use logical spacing for RTL and test muted text, buttons and charts in both modes.
Optional demo theme customizer
The floating appearance button opens a right-side preview panel. It shares preferences with Settings and saves them in this browser. Escape or the close button dismisses it.
Set customizer: false in assets/js/demo-config.js to hide the panel in your application. React requires a new build. HTML changes take effect on reload. The Bootstrap React starter and both HTML starter pages disable it by default.
Expand “Use these settings in your project” in the panel and apply the values to the defaults in assets/js/preferences.js. Tailwind React exports its own accent and compact keys. Saved browser settings override defaults; use a fresh profile to verify new defaults. Appearance reset does not delete business records.
For a per-page HTML opt-out, add data-demo-customizer="false" to the body. This demo panel is optional; disabling it keeps the application Settings page available.