Layouts and theme customizer
Page layouts
Every page belongs to one of three Nuxt layouts (layout in the page's definePageMeta, also listed in src/config/pages.ts):
| Layout | Component | Use |
|---|---|---|
app | src/layouts/app.vue | Application shell: sidebar, topbar, content, footer (the customizer and command palette live in the client root, src/components/shell/AppRoot.vue) |
auth | src/layouts/auth.vue | Sign-in, sign-up and the other authentication screens; variant: 'basic', 'cover' or 'illustrated' |
blank | src/layouts/blank.vue | Status pages (404, 500, maintenance, coming soon) and the error page (src/error.vue): unknown URLs show the 404 page |
The layouts stay mounted while you move between pages of the same layout: only the page content (the layout's <slot />) 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
page data (definePageMeta) 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 <Customizer /> from src/components/shell/AppRoot.vue and the customizer button
(data-fd-modal-open="theme-customizer") from src/components/shell/Topbar.vue. 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/config/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 without a reload.