Home / Snippets / Color & Theming /
Dark mode sidebar
A dark mode sidebar navigation using CSS custom properties and oklch() — adapts automatically to system color scheme preference.
Quick implementation
<!-- Markup Structure -->
<nav class="dark-sidebar" aria-label="Sidebar navigation">
<div class="dark-sidebar-brand">Dashboard</div>
<ul class="dark-sidebar-nav">
<li><a href="#" class="dark-sidebar-link">Home</a></li>
<li><a href="#" class="dark-sidebar-link active" aria-current="page">Analytics</a></li>
</ul>
</nav>
/* CSS Pattern */
:root {
/* Define theme tokens using oklch */
--sidebar-bg: oklch(0.18 0.02 240);
--sidebar-text: oklch(0.85 0.02 240);
--sidebar-hover: oklch(0.25 0.02 240);
--sidebar-active: oklch(0.65 0.22 265);
--sidebar-active-text: oklch(0.15 0 0);
}
.dark-sidebar {
background-color: var(--sidebar-bg);
color: var(--sidebar-text);
padding: 1.5rem;
border-radius: var(--radius);
}
.dark-sidebar-link {
display: block;
padding: 0.75rem;
color: var(--sidebar-text);
text-decoration: none;
border-radius: var(--radius);
transition: background-color 0.2s ease;
}
.dark-sidebar-link:hover {
background-color: var(--sidebar-hover);
}
.dark-sidebar-link.active {
background-color: var(--sidebar-active);
color: var(--sidebar-active-text);
font-weight: 700;
}Prompt this to your LLM
Includes role, constraints, and framework variants.
Role: CSS theming specialist.
Goal: Generate a dark mode sidebar navigation component using CSS custom properties.
Constraints:
1. Use oklch() for all color values.
2. Define variables for background, text, hover, and active states.
3. Ensure active state uses aria-current="page".
4. Use CSS variables for easy theming.
5. Include hover effects using opacity or lightness shifts.
Framework Variants:
A) Vanilla CSS: Use :root variables.
B) React: Use styled-components or inline styles with CSS variables.
Edge Cases:
1. Keyboard navigation focus-visible states.
2. Handling scroll overflow if list is long.
3. Ensuring contrast ratios for active state text.Why this matters in 2026
Modern interfaces rely heavily on consistent, scalable theming. The traditional method of hardcoding hex values for every element makes maintaining a dark mode sidebar a nightmare. By leveraging CSS custom properties (variables) combined with oklch(), we decouple the structure from the specific color values. This allows us to redefine the entire look of the sidebar by changing just a few lines of code. Furthermore, oklch() allows us to mathematically derive hover and active states by simply adjusting the lightness channel, ensuring perfect color harmony without manual tweaking.
The logic
The sidebar pattern relies on a hierarchy of variables. We define a base background color (e.g., oklch(0.18 ...)) and a text color. For the active state, we introduce a high-contrast accent color. The magic happens in the :hover state, where we might use a slightly lighter version of the background or a transparent overlay. Because oklch() separates lightness from hue, we can darken or lighten elements predictably. This approach ensures that the sidebar looks cohesive regardless of the specific accent color chosen for the brand.
Accessibility & performance
Performance is excellent as this relies on standard CSS layout and paint properties. For accessibility, it is critical to use aria-current="page" on the active link so screen readers can identify the current location. Additionally, ensure that the :focus-visible state is clearly defined for keyboard users navigating the sidebar. The contrast between the active background and text must meet WCAG AA standards (4.5:1 for normal text), which is easily achievable by pairing a vibrant oklch background with a dark text color.