Theme & Layout
CSS variables, custom color tokens, and layout modes.
1. Global CSS Custom Properties
NahaAdmin uses CSS Custom Properties defined in
assets/styles/naha-admin.css for global theming. Changing these tokens
instantly updates components across all pages:
| Variable | Default Value | Description |
|---|---|---|
--nd-primary |
#006fee | Main brand color for primary buttons, active links, and focus rings |
--nd-body-bg |
#f4f5f7 | Global dashboard background color |
--nd-card-bg |
#ffffff | Card, sidebar, and container background color |
--nd-border |
#e4e4e7 | Border color for dividers, tables, and card outlines |
--nd-text |
#11181c | Base primary heading and typography color |
2. Layout Modes & Classes (Apply to
<body>)
Fixed Navbar
(nd-nav-fixed)
Pins top navigation bar to the top of the viewport during scrolling with smooth shadow separation.
Mini Sidebar
(nd-sidenav-toggled)
Collapses the sidebar to an icon-only rail (70px) that automatically expands on hover without shifting page content.
3. Sidebar State Persistence
When toggled via the hamburger button in the navbar, the
sidebar state is automatically saved into localStorage under
nd|sidebar-toggle to preserve the user's preferred layout on refresh.