Make the Magento admin yours
Nebula ships eighteen skins and a token system that lets you restyle the entire admin — colors, density, radius, shadows, sidebar width and dark mode — from a single JSON file, with accessibility presets built in.
15 Skin Presets
Nebula includes ready-made skins, dark mode, and accessibility themes so every Magento team can work in a UI that feels current.
Create your own brand skin with a simple JSON file. Drop it in view/adminhtml/nebula/skin/ in any module and ship a distinct admin look without rebuilding the theme.
Create a Branded Admin Theme in Minutes
Drop a JSON skin file into any module and give Magento Admin a look that fits your brand.
{
"id": "my-brand",
"label": "My Brand",
"colors": {
"--color-nebula-500": "#e11d48",
"--color-nebula-600": "#be123c"
},
"density": {
"--nebula-font-size-base": "0.875rem",
"--nebula-spacing-md": "0.75rem",
"--nebula-radius-lg": "0.5rem"
},
"dark": {
"--color-nebula-500": "#fb7185"
}
}Colors, spacing, fonts, density, radius, shadows, sidebar width, and dark mode can all be tuned without rebuilding the admin theme.
Brand Magento Admin in Minutes
Nebula includes ready-made skins, dark mode, and accessibility themes, and lets you create your own look without rebuilding the admin from scratch.
Edit your brand skin
Change colors, spacing, or density in a simple JSON file
"--color-nebula-500": "#e11d48"Preview changes fast
Iterate quickly while your development workflow updates the preview
$ npm run dev
[watch] Rebuilding...
[watch] Done in 187msSwitch the look instantly
Skin variables apply without rebuilding the whole admin
/* Runtime: SkinLoader generates inline CSS */
:root {
--color-nebula-500: #e11d48;
}
.dark {
--color-nebula-500: #fb7185;
}Live brand preview
Switch between presets or create a skin that matches your brand and your team's workflow.
Build a theme
Author your own skin
A Nebula skin is a single JSON file of CSS-variable overrides. Drop in your brand colors — light and dark — and the whole admin re-themes itself. No build step, no LESS, no recompile.
Today, skins live inside the Qoliber_NebulaSkin module. We're adding a di.xml registration so any module can contribute a theme in a clean, supported way — shipping soon. Until then, the format and placement below are exactly what powers the built-in skins.
{
"id": "acme-brand",
"label": "Acme Brand",
"colors": {
"--color-nebula-500": "#e11d48",
"--color-nebula-600": "#be123c",
"--color-nebula-700": "#9f1239"
},
"custom": {
"--nebula-button-primary-bg": "#be123c",
"--nebula-sidebar-from": "#1f0a12",
"--nebula-sidebar-to": "#4c0519",
"--nebula-page-bg": "#fafafa"
},
"dark": {
"--color-nebula-500": "#fb7185",
"--nebula-page-bg": "#1a0a10"
}
}Where it goes
app/code/<Vendor>/<Module>/
view/adminhtml/nebula/skin/<id>.jsonNebula scans this path and loads every skin it finds, keyed by its id.
Activate it
Pick it from the in-admin skin switcher, or set the store config nebula/theme/skin to your id. The default is indigo.
What a skin controls
- colors — The --color-nebula-50…950 brand palette.
- custom — Any --nebula-* variable — sidebar, backgrounds, text, borders, buttons, charts, status colors.
- dark — Overrides applied only in dark mode.
- density — Spacing, font sizes, radius and sidebar widths.
- shadows — Elevation / shadow overrides.
- transitions — Animation-speed overrides.
- accessibility — Status colors tuned for color-blind users.
Screenshot coming soon
The skin switcher in the admin
Screenshot coming soon
A branded admin in action