Dark mode nav

Pill-style tabs for in-app sections: aria-current="page" on the active slot, soft hover on the rest.

Widely Supported

colorno-js

Quick implementation

.dmn-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; list-style: none; }
.dmn-nav a {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  color: oklch(0.78 0.04 265);
}
.dmn-nav a[aria-current="page"] {
  background: oklch(0.36 0.08 265);
  border: 1px solid oklch(0.5 0.1 265 / 0.45);
}

Prompt this to your LLM

Routing and active state.

You are styling a secondary horizontal nav inside a dark dashboard.

Goal: List of links with one active pill using aria-current="page".

Technical constraints:
- Use ul/li + nav with aria-label; keyboard focus needs visible :focus-visible rings.
- Active state must not rely on color alone — include border or weight change.

Return HTML + CSS.

Why this matters in 2026

Sub-views inside settings panels need a lighter pattern than full top-nav — pills keep scan paths short.

The logic

Rounded links share one radius scale with buttons elsewhere so the UI feels one system.

Accessibility & performance

aria-current is the right semantic for “this page”; screen readers announce it.