12 CSS Dark Mode UI Patterns

A CSS dark-mode UI pattern is a surface, control, or layout designed for dark-first interfaces — true-black for OLED, layered slate, single-accent, or emissive-glow themes. These 12 hand-coded examples are copy-paste ready and use semantic HTML with WCAG-compliant colour contrast.

12 unique patterns 12 Pure CSS WCAG-friendly Mobile-first MIT licensed Updated May 3, 2026

01 / 12

OLED Card

Pure CSS

NEW

Battery saver

Pure-black surfaces save up to 60% on OLED screens.

True-black background that switches off OLED pixels entirely — paired with a single accent stroke for the active element.

Try it

.dm-oled-bg { padding: 28px; border-radius: 16px; background: #000; }
.dm-oled {
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 18px 20px;
  color: #ededed;
}
.dm-oled__tag {
  display: inline-block;
  background: transparent;
  color: #4ade80;
  border: 1px solid #4ade80;
  padding: 2px 8px; border-radius: 4px;
  font: 700 9px ui-monospace, monospace;
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}
.dm-oled__title { margin: 0 0 6px; font: 700 16px/1.2 system-ui, sans-serif; color: #fff; }
.dm-oled__body  { margin: 0 0 14px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-oled__btn {
  background: none; border: none;
  color: #4ade80; padding: 0;
  font: 600 12px system-ui, sans-serif; cursor: pointer;
  transition: color 0.2s;
}
.dm-oled__btn:hover { color: #86efac; }

<div class="dm-oled-bg">
  <article class="dm-oled">
    <span class="dm-oled__tag">NEW</span>
    <h3 class="dm-oled__title">Battery saver</h3>
    <p class="dm-oled__body">Pure-black surfaces save up to 60% on OLED screens.</p>
    <button class="dm-oled__btn">Learn more →</button>
  </article>
</div>

02 / 12

Stealth Panel

Pure CSS

Status OPERATIONAL

Latency 42 ms

Region us-east-1

Surfaces hide behind a near-black background — only the active control reveals itself with a hairline stroke.

Try it

.dm-stealth-bg { padding: 28px; border-radius: 16px; background: #050505; }
.dm-stealth {
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 8px;
}
.dm-stealth__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background 0.15s;
}
.dm-stealth__row:hover {
  background: rgba(255, 255, 255, 0.03);
}
.dm-stealth__row + .dm-stealth__row { border-top: 1px solid rgba(255, 255, 255, 0.04); }
.dm-stealth__lbl {
  font: 500 11px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.dm-stealth__val {
  font: 600 12px ui-monospace, monospace;
  color: rgba(255, 255, 255, 0.85);
}
.dm-stealth__val--ok { color: #4ade80; }

<div class="dm-stealth-bg">
  <div class="dm-stealth">
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Status</span>
      <span class="dm-stealth__val dm-stealth__val--ok">OPERATIONAL</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Latency</span>
      <span class="dm-stealth__val">42 ms</span>
    </div>
    <div class="dm-stealth__row">
      <span class="dm-stealth__lbl">Region</span>
      <span class="dm-stealth__val">us-east-1</span>
    </div>
  </div>
</div>

03 / 12

Inkwell Modal

Pure CSS

Save your work?

Unsaved changes will be lost when you close.

Deep-black dialog with a single warm-amber rim — the kind of confirmation modal that whispers instead of shouting.

Try it

.dm-ink-bg { padding: 28px; border-radius: 16px; background: #0a0905; }
.dm-ink {
  background: #000;
  border: 1px solid #d4a017;
  border-radius: 12px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 0 0 1px rgba(212, 160, 23, 0.25), 0 8px 32px rgba(212, 160, 23, 0.1);
}
.dm-ink__icon {
  width: 36px; height: 36px;
  margin: 0 auto 12px;
  border: 1.5px solid #d4a017;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 800 18px ui-serif, Georgia;
  color: #d4a017;
}
.dm-ink__title { margin: 0 0 6px; font: 700 14px system-ui, sans-serif; color: #fff; }
.dm-ink__body  { margin: 0 0 16px; font: 12px/1.55 system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); }
.dm-ink__row { display: flex; gap: 8px; justify-content: center; }
.dm-ink__btn {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 16px; border-radius: 7px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
  transition: all 0.18s;
}
.dm-ink__btn:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.dm-ink__btn--primary {
  background: #d4a017; color: #000; border-color: #d4a017;
}
.dm-ink__btn--primary:hover { background: #f5b818; border-color: #f5b818; }

<div class="dm-ink-bg">
  <div class="dm-ink">
    <div class="dm-ink__icon">!</div>
    <h3 class="dm-ink__title">Save your work?</h3>
    <p class="dm-ink__body">Unsaved changes will be lost when you close.</p>
    <div class="dm-ink__row">
      <button class="dm-ink__btn">Discard</button>
      <button class="dm-ink__btn dm-ink__btn--primary">Save</button>
    </div>
  </div>
</div>

04 / 12

Cyber Terminal

Pure CSS

node-01.codefronts.io

$ deploy --env=prod

→ Build complete in 8.42s

→ 158 pages · 0 errors

$ █

Phosphor-green CRT terminal aesthetic — text and chrome share one accent color, suggesting a coherent technical voice.

Try it

.dm-cyber-bg { padding: 22px; border-radius: 16px; background: #020a05; }
.dm-cyber {
  background: #020a05;
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-radius: 8px;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  color: #4ade80;
  overflow: hidden;
}
.dm-cyber__head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(74, 222, 128, 0.06);
  border-bottom: 1px solid rgba(74, 222, 128, 0.15);
  font-size: 11px;
  color: rgba(74, 222, 128, 0.7);
}
.dm-cyber__dot {
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
}
.dm-cyber__body { padding: 12px 14px; font-size: 11.5px; line-height: 1.7; }
.dm-cyber__line { color: rgba(74, 222, 128, 0.85); }
.dm-cyber__prompt { color: #86efac; font-weight: 700; margin-right: 4px; }
.dm-cyber__cur { animation: dm-cyber-blink 0.8s steps(2) infinite; }
@keyframes dm-cyber-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dm-cyber__cur { animation: none; } }

<div class="dm-cyber-bg">
  <div class="dm-cyber">
    <div class="dm-cyber__head">
      <span class="dm-cyber__dot"></span>
      <span>node-01.codefronts.io</span>
    </div>
    <div class="dm-cyber__body">
      <div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> deploy --env=prod</div>
      <div class="dm-cyber__line">→ Build complete in 8.42s</div>
      <div class="dm-cyber__line">→ 158 pages · 0 errors</div>
      <div class="dm-cyber__line"><span class="dm-cyber__prompt">$</span> <span class="dm-cyber__cur">█</span></div>
    </div>
  </div>
</div>

05 / 12

Mocha Workstation

Pure CSS

FEATURED · 4 MIN READ

The art of restraint

In the long view, less surface area means fewer maintenance burdens. Choose carefully what you build.

M Marcus Rivera

Warm coffee-tone dark mode — espresso brown surfaces with cream highlights for a cozy reading-app aesthetic.

Try it

.dm-mocha-bg { padding: 28px; border-radius: 16px; background: #1c1410; }
.dm-mocha {
  background: #2a1f18;
  border: 1px solid #3d2c20;
  border-radius: 10px;
  padding: 18px 22px;
  color: #f5e6d3;
}
.dm-mocha__meta {
  font: 700 10px ui-monospace, monospace;
  color: #c9a961;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.dm-mocha__title { margin: 0 0 8px; font: 700 16px/1.3 ui-serif, Georgia; color: #fff8ed; }
.dm-mocha__body  { margin: 0 0 14px; font: 12.5px/1.65 ui-serif, Georgia; color: #d6c4ab; font-style: italic; }
.dm-mocha__author {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px system-ui, sans-serif;
  color: #c9a961;
  padding-top: 12px;
  border-top: 1px solid #3d2c20;
}
.dm-mocha__avatar {
  width: 22px; height: 22px;
  background: #c9a961;
  color: #1c1410;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 11px system-ui, sans-serif;
}

<div class="dm-mocha-bg">
  <article class="dm-mocha">
    <div class="dm-mocha__meta">FEATURED · 4 MIN READ</div>
    <h3 class="dm-mocha__title">The art of restraint</h3>
    <p class="dm-mocha__body">In the long view, less surface area means fewer maintenance burdens. Choose carefully what you build.</p>
    <div class="dm-mocha__author">
      <span class="dm-mocha__avatar">M</span>
      <span>Marcus Rivera</span>
    </div>
  </article>
</div>

06 / 12

Forest Dim

Pure CSS

◉

Garden updates 3 plants ready to harvest

◐

Soil moisture Below threshold — water soon

Deep evergreen surfaces with sage accents — a calmer alternative to violet/cyan dark modes for reading-heavy interfaces.

Try it

.dm-forest-bg { padding: 24px; border-radius: 16px; background: #0a1612; }
.dm-forest {
  background: #0e1f1a;
  border: 1px solid #1a3329;
  border-radius: 10px;
  padding: 6px;
}
.dm-forest__row {
  display: flex; gap: 12px; align-items: center;
  padding: 12px 14px;
  border-radius: 7px;
  transition: background 0.18s;
}
.dm-forest__row:hover { background: rgba(143, 179, 163, 0.07); }
.dm-forest__row + .dm-forest__row { border-top: 1px solid #1a3329; margin-top: 4px; padding-top: 16px; }
.dm-forest__icon {
  width: 28px; height: 28px;
  background: rgba(143, 179, 163, 0.12);
  color: #8fb3a3;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}
.dm-forest__body { display: flex; flex-direction: column; gap: 2px; }
.dm-forest__body b    { font: 600 12px system-ui, sans-serif; color: #d6e6dd; }
.dm-forest__body span { font: 11px system-ui, sans-serif; color: #8fb3a3; }

<div class="dm-forest-bg">
  <div class="dm-forest">
    <div class="dm-forest__row">
      <span class="dm-forest__icon">◉</span>
      <div class="dm-forest__body">
        <b>Garden updates</b>
        <span>3 plants ready to harvest</span>
      </div>
    </div>
    <div class="dm-forest__row">
      <span class="dm-forest__icon">◐</span>
      <div class="dm-forest__body">
        <b>Soil moisture</b>
        <span>Below threshold — water soon</span>
      </div>
    </div>
  </div>
</div>

07 / 12

Slate Stack

Pure CSS

Quarterly revenue Q1 2026

$248,392

+18.4% from last quarter

Three slate tones layered to create depth without color — useful for dashboard chrome where data is the only color.

Try it

.dm-slate-bg { padding: 24px; border-radius: 16px; background: #0f172a; }
.dm-slate {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 18px 20px;
  color: #f1f5f9;
}
.dm-slate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.dm-slate__title {
  font: 600 12px system-ui, sans-serif;
  color: #94a3b8;
  letter-spacing: 0.04em;
}
.dm-slate__pill {
  background: #334155;
  color: #cbd5e1;
  padding: 3px 10px; border-radius: 12px;
  font: 600 10px ui-monospace, monospace;
}
.dm-slate__num {
  font: 800 26px/1 system-ui, sans-serif;
  color: #fff;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}
.dm-slate__delta {
  font: 600 11px system-ui, sans-serif;
  color: #4ade80;
}

<div class="dm-slate-bg">
  <div class="dm-slate">
    <div class="dm-slate__head">
      <span class="dm-slate__title">Quarterly revenue</span>
      <span class="dm-slate__pill">Q1 2026</span>
    </div>
    <div class="dm-slate__num">$248,392</div>
    <div class="dm-slate__delta">+18.4% from last quarter</div>
  </div>
</div>

08 / 12

Carbon Shelves

Pure CSS

api/auth.ts 2.4 KB · 3 min ago

api/session.ts 1.8 KB · 7 min ago

api/users.ts 4.1 KB · 14 min ago

db/schema.sql 12.3 KB · 1 hour ago

List rows shelving against a darker rail — alternating row depth without alternating colors keeps long lists scannable.

Try it

.dm-carbon-bg { padding: 22px; border-radius: 16px; background: #0a0a10; }
.dm-carbon {
  background: #14141c;
  border: 1px solid #1f1f2e;
  border-radius: 8px;
  overflow: hidden;
}
.dm-carbon__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px;
  background: #14141c;
  transition: background 0.15s;
}
.dm-carbon__row + .dm-carbon__row { border-top: 1px solid #1f1f2e; }
.dm-carbon__row:nth-child(even) { background: #181822; }
.dm-carbon__row:hover { background: #1f1f2e; }
.dm-carbon__name {
  font: 600 12px ui-monospace, monospace;
  color: #e2e8f0;
}
.dm-carbon__meta {
  font: 500 10.5px ui-monospace, monospace;
  color: #6b7080;
  letter-spacing: 0.02em;
}

<div class="dm-carbon-bg">
  <div class="dm-carbon">
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/auth.ts</span>
      <span class="dm-carbon__meta">2.4 KB · 3 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/session.ts</span>
      <span class="dm-carbon__meta">1.8 KB · 7 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">api/users.ts</span>
      <span class="dm-carbon__meta">4.1 KB · 14 min ago</span>
    </div>
    <div class="dm-carbon__row">
      <span class="dm-carbon__name">db/schema.sql</span>
      <span class="dm-carbon__meta">12.3 KB · 1 hour ago</span>
    </div>
  </div>
</div>

09 / 12

Onyx Ladder

Pure CSS

Account created10:42 AM
Email verified10:44 AM
Profile setupIn progress
Workspace readyPending

Vertical step indicator on a series of dark surfaces — each completed step glows gently, future steps stay quiet.

Try it

.dm-onyx-bg { padding: 24px; border-radius: 16px; background: #0a0a14; }
.dm-onyx {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  overflow: hidden;
}
.dm-onyx__step {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-left: 2px solid transparent;
}
.dm-onyx__step + .dm-onyx__step { border-top: 1px solid #1f1f30; }
.dm-onyx__step b     { display: block; font: 600 12px system-ui, sans-serif; color: #cbd5e1; }
.dm-onyx__step small { font: 500 10px ui-monospace, monospace; color: #6b7080; }
.dm-onyx__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2a2a3d;
  flex-shrink: 0;
}
.dm-onyx__step--done .dm-onyx__dot { background: #6366f1; }
.dm-onyx__step--done b { color: #fff; }
.dm-onyx__step--active {
  background: rgba(99, 102, 241, 0.06);
  border-left-color: #6366f1;
}
.dm-onyx__step--active .dm-onyx__dot {
  background: #818cf8;
  box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.15);
}
.dm-onyx__step--active b { color: #c7d2fe; }

<div class="dm-onyx-bg">
  <ol class="dm-onyx">
    <li class="dm-onyx__step dm-onyx__step--done">
      <span class="dm-onyx__dot"></span>
      <div><b>Account created</b><small>10:42 AM</small></div>
    </li>
    <li class="dm-onyx__step dm-onyx__step--done">
      <span class="dm-onyx__dot"></span>
      <div><b>Email verified</b><small>10:44 AM</small></div>
    </li>
    <li class="dm-onyx__step dm-onyx__step--active">
      <span class="dm-onyx__dot"></span>
      <div><b>Profile setup</b><small>In progress</small></div>
    </li>
    <li class="dm-onyx__step">
      <span class="dm-onyx__dot"></span>
      <div><b>Workspace ready</b><small>Pending</small></div>
    </li>
  </ol>
</div>

10 / 12

Phosphor Card

Pure CSS

● LIVE 2,341 watching

React Server Components Deep Dive

A walk through the boundaries between server and client.

Card with a glowing accent line on its left edge — the kind of "now playing" highlight that draws the eye in dark dashboards.

Try it

.dm-phos-bg { padding: 28px; border-radius: 16px; background: #0a0a14; }
.dm-phos {
  position: relative;
  background: #14141f;
  border: 1px solid #1f1f30;
  border-radius: 10px;
  padding: 16px 20px 16px 22px;
  overflow: hidden;
}
.dm-phos::before {
  content: '';
  position: absolute; left: 0; top: 12px; bottom: 12px;
  width: 3px;
  background: #ec4899;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 14px #ec4899, 0 0 32px rgba(236, 72, 153, 0.4);
}
.dm-phos__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.dm-phos__live {
  font: 700 10px ui-monospace, monospace;
  color: #ec4899;
  letter-spacing: 0.12em;
}
.dm-phos__count {
  font: 500 10px ui-monospace, monospace;
  color: #6b7080;
}
.dm-phos__title { margin: 0 0 6px; font: 700 14px/1.3 system-ui, sans-serif; color: #fff; }
.dm-phos__body  { margin: 0; font: 12px/1.55 system-ui, sans-serif; color: #94a3b8; }

<div class="dm-phos-bg">
  <article class="dm-phos">
    <div class="dm-phos__top">
      <span class="dm-phos__live">● LIVE</span>
      <span class="dm-phos__count">2,341 watching</span>
    </div>
    <h3 class="dm-phos__title">React Server Components Deep Dive</h3>
    <p class="dm-phos__body">A walk through the boundaries between server and client.</p>
  </article>
</div>

11 / 12

Aurora Dim

Pure CSS

◈

Premium activated Welcome to Aurora Pass.

Dark surface with a soft drifting aurora glow underneath — the aurora is heavily blurred so it never competes with content.

Try it

.dm-aurora-bg {
  position: relative; padding: 32px;
  border-radius: 16px; overflow: hidden;
  background: #0a0a14;
}
.dm-aurora-bg::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(139, 92, 246, 0.4), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(236, 72, 153, 0.3), transparent 50%);
  filter: blur(32px);
  pointer-events: none;
}
.dm-aurora {
  position: relative;
  background: #14141f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
}
.dm-aurora__icon {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  border-radius: 10px;
  display: grid; place-items: center;
  color: #fff;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(139, 92, 246, 0.5);
}
.dm-aurora__body { display: flex; flex-direction: column; gap: 3px; }
.dm-aurora__body b    { font: 700 13px system-ui, sans-serif; color: #fff; }
.dm-aurora__body span { font: 12px system-ui, sans-serif; color: #94a3b8; }

<div class="dm-aurora-bg">
  <div class="dm-aurora">
    <div class="dm-aurora__icon">◈</div>
    <div class="dm-aurora__body">
      <b>Premium activated</b>
      <span>Welcome to Aurora Pass.</span>
    </div>
  </div>
</div>

12 / 12

Ember Pulse

Pure CSS

Build attention needed 3 warnings · 0 errors · last run 2m ago

Notification badge with a warm orange glow that subtly breathes — designed for low-priority but persistent alerts.

Try it

.dm-ember-bg { padding: 28px; border-radius: 16px; background: #0a0a10; }
.dm-ember {
  background: #14141c;
  border: 1px solid rgba(245, 158, 11, 0.15);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.dm-ember__icon {
  position: relative;
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.dm-ember__core {
  width: 12px; height: 12px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 12px #f59e0b, 0 0 24px rgba(245, 158, 11, 0.5);
  z-index: 2;
}
.dm-ember__pulse {
  position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5), transparent 70%);
  border-radius: 50%;
  animation: dm-ember-breath 2.5s ease-in-out infinite;
}
@keyframes dm-ember-breath {
  0%, 100% { transform: scale(0.8); opacity: 0.4; }
  50%      { transform: scale(1.1); opacity: 0.8; }
}
.dm-ember__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm-ember__body b    { font: 600 12px system-ui, sans-serif; color: #f5f5f5; }
.dm-ember__body span { font: 11px ui-monospace, monospace; color: #6b7080; }
.dm-ember__btn {
  background: transparent;
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 6px 12px; border-radius: 6px;
  font: 600 11px system-ui, sans-serif; cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.dm-ember__btn:hover { background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.55); }
@media (prefers-reduced-motion: reduce) { .dm-ember__pulse { animation: none; } }

<div class="dm-ember-bg">
  <div class="dm-ember">
    <div class="dm-ember__icon">
      <span class="dm-ember__pulse"></span>
      <span class="dm-ember__core"></span>
    </div>
    <div class="dm-ember__body">
      <b>Build attention needed</b>
      <span>3 warnings · 0 errors · last run 2m ago</span>
    </div>
    <button class="dm-ember__btn">Review →</button>
  </div>
</div>

Battery saver

Save your work?

The art of restraint

React Server Components Deep Dive

Related collections

12 CSS Glassmorphism Designs