Layouts and theme customizer

Page layouts

Every page chooses one of three Razor layouts (Pages/Shared/):

Layout	Use	ViewData
`_Layout` (default, `_ViewStart.cshtml`)	Application shell: sidebar, topbar, content, footer, customizer, command palette	`Title` (translation key), `Nav` (navigation id), `Module` (page script, optional), `HtmlAttrs` (layout demos)
`_AuthLayout`	Sign-in, sign-up and the other authentication screens	`AuthVariant` = `"basic"`, `"cover"` or `"illustrated"`, `Title`, `Nav`
`_BlankLayout`	Status pages (404, 500, maintenance, coming soon)	`Title`, `Nav`

@page
@{
    Layout = "_AuthLayout";
    ViewData["Title"] = "auth.sign_in.title";
    ViewData["Nav"] = "auth-cover-sign-in";
    ViewData["AuthVariant"] = "cover";
}
<ox-partial name="auth/sign-in" arg-variant="cover" />

The shell pieces are view components (ViewComponents/ShellViewComponents.cs) whose views live in Pages/Shared/Components/<Name>/Default.cshtml: <vc:sidebar />, <vc:topbar />, <vc:footer />, <vc:customizer /> and <vc:command-palette />. The page header is the <ox-page-header> tag helper (Pages/Shared/Shell/_PageHeader.cshtml).

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 (they set ViewData["HtmlAttrs"], for example data-demo-layout="horizontal").

Horizontal layout

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).

Theme customizer

To remove the customizer from production, delete <vc:customizer /> from Pages/Shared/_Layout.cshtml and the customizer button from Pages/Shared/Components/Topbar/Default.cshtml. Set your defaults as described in Theming.

Command palette

Ctrl + K (⌘ + K on macOS) opens the command palette: it searches every menu entry of menu.json (read from the rendered sidebar) and offers quick actions (light mode, dark mode, switch the text direction, open the customizer). New menu entries appear in it automatically.