---
title: Appearance & Layout
description: Personalize how the app looks and lays out for you — light or dark mode, color theme presets, sidebar style, content width, and navbar behavior — with your choices remembered across sessions.
navigation:
  icon: i-lucide-palette
---

# Appearance & Layout

**Appearance & Layout** lets you tailor how DIBFI looks and behaves for you. You can switch between **light and dark mode**, pick a **color theme preset**, and adjust the **layout** — how the sidebar looks, how wide the content sits, and how the top navbar behaves when you scroll.

These are **personal preferences**. They apply only to your own view, don't change anything for your teammates, and are remembered so the app opens the way you left it next time you sign in.

::note
Open the settings from the **gear icon** in the dashboard header. Everyone can personalize their own appearance — there are no permissions to manage and nothing you set here affects your organization's compliance data.
::

---

## Key concepts

### Mode

Choose whether the app renders in a light or dark color scheme.

| Mode | Best for |
| --- | --- |
| :badge[Light]{color="warning"} | Bright environments and high-contrast reading |
| :badge[Dark]{color="neutral"} | Low-light settings and reduced glare |

### Theme presets

A preset is a coordinated **color theme** for the whole app. Each works in both light and dark mode.

| Preset | Feel |
| --- | --- |
| **Default** | The standard DIBFI palette |
| **Brutalist** | High-contrast, bold |
| **Soft Pop** | Bright, playful accents |
| **Tangerine** | Warm, orange-forward |

::tip
The dot next to each preset name previews its accent color in your current mode, so you can see the palette before you commit.
::

### Layout options

Fine-tune the frame the app sits in. Each option is independent — mix them however you prefer.

| Option | Choices | What it does |
| --- | --- | --- |
| **Sidebar variant** | Inset · Sidebar · Floating | The visual style of the left navigation |
| **Sidebar collapsible** | Icon · Off-canvas | Whether a collapsed sidebar shrinks to icons or slides away entirely |
| **Navbar style** | Sticky · Scroll | Whether the top bar stays pinned or scrolls away with the page |

---

## Using appearance settings

::steps{level="4"}

#### Open the settings

Click the **gear icon** in the dashboard header to open the appearance and layout panel.

#### Set mode and preset

Toggle between **Light** and **Dark**, then choose a **theme preset**. The whole app re-colors instantly.

#### Adjust the layout

Pick your **sidebar variant**, **collapsible** behavior, and **navbar style**. Each change applies right away so you can see the effect.

#### You're done

There's nothing to save — your choices are remembered automatically and restored the next time you open the app.

::

::note
Your preferences follow your account, so the app looks the same however you sign in. Because they're personal, changing them never alters what anyone else on your team sees.
::

---

## Permissions

Appearance and layout are **personal settings** available to every user, regardless of role. There is no permission to grant and no admin control — each person manages their own view, and nothing here touches organization data, billing, or compliance records.

---

## How it works

A little more detail on the behavior — not the internals.

### Personal, not organizational

Everything under Appearance & Layout is scoped to **you**. Your mode, preset, sidebar, and navbar choices are yours alone; teammates in the same organization keep their own. None of these settings change compliance content, scores, or reports — they only affect presentation.

### Remembered across sessions

Your selections persist between visits, so the app reopens exactly the way you left it. If you've never set a preference, the app falls back to a sensible default (light mode, the Default preset, and standard layout).

### Applies instantly

Changes take effect the moment you make them — there's no save step and no page reload. Switch a mode or preset and the interface re-colors in place; adjust a layout option and the frame updates immediately.

---

## Related features

:::card-group

::card{title="Organization Settings" icon="i-lucide-building-2" to="https://app.dibfi.com/dashboard/org-settings"}
Manage organization-wide configuration and integrations.
::

::card{title="White-Label Branding" icon="i-lucide-swatch-book" to="https://app.dibfi.com/dashboard/msp/white-label"}
For MSP partners: replace DIBFI branding with your own logo and company name.
::

::card{title="User Management" icon="i-lucide-users" to="https://app.dibfi.com/dashboard/users"}
Invite teammates and manage roles for your organization.
::

:::