css
UI
Dark Mode Toggle with CSS
Complete dark/light mode implementation using CSS custom properties with smooth transitions and system preference detection.
Apex Logic
0 copies
css
/* Dark Mode Toggle using CSS Custom Properties */
:root {
--bg-primary: #0a0d12;
--bg-secondary: #0f1218;
--bg-card: rgba(15, 18, 24, 0.6);
--text-primary: #ffffff;
--text-secondary: #a0aabf;
--text-muted: #555;
--accent: #00e1ff;
--accent-glow: rgba(0, 225, 255, 0.15);
--border: rgba(255, 255, 255, 0.06);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
--transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="light"] {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--bg-card: rgba(255, 255, 255, 0.8);
--text-primary: #1a1a2e;
--text-secondary: #555;
--text-muted: #888;
--accent: #0066cc;
--accent-glow: rgba(0, 102, 204, 0.1);
--border: rgba(0, 0, 0, 0.08);
--shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
body {
background: var(--bg-primary);
color: var(--text-primary);
transition: background var(--transition), color var(--transition);
}
.card {
background: var(--bg-card);
border: 1px solid var(--border);
box-shadow: var(--shadow);
transition: all var(--transition);
}
/* Theme toggle button */
.theme-toggle {
position: relative;
width: 56px; height: 28px;
border-radius: 14px;
background: var(--bg-secondary);
border: 1px solid var(--border);
cursor: pointer;
transition: all var(--transition);
}
.theme-toggle::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 20px; height: 20px;
border-radius: 50%;
background: var(--accent);
transition: transform var(--transition);
}
[data-theme="light"] .theme-toggle::after {
transform: translateX(28px);
}
/* Respect system preference */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--bg-primary: #ffffff;
--bg-secondary: #f8f9fa;
--text-primary: #1a1a2e;
}
}