Dark mode is now a standard expectation for web applications. Here's a practical implementation guide covering the CSS-only approach, the JavaScript toggle approach, and how to handle user preferences correctly. The CSS-only approach (system preference only) If you only need to respond to the user's OS-level dark mode setting, prefers-color-scheme does the job with no JavaScript: :root { --bg : white ; --text : #1a1a1a ; --card-bg : #f8f8f8 ; --border : #e2e8f0 ; } @media ( prefers-color-scheme : dark ) { :root { --bg : #1a1a2e ; --text : #e8e8e8 ; --card-bg : #16213e ; --border : #2d3748 ; } } body { background : var ( --bg ); color : var ( --text ); } Enter fullscreen mode Exit fullscreen mode Pros : no JavaScript, instant, no flash of incorrect theme on load. Cons : user can't override — if their OS is in light mode, they can't switch to dark on your site.…