Layouts and theme customizer
Page layouts
Every page belongs to one of three layouts (layout in src/app/pages.ts):
| Layout | Component | Use |
|---|---|---|
app | src/layouts/app-layout.ts | Application shell: sidebar, topbar, content, footer (the customizer and command palette live in src/app/app.html) |
auth | src/layouts/auth-layout.ts | Sign-in, sign-up and the other authentication screens; variant: 'basic', 'cover' or 'illustrated' |
blank | src/layouts/blank-layout.ts | Status pages (404, 500, maintenance, coming soon); unknown URLs show the 404 page |
The layouts stay rendered while you move between pages of the same layout: only the page content (the layout's
<router-outlet />) changes.
Shell layouts
The application shell has several arrangements. They are chosen in the customizer and saved in the browser, or fixed with a demo link (handy for a live preview):
| Setting | Values | Demo link |
|---|---|---|
| Layout | vertical, horizontal, two-column, detached | ?layout=horizontal |
| Sidebar | default, icon (collapsed to icons), hover (expands on hover) | ?sidebar=icon |
| Sidebar tone | light, dark, brand | ?sidebarTone=dark |
| Topbar tone | light, dark, brand | ?topbarTone=brand |
| Content width | fluid, boxed | ?width=boxed |
| Direction | auto (from the language), ltr, rtl | ?dir=rtl |
The pages under Layouts in the menu show each arrangement without changing your saved preference: their
entry in src/app/pages.ts sets attrs (for example { 'data-demo-layout': 'horizontal' }), applied to <html>
while the page is shown and removed when you leave it.
Theme customizer
The palette icon in the topbar opens the customizer. Every change applies instantly and is saved in the
browser (localStorage), so it survives a reload:
- Mode: light, dark or system (follows the operating system).
- Brand color: 8 presets (Indigo, Blue, Teal, Emerald, Violet, Rose, Amber, Graphite) or any custom color; the whole palette, the charts and the readable text colors are derived from it.
- Neutral tone: slate, zinc, stone, cool or warm grays.
- Radius: none, small, medium, large or full.
- Density: compact, comfortable or spacious.
- Elevation: flat, soft shadows or bordered surfaces.
- Typeface: system, humanist, geometric or serif stacks.
- Motion: full or reduced animations.
- Layout, sidebar, sidebar and topbar tones, content width and direction (see the table above).
To remove the customizer from production, delete <dialog oxCustomizer></dialog> from src/app/app.html (and
Customizer from the imports of src/app/app.ts) and the customizer button
(data-fd-modal-open="theme-customizer") from src/components/shell/topbar.html. Set your defaults as described
in Theming.
Command palette
Ctrl + K (⌘ + K on macOS) opens the command palette: it searches every
menu entry of src/app/menu.ts and offers quick actions (light mode, dark mode, switch the text direction, open the
customizer). New menu entries appear in it automatically, and choosing one navigates through the router without a
reload.