Appearance & Layouts

• The Page-Layout previews
• Layout Settings
• The Customizer
• Skins & colour designs
• Dark mode & OLED
• Presets & reset
• Tips

The Page-Layout previews

What they are: a set of 20 demonstration pages, each showing one shell option applied to a mock dashboard so you can see the effect before committing to it. When you open a preview it temporarily applies that layout; navigating away automatically reverts to your real settings, so nothing sticks unless you set it deliberately in the Customizer or Layout Settings.

Where to find them: Dashboard → Page Layouts, grouped into five subsections. Routes are under /page-layouts/*. Here's what each preview shows and what to try:

Sidebar Modes

• Default — the standard shell: a full sidebar on the left, header on top, content in the main column. The baseline everything else builds on.
• Minified — the sidebar collapses to a slim icon rail; hover it to reveal the full labels.
• Dual — a narrow rail of menu sections beside a secondary panel; click the section icons to switch the panel.
• Header Only — the sidebar is hidden entirely and all navigation moves into the top header.

Sidebar Theme (shown in light mode so the sidebar treatment stands out)

• Sidebar Light — a light sidebar matching a light page — clean and airy.
• Sidebar Dark — a dark sidebar on a light page — the popular high-contrast admin look.
• Sidebar True Black — a pure-black (OLED) sidebar for maximum contrast and battery savings on OLED screens.

Navigation

• Fixed Navbar — the header stays pinned to the top while content scrolls beneath it. Scroll down to see it.
• Auto-hide Navbar — the header hides when you scroll down and reappears when you scroll up.
• Sticky Page Header — the slim page title bar sticks just below the top navigation as you scroll.
• Primary Navigation — shows the primary links (Home, mega-menus) in the header. Toggle it on/off below.
• Accordion Menu — sidebar groups open one at a time (opening one closes the others). Toggle it below.
• Fixed Footer — the footer stays pinned to the bottom of the viewport instead of at the end of the page.

Widgets

• Chat Bubble — a floating chat launcher in the bottom-right corner that opens a messenger panel.
• Chat Rail — a slim rail of contacts on the right edge, with pop-out chat windows.
• Cursor Glow — an ambient glow that softly follows your mouse (desktop only). Move your cursor around.

Feedback & Motion (each has live controls — interact with them to feel the difference)

• Toast Position — choose where notifications appear; click a position to fire a demo toast there.
• Page Transitions — choose the animation played when moving between pages; navigate to feel it.
• Page Loader — choose the splash/loading style; click a style to replay the full-screen splash.
• Splash Frequency — choose how often the branded splash appears (once per session, or every load).

How to use them

1. Open any preview from the sidebar to see the option in action on sample content.
2. Some previews have live controls — pills or toggles (for example, pick a toast position, choose a page-transition style, or replay the loading splash). Interact with them to feel the difference.
3. When you find a look you like, make it permanent in Layout Settings or the Customizer.

Layout Settings

What it is: the full-page version of the Customizer — every shell option on one screen, with a live mini-preview of the app that updates as you change things.

Where to find it: Dashboard → Page Layouts → Layout Settings. Route: /layout-settings.

How to use it

1. Work through the tabs/sections (Appearance, Sidebar, Navigation, Widgets, Feedback & Motion).
2. Watch the shell preview morph as you toggle options.
3. Changes apply live and are saved to your browser automatically.

The Customizer

What it is: the same controls as Layout Settings, but as a slide-in panel you can open from any page.

Where to find it: the gear icon in the header.

How to use it: open it, flip switches, and see the app change instantly. It's the fastest way to try a tweak without leaving the page you're on. Full option list is in Getting around → The Customizer.

Some option groups are mutually exclusive — turning one on turns its siblings off:

• Sidebar mode: Minified, Dual, and Header-only are one-of.
• Widgets: Chat bubble and Chat rail are one-of.
• Auto-hide header and Sticky page header can't both be on.

Skins & colour designs

What they are: 13 complete visual designs. Eleven are colour skins that recolour everything; two are full designs (Bento Studio, Console) that also change the home dashboard and fonts.

Where to find them: the palette icon in the header, or the Appearance section of the Customizer / Layout Settings.

How to use it: click a skin — the whole app re-colours immediately, in both light and dark mode. Your choice is remembered per browser.

Dark mode & OLED

How to use it: switch theme from the header (sun/moon), the Customizer, or Layout Settings — Light, Dark, or System (follows your OS). Independently, you can make just the sidebar dark on a light theme, or turn on true-black (OLED) surfaces for the sidebar to save power on OLED screens. All three settings combine freely with any skin.

Presets & reset

• Presets — save your current configuration under a name and recall it later, from the Customizer or Layout Settings.
• Reset to defaults — restores every appearance and layout setting to the factory look and re-seeds the sample data. You're asked to confirm first, and it does not sign you out.

Tips

• Layout and appearance settings are stored in your browser and are personal to you.
• If the app looks unexpected, Reset to defaults is the quickest way back to a known-good state.
• Related: Getting around for the day-to-day controls; the developer docs on Design Skins and the Layout System for how it all works under the hood.