CSS Weekly #6: Dark Mode Implementation Strategies
CSS Weekly #6: Dark Mode Implementation Strategies 🌙
Hey ,
Dark mode isn't just a trend—it's an accessibility feature. Let's explore multiple implementation strategies, from simple to sophisticated!
Strategy 1: CSS Custom Properties (Recommended)
:root {
/* Semantic color system */
--color-bg: #ffffff;
--color-surface: #f5f5f5;
--color-text: #1a1a1a;
--color-text-muted: #666666;
--color-primary: #0066cc;
--color-border: #e0e0e0;
}
[data-theme="dark"] {
--color-bg: #1a1a1a;
--color-surface: #2d2d2d;
--color-text: #e0e0e0;
--color-text-muted: #a0a0a0;
--color-primary: #4d94ff;
--color-border: #404040;
}
/* Use semantic variables everywhere */
body {
background: var(--color-bg);
color: var(--color-text);
}
Strategy 2: System Preference Detection
Respect user's OS preference:
/* Light mode by default */
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
}
/* Auto dark mode */
@media (prefers-color-scheme: dark) {
:root {
--color-bg: #1a1a1a;
--color-text: #e0e0e0;
}
}
/* Manual override */
[data-theme="light"] {
--color-bg: #ffffff;
--color-text: #1a1a1a;
}
[data-theme="dark"] {
--color-bg: #1a1a1a;
--color-text: #e0e0e0;
}
🎨 Advanced: Multiple Theme Support
:root {
/* Default (light) theme */
--h: 210; /* Hue */
--s: 100%; /* Saturation */
--l-bg: 100%;
--l-surface: 96%;
--l-text: 10%;
/* Build colors from HSL */
--color-bg: hsl(var(--h), 5%, var(--l-bg));
--color-surface: hsl(var(--h), 10%, var(--l-surface));
--color-text: hsl(var(--h), 5%, var(--l-text));
--color-primary: hsl(var(--h), var(--s), 50%);
}
[data-theme="dark"] {
--l-bg: 10%;
--l-surface: 15%;
--l-text: 90%;
}
[data-theme="midnight"] {
--h: 240;
--l-bg: 5%;
--l-surface: 10%;
--l-text: 95%;
}
JavaScript Theme Switcher
// Robust theme switcher
const theme = {
// Get saved or system preference
getCurrent() {
return localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
},
// Set theme
set(themeName) {
document.documentElement.setAttribute('data-theme', themeName);
localStorage.setItem('theme', themeName);
},
// Toggle between light/dark
toggle() {
const current = this.getCurrent();
this.set(current === 'light' ? 'dark' : 'light');
}
};
// Initialize
theme.set(theme.getCurrent());
// Listen for system changes
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
theme.set(e.matches ? 'dark' : 'light');
}
});
🚀 Performance: Preventing Flash
Prevent the "flash of wrong theme":
<!-- In <head> before any CSS -->
<script>
// Minimal theme setter
(function() {
const theme = localStorage.getItem('theme') ||
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
})();
</script>
Color Considerations
1. Don't just invert
/* ❌ Bad: Pure black/white */
[data-theme="dark"] {
--color-bg: #000000;
--color-text: #ffffff;
}
/* ✅ Good: Softer contrast */
[data-theme="dark"] {
--color-bg: #1a1a1a;
--color-text: #e0e0e0;
}
2. Adjust saturation
:root {
--primary-hue: 210;
--primary: hsl(var(--primary-hue), 80%, 50%);
}
[data-theme="dark"] {
/* Less saturated in dark mode */
--primary: hsl(var(--primary-hue), 60%, 60%);
}
🎯 Image Handling
/* Dim images in dark mode */
[data-theme="dark"] img {
filter: brightness(0.8);
}
/* Except those marked */
[data-theme="dark"] img.no-dim {
filter: none;
}
/* Invert diagrams */
[data-theme="dark"] .diagram {
filter: invert(1) hue-rotate(180deg);
}
Smooth Transitions
Add theme transition effects:
/* Define transition properties */
:root {
--transition-theme: color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
/* Apply to elements */
body {
transition: var(--transition-theme);
}
/* Disable during theme switch */
.theme-transitioning * {
transition: none !important;
}
Resources & Tools
- Color.review - Check contrast ratios
- Coolors - Generate color schemes
- Dark Mode Toggle - My collection
Sponsored by Raycast - Supercharge your productivity. The fastest way to control your tools. Dark mode included! 🌙
Next week: CSS Performance optimization tips!
— Sarah from CSS Weekly
P.S. What's your dark mode color palette? Share your theme!
Don't miss what's next. Subscribe to CSS Weekly:
Add a comment: