Implementing dark mode with CSS and minimal JavaScript using prefers-color-scheme
By
thm
Summary
This article explains how to implement dark mode on websites using web standards, specifically the prefers-color-scheme media query in CSS. It covers supporting the user's OS-level system setting as a default, while also providing a per-site toggle for users to override that setting. The approach emphasizes minimal JavaScript usage and standard CSS techniques.
Source
Hacker NewsImplementing dark mode with CSS and minimal JavaScript using prefers-color-schemeolliewilliams.xyzKey quotes
· 3 pulledRespecting the user's OS setting is straightforward: use the prefers-color-scheme media query in CSS.
Arguably, that isn't enough: users should also be able to customise their choice on a per-site basis.
A user might want dark mode for the UI of an application, but light mode for reading long-form text on content-heavy sites, for example.
You might also wanna read
Looking for 2 colour themes on a single website
una.im | Modern CSS theming with light-dark(), contrast-color(), and style queries
A technical article exploring how to combine three modern CSS features — @property, light-dark(), and style queries — to build fully adaptiv
una.im·11d ago
How CSS contrast-color() Solves the Web's Persistent WCAG Contrast Problem
This article discusses the persistent failure of 70% of websites to meet WCAG color contrast standards, even after years of design system to
Smashing Magazine·1mo ago
Designing Accessible Dark Mode: How to Create Inclusive Dark Themes for All Users
This article from Smashing Magazine explores how to design dark mode interfaces that are truly accessible and inclusive. It argues that whil
Smashing Magazine·1y ago
CSS vs. JavaScript Animations: A Nuanced Performance Comparison
This article explores the performance differences between CSS-based animations (transitions/keyframes) and JavaScript-based animations using
joshwcomeau.com·1mo ago
Practical Guide to Theming SVG Animations with CSS Relative Color Values
This article by web designer Andy Clarke explores practical techniques for using CSS relative color values to theme and animate SVG graphics
Smashing Magazine·5mo ago
Comments
Sign in to join the conversation.
No comments yet. Be the first.