Dark Mode with CSS Custom Properties

CSS custom properties (variables) make dark mode implementation clean and maintainable. Here is the approach:

:root {\n  --bg: #ffffff;\n  --text: #111111;\n  --card: #f5f5f5;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bg: #0f0f0f;\n    --text: #eeeeee;\n    --card: #1a1a1a;\n  }\n}\n\nbody {\n  background: var(--bg);\n  color: var(--text);\n}

For user-toggled dark mode, add a data attribute to the html element and target it with CSS:

[data-theme="dark"] {\n  --bg: #0f0f0f;\n  --text: #eeeeee;\n}

This approach scales well and requires zero JavaScript for the styles.