Dark Mode Implementation#

Dark mode isn’t just black backgrounds. It’s an art form.

CSS Variables Approach#

Base Setup#

1
:root {
2
  /* Light mode (default) */
3
  --bg-primary: #ffffff;
4
  --bg-secondary: #f5f5f5;
5
  --text-primary: #1a1a1a;
6
  --text-secondary: #666666;
7
  --accent: #3b82f6;
8
  --border: #e5e5e5;
9
}
10

11
[data-theme="dark"] {
12
  --bg-primary: #0a0a0a;
13
  --bg-secondary: #171717;
14
  --text-primary: #ffffff;
15
  --text-secondary: #a3a3a3;
16
  --accent: #60a5fa;
17
  --border: #262626;
18
}
19

20
body {
21
  background-color: var(--bg-primary);
22
  color: var(--text-primary);
23
  transition: background-color 0.3s, color 0.3s;
24
}

Usage#

1
.card {
2
  background: var(--bg-secondary);
3
  border: 1px solid var(--border);
4
  color: var(--text-primary);
5
}
6

7
.button {
8
  background: var(--accent);
9
  color: white;
10
}
11

12
.muted {
13
  color: var(--text-secondary);
14
}

JavaScript Toggle#

1
const toggle = document.getElementById('theme-toggle');
2
const html = document.documentElement;
3

4
// Check for saved preference or system preference
5
const getTheme = () => {
6
  const saved = localStorage.getItem('theme');
7
  if (saved) return saved;
8

9
  return window.matchMedia('(prefers-color-scheme: dark)').matches
10
    ? 'dark'
11
    : 'light';
12
};
13

14
// Apply theme
15
const setTheme = (theme) => {
16
  html.setAttribute('data-theme', theme);
17
  localStorage.setItem('theme', theme);
18
};
19

20
// Initialize
21
setTheme(getTheme());
22

23
// Toggle
24
toggle.addEventListener('click', () => {
25
  const current = html.getAttribute('data-theme');
26
  setTheme(current === 'dark' ? 'light' : 'dark');
27
});

React Implementation#

1
import { useState, useEffect, createContext, useContext } from 'react';
2

3
const ThemeContext = createContext();
4

5
export function ThemeProvider({ children }) {
6
  const [theme, setTheme] = useState('light');
7

8
  useEffect(() => {
9
    const saved = localStorage.getItem('theme');
10
    if (saved) {
11
      setTheme(saved);
12
    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
13
      setTheme('dark');
14
    }
15
  }, []);
16

17
  useEffect(() => {
18
    document.documentElement.setAttribute('data-theme', theme);
19
    localStorage.setItem('theme', theme);
20
  }, [theme]);
21

22
  const toggle = () => setTheme(theme === 'dark' ? 'light' : 'dark');
23

24
  return (
25
    <ThemeContext.Provider value={{ theme, toggle }}>
26
      {children}
27
    </ThemeContext.Provider>
28
  );
29
}
30

31
export const useTheme = () => useContext(ThemeContext);

Theme Toggle Button#

1
function ThemeToggle() {
2
  const { theme, toggle } = useTheme();
3

4
  return (
5
    <button onClick={toggle} aria-label="Toggle theme">
6
      {theme === 'dark' ? 'Light' : 'Dark'}
7
    </button>
8
  );
9
}

Tailwind CSS Dark Mode#

1
module.exports = {
2
  darkMode: 'class', // or 'media'
3
}

1
<div className="bg-white dark:bg-gray-900">
2
  <p className="text-gray-900 dark:text-white">
3
    Hello, Dark Mode!
4
  </p>
5
</div>

Design Tips#

1. Don’t Use Pure Black#

1
/* Too harsh */
2
--bg-dark: #000000;
3

4
/* Easier on eyes */
5
--bg-dark: #0a0a0a;
6
--bg-dark: #121212;

2. Reduce Contrast#

1
/* Light mode */
2
--text: #000000;
3

4
/* Dark mode - slightly muted */
5
--text: #e5e5e5; /* Not pure white */

3. Adjust Shadows#

1
.card {
2
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
3
}
4

5
[data-theme="dark"] .card {
6
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
7
}

4. Desaturate Colors#

1
:root {
2
  --accent: #3b82f6; /* Vibrant blue */
3
}
4

5
[data-theme="dark"] {
6
  --accent: #60a5fa; /* Lighter, less saturated */
7
}

Prevent Flash#

1
<script>
2
  (function() {
3
    const theme = localStorage.getItem('theme') ||
4
      (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
5
    document.documentElement.setAttribute('data-theme', theme);
6
  })();
7
</script>