Home / Snippets / Color & Theming /

Dark mode footer

Mini site footer: brand column plus two link groups, then a thin legal row — tuned so links stay bright on a recessed surface.

Widely Supported

colorno-js

Quick implementation

.dark-mode-card {
  background: linear-gradient(180deg, oklch(0.2 0.03 265), oklch(0.17 0.03 265));
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
}
.dm-footer__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem 1.25rem;
}
.dm-footer__links a:hover {
  border-bottom-color: oklch(0.5 0.08 250 / 0.5);
}

Prompt this to your LLM

Structure, contrast, and responsive columns.

You are building a global footer for a dark-themed marketing site.

Goal: Brand blurb + two link columns + bottom legal/meta row.

Technical constraints:
- Use semantic footer; links are real anchor tags with visible hover (underline or border-bottom).
- Background should read slightly deeper than page chrome — oklch gradient or solid token.
- Collapse to two columns of links on very narrow widths; avoid orphaned single link columns.

Return HTML + CSS.

Why this matters in 2026

Footers anchor trust signals (legal, contact, status). On dark sites, washed-out link colors are a common failure — this pattern keeps hierarchy obvious.

The logic

Section labels use uppercase micro-type so they scan as structure, not content. The meta row’s top border separates “navigation” from “fine print” without a heavy box.

Accessibility & performance

Native links preserve context menu and routing. Focus styles inherit from global CSS; add :focus-visible if your base stylesheet is minimal.