Branding and dark mode

Login screen

Stores › Configuration › Nebula › Nebula Admin Theme › Login Screen has four fields: a logo upload, and a title, subtitle and tagline shown beside the sign-in panel. All four are optional and empty by default.

Field	Path
Logo	nebula/login/logo
Title	nebula/login/title
Subtitle	nebula/login/subtitle
Tagline	nebula/login/tagline

The four fields feed a branding panel that sits beside the sign-in form on a wide screen. Below 1024 pixels the split layout collapses to a single column and layout/login.css hides the whole panel, with its logo, title, subtitle and tagline. Login branding is therefore invisible on a phone or in a narrow window, where only the sign-in form shows.

How the panel is coloured

The panel is painted straight from the skin's brand ramp rather than from the semantic tokens. Its background gradient is from-nebula-950 via-nebula-900 to-nebula-800, the subtitle and the faint background grid are text-nebula-300, the tagline is text-nebula-400, and the title is plain white. The --nebula-sidebar-* and surface tokens a skin sets never reach it.

The template carries no dark: utilities either, so the panel follows dark mode only as far as the skin's dark section restates those same ramp steps. Most shipped skins restate steps 50 to 900 and leave 950 alone, so in dark mode the top of the gradient keeps its light-mode value. Only indigo and matrix restate step 950.

Check the sign-in page after changing a ramp

A ramp whose 950, 900 and 800 end is pale or neutral leaves a white title on a light panel. A ramp whose 300 and 400 are dark leaves the subtitle and tagline unreadable. A skin that sets its own --nebula-sidebar-* values hides both problems on the sidebar, so look at the sign-in page itself and not only at the dashboard. What each ramp step is responsible for is listed in the Token reference.

Admin branding

Stores › Configuration › Nebula › Nebula Admin Theme › Admin Branding has a sidebar logo, a wordmark, and a favicon.

Field	Path	Where it shows
Sidebar Logo	nebula/admin/logo	The top of the sidebar, and the collapsed sidebar
Wordmark	nebula/admin/wordmark	Text beside the logo
Favicon	nebula/admin/favicon	The browser tab, replacing Magento's

Uploads

The three upload fields write where the pages read: pub/media/nebula/login/<scope>/ for the login logo, pub/media/nebula/admin/<scope>/ for the sidebar logo and the favicon. Accepted: jpg, jpeg, gif, png, webp and svg, plus ico and apng for the favicon. The full field tables are in the Configuration reference. (Until 2026-09-13 the fields wrote under pub/media/logo/ and needed a copy step; they do not any more.)

Menu position

Stores › Configuration › Nebula › Nebula Admin Theme › Settings › Menu Position chooses between the sidebar and a top bar. Configuration Menu Position chooses where the configuration section navigation sits on the configuration pages. Both are described in the Configuration reference.

Dark mode

Each administrator chooses dark mode from the toggle in the top bar. The choice is stored in the browser under localStorage['nebula_dark']. With nothing stored, the operating system preference applies through prefers-color-scheme. A script in the document head applies the dark class before the first paint so pages do not flash.

There is no server-side setting for dark mode. A skin decides what dark mode looks like through its dark section; see Create your own skin. The login branding panel is the exception, because it reads ramp steps directly and has no dark variant of its own.

Your own stylesheet

A module can add its own CSS from layout XML. Read tokens, not literal colours, and the stylesheet follows the skin and dark mode with no extra work:

.vendor-panel {
    background: var(--nebula-bg-secondary);
    color: var(--nebula-text-primary);
    border: 1px solid var(--nebula-border-default);
    border-radius: var(--nebula-radius-md);
}

How to load it is on CSS and JavaScript in your module.