Design Styles Easy
Dark Mode
A refined dark interface with dark surfaces, subtle borders, and muted accents — comfortable for extended use and developer-friendly.
Open in Lab
MCP
html css javascript
Targets: JS HTML
Code
/* ============================================================
Dark Mode — Design Style Showcase
============================================================ */
:root {
/* Surfaces */
--bg-body: #0a0a0a;
--bg-card: #111111;
--bg-input: #1a1a1a;
--bg-hover: #222222;
--bg-elevated: #1e1e1e;
/* Borders */
--border: #2a2a2a;
--border-focus: #3b82f6;
/* Text */
--text-primary: #ffffff;
--text-muted: #a0a0a0;
--text-placeholder: #666666;
/* Accent — blue */
--accent: #3b82f6;
--accent-hover: #2563eb;
--accent-dim: #1e3a5f;
/* Status */
--green: #22c55e;
--red: #ef4444;
/* Radius */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
/* Shadows */
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
}
/* ---- Reset ---- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg-body);
color: var(--text-primary);
font-family: "Inter", system-ui, sans-serif;
font-size: 15px;
line-height: 1.6;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
}
/* ---- Header ---- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.header-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
height: 60px;
display: flex;
align-items: center;
gap: 32px;
}
.header-logo {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 16px;
letter-spacing: -0.3px;
flex-shrink: 0;
}
.logo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 8px var(--accent);
}
.header-nav {
display: flex;
align-items: center;
gap: 4px;
flex: 1;
}
.nav-link {
padding: 6px 12px;
border-radius: var(--radius-sm);
font-size: 14px;
color: var(--text-muted);
transition: color 0.15s, background 0.15s;
}
.nav-link:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.nav-link.active {
color: var(--text-primary);
background: var(--bg-hover);
}
.header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.icon-btn {
position: relative;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text-muted);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, color 0.15s;
}
.icon-btn:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.notif-badge {
position: absolute;
top: -4px;
right: -4px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-size: 10px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
.avatar-sm {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--accent-dim);
border: 1px solid var(--accent);
color: var(--accent);
font-size: 12px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.5px;
}
/* ---- Layout ---- */
.main {
padding: 48px 0 80px;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 24px;
display: flex;
flex-direction: column;
gap: 20px;
}
/* ---- Page title ---- */
.page-title-area {
padding: 8px 0 16px;
}
.page-title {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.8px;
line-height: 1.1;
}
.page-tagline {
margin-top: 6px;
font-size: 15px;
color: var(--text-muted);
}
/* ---- Card ---- */
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
box-shadow: var(--shadow-card);
}
.section-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 16px;
}
/* ---- Profile card ---- */
.profile-card {
display: flex;
align-items: center;
gap: 24px;
}
.profile-avatar-wrap {
position: relative;
flex-shrink: 0;
}
.profile-avatar {
width: 72px;
height: 72px;
border-radius: 50%;
background: var(--accent-dim);
border: 2px solid var(--accent);
color: var(--accent);
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 1px;
}
.status-dot {
position: absolute;
bottom: 3px;
right: 3px;
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--green);
border: 2px solid var(--bg-card);
}
.profile-info {
flex: 1;
}
.profile-name {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.3px;
}
.profile-role {
font-size: 14px;
color: var(--text-muted);
margin-top: 2px;
}
.profile-stats {
display: flex;
align-items: center;
gap: 20px;
margin-top: 16px;
}
.stat {
text-align: center;
}
.stat-value {
display: block;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--text-primary);
}
.stat-label {
display: block;
font-size: 12px;
color: var(--text-muted);
margin-top: 2px;
}
.stat-divider {
width: 1px;
height: 32px;
background: var(--border);
}
/* ---- Buttons ---- */
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
padding: 0 20px;
border-radius: var(--radius);
font-size: 14px;
font-weight: 600;
border: 1px solid transparent;
transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.btn:active {
transform: scale(0.97);
}
.btn-primary {
background: var(--accent);
color: #fff;
}
.btn-primary:hover {
background: var(--accent-hover);
box-shadow: 0 0 16px rgba(59, 130, 246, 0.4);
}
.btn-secondary {
background: var(--bg-input);
border-color: var(--border);
color: var(--text-primary);
}
.btn-secondary:hover {
background: var(--bg-hover);
border-color: #444;
}
.btn-ghost {
background: transparent;
border-color: var(--accent);
color: var(--accent);
}
.btn-ghost:hover {
background: rgba(59, 130, 246, 0.08);
}
/* ---- Input ---- */
.input-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.input-label {
font-size: 13px;
font-weight: 500;
color: var(--text-primary);
}
.input {
height: 42px;
padding: 0 14px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius);
color: var(--text-primary);
font-size: 14px;
font-family: inherit;
outline: none;
transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder {
color: var(--text-placeholder);
}
.input:focus {
border-color: var(--border-focus);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.input-hint {
font-size: 12px;
color: var(--text-muted);
}
/* ---- Badges ---- */
.badge-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.badge {
display: inline-flex;
align-items: center;
height: 26px;
padding: 0 10px;
border-radius: 100px;
font-size: 12px;
font-weight: 600;
background: #1e293b;
color: #60a5fa;
letter-spacing: 0.02em;
border: 1px solid rgba(96, 165, 250, 0.2);
}
.badge-success {
background: rgba(34, 197, 94, 0.1);
color: var(--green);
border-color: rgba(34, 197, 94, 0.25);
}
.badge-muted {
background: var(--bg-hover);
color: var(--text-muted);
border-color: var(--border);
}
/* ---- Responsive ---- */
@media (max-width: 600px) {
.header-nav {
display: none;
}
.profile-card {
flex-direction: column;
text-align: center;
}
.profile-stats {
justify-content: center;
}
.page-title {
font-size: 26px;
}
}/* Dark Mode — Showcase interactions */
// ── Button ripple effect ──────────────────────────────────────
document.querySelectorAll(".btn").forEach((btn) => {
btn.addEventListener("click", function (e) {
const rect = this.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement("span");
ripple.style.cssText = `
position: absolute;
left: ${x}px;
top: ${y}px;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,0.15);
transform: translate(-50%, -50%);
animation: ripple 0.5s ease-out forwards;
pointer-events: none;
`;
this.style.position = "relative";
this.style.overflow = "hidden";
this.appendChild(ripple);
setTimeout(() => ripple.remove(), 500);
});
});
// Inject ripple keyframes once
const style = document.createElement("style");
style.textContent = `
@keyframes ripple {
to { width: 200px; height: 200px; opacity: 0; }
}
`;
document.head.appendChild(style);
// ── Input — live validation feedback ─────────────────────────
const input = document.getElementById("demo-input");
const hint = input?.nextElementSibling;
if (input && hint) {
input.addEventListener("input", () => {
const val = input.value.trim();
if (val.startsWith("https://github.com/")) {
hint.textContent = "✓ Valid GitHub URL";
hint.style.color = "#22C55E";
} else if (val.length > 0) {
hint.textContent = "URL should start with https://github.com/";
hint.style.color = "#EF4444";
} else {
hint.textContent = "Paste a public GitHub URL to clone.";
hint.style.color = "";
}
});
}
// ── Nav link active state ─────────────────────────────────────
document.querySelectorAll(".nav-link").forEach((link) => {
link.addEventListener("click", function (e) {
e.preventDefault();
document.querySelectorAll(".nav-link").forEach((l) => l.classList.remove("active"));
this.classList.add("active");
});
});
// ── Card hover elevation ──────────────────────────────────────
document.querySelectorAll(".card").forEach((card) => {
card.addEventListener("mouseenter", () => {
card.style.borderColor = "#3A3A3A";
card.style.transition = "border-color 0.2s";
});
card.addEventListener("mouseleave", () => {
card.style.borderColor = "";
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dark Mode — Style Showcase</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="header-inner">
<div class="header-logo">
<span class="logo-dot"></span>
<span class="logo-text">darkUI</span>
</div>
<nav class="header-nav">
<a href="#" class="nav-link active">Dashboard</a>
<a href="#" class="nav-link">Projects</a>
<a href="#" class="nav-link">Settings</a>
</nav>
<div class="header-actions">
<button class="icon-btn" aria-label="Notifications">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
<path d="M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>
<span class="notif-badge">3</span>
</button>
<div class="avatar-sm">AM</div>
</div>
</div>
</header>
<!-- Main content -->
<main class="main">
<div class="container">
<!-- Page title -->
<div class="page-title-area">
<h1 class="page-title">Dark Mode</h1>
<p class="page-tagline">Refined surfaces for low-light environments</p>
</div>
<!-- Profile card -->
<section class="card profile-card">
<div class="profile-avatar-wrap">
<div class="profile-avatar">AM</div>
<span class="status-dot" title="Online"></span>
</div>
<div class="profile-info">
<h2 class="profile-name">Alex Morgan</h2>
<p class="profile-role">Senior Engineer</p>
<div class="profile-stats">
<div class="stat">
<span class="stat-value">128</span>
<span class="stat-label">Commits</span>
</div>
<div class="stat-divider"></div>
<div class="stat">
<span class="stat-value">34</span>
<span class="stat-label">PRs</span>
</div>
<div class="stat-divider"></div>
<div class="stat">
<span class="stat-value">4.9</span>
<span class="stat-label">Score</span>
</div>
</div>
</div>
</section>
<!-- Buttons -->
<section class="card">
<h3 class="section-label">Buttons</h3>
<div class="btn-row">
<button class="btn btn-primary">Primary Action</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
</div>
</section>
<!-- Input -->
<section class="card">
<h3 class="section-label">Input</h3>
<div class="input-group">
<label class="input-label" for="demo-input">Repository URL</label>
<input
id="demo-input"
class="input"
type="text"
placeholder="https://github.com/you/repo"
/>
<p class="input-hint">Paste a public GitHub URL to clone.</p>
</div>
</section>
<!-- Badges -->
<section class="card">
<h3 class="section-label">Badges</h3>
<div class="badge-row">
<span class="badge">TypeScript</span>
<span class="badge">React</span>
<span class="badge">Node.js</span>
<span class="badge badge-success">Open Source</span>
<span class="badge badge-muted">v2.4.1</span>
</div>
</section>
</div>
</main>
<script src="script.js"></script>
</body>
</html>Dark Mode
A full-page component showcase built entirely around the dark mode aesthetic — the de-facto standard for developer tools, code editors, and late-night productivity apps. Every surface is deliberately layered from near-black to dark-gray, creating depth without brightness. The palette is built around a neutral dark base with a single blue accent, keeping cognitive load low and letting content breathe.
This showcase demonstrates a complete design system slice: profile card, action buttons in three variants, a labeled text input, and semantic badge chips — all styled with the same token set. Inter from Google Fonts provides clean, screen-optimized legibility across every weight.
Key characteristics
- Layered surfaces —
#0A0A0Abody →#111111card →#1A1A1Ainput, creating natural elevation without shadows - Single blue accent —
#3B82F6used exclusively for primary actions and focus states, never decorative - Muted secondary text —
#A0A0A0for supporting copy, keeping hierarchy clear without harsh contrast jumps - Subtle borders only —
1px solid #2A2A2Adefines boundaries without adding visual noise - No heavy drop shadows — dark environments already imply depth; a faint
rgba(0,0,0,0.5)blur is sufficient
When to use
Reach for this style when your primary audience works in low-light environments — developer dashboards, IDE themes, terminal UIs, monitoring tools, and SaaS products with power-user personas. Dark mode reduces eye strain during extended sessions and pairs naturally with syntax-highlighted code. Avoid it for consumer-facing products targeting casual audiences unfamiliar with dark interfaces, or any context where color fidelity is critical (photo editing, design tools used in bright daylight).