Home / Snippets / Color & Theming /

Dark mode card

A compact article tile: left rail “cover” gradient, title, meta line, one-line excerpt, and small category pills — all on var(--card).

Scaling OKLCH across themes

Guides · 6 min read

Keep chroma predictable when users flip light/dark — without hand-tuning every stop.

Color Tokens

Widely Supported

colorno-js

Quick implementation

.dark-mode-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}
.dm-article-card {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
}
.dm-article-card__thumb {
  background: linear-gradient(145deg, oklch(0.35 0.08 265), oklch(0.22 0.06 280));
}
.dm-article-card__tag {
  font-size: 0.68rem;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: oklch(0.28 0.04 265);
  border: 1px solid oklch(0.42 0.06 265 / 0.45);
}

Prompt this to your LLM

Constraints for layout, tokens, and content density.

You are implementing a dark-theme article card for a blog or docs index.

Goal: One media column + text column, with a meta line, short excerpt, and 1–3 category tags.

Technical constraints:
- Shell uses var(--card), var(--card-border), var(--radius-lg); thumb uses oklch() gradient only (no bitmap image in the snippet).
- Tags are small pills with uppercase micro-labels; ensure contrast on oklch backgrounds.
- Stack to single column under ~32rem width.

Return semantic HTML + CSS.

Why this matters in 2026

Dark feeds and dashboards reuse the same card dozens of times. A clear thumb + hierarchy + tags keeps scanning fast without noisy borders.

The logic

The shell stays neutral (var(--card)) so the gradient thumb carries color. Tags sit one step darker than the body text so they read as metadata, not buttons.

Accessibility & performance

Use article with a real heading; the thumb is decorative role="img" with an aria-label. No images or JS — paint stays cheap.