Sidebar Dark
Sidebar Dark Layout — Dark sidebar
locked regardless of page theme
What is the Sidebar Dark layout?
The sidebar always renders with a dark deep-navy surface
(#1e2235), even when the page is in light mode. This
creates a dramatic two-tone effect: dark navigation panel paired
with a bright content area. A popular pattern in modern SaaS tools
like Linear, Vercel, and Notion.
Modifier:
data-sidebar-theme="dark"
on <html>
Active link:
rgba(91,91,247,.25)
background, #a5a8ff text
Content area: Respects
data-theme toggle normally
Compatible with: All other layout
variants (boxed, fluid, compact)
$284K
Total Revenue
1,842
Customers
5,219
Orders
3.42%
Conversion
All Layout Variants
Browse the full layout collection to compare navigation styles and content widths.