Themes, dark mode and RTL

Design and customization

Choose from ten palettes in Appearance settings (/#/settings): Emerald, Ruby, Aqua, Teal, Ocean, Indigo, Violet, Rose, Amber and Slate. Header styles (Classic, Tinted, Solid), sticky header, dark mode and RTL preferences apply immediately and persist in this browser. Theme and RTL preferences are in src/app/preferences.ts. All admin routes use one shell and the same sidebar. Layout variants are interactive previews inside their content area. Shared tokens in src/styles/theme.css govern old and new pages. Pro styling uses these tokens (--accent, --text, --muted, --surface, --canvas, --line) and logical CSS properties. Maintain contrast in both appearances when changing tokens.

Use Card for panels, Modal for native dialogs, ResourceTable for business tables, and the Pro page-title pattern for new pages. Keep large dependencies behind lazy routes. Product illustrations and article covers are original SVG/CSS compositions using the included icon library; no new stock-photo rights are required for them. Legacy assets retain their original owner's terms.

The HTML email cards and modal previews render the same sandboxed generated HTML that downloads. Replace example URLs, sender identity, and billing text before using these emails. Email-client rendering still requires dedicated testing for your delivery audience.

Palette identifiers

React update

usePreferences is in src/app/preferences.ts. update accepts a complete Preferences object; preserve other fields. This component must be inside PreferencesProvider:

import { usePreferences } from '../app/preferences';
export function DarkModeButton() {
  const { preferences, update } = usePreferences();
  return <button onClick={() => update({ ...preferences, dark: !preferences.dark })}>
    Toggle dark mode
  </button>;
}

Custom CSS

.my-panel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  padding-inline: 1.5rem;
}
.my-panel a { color: var(--accent); }

Use logical spacing properties and check contrast in both modes. A saved browser preference overrides changed defaults; reset appearance when testing defaults. Preferences are stored under adminbag:preferences.