You'd be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Implementing dark and light mode in modern CSS has become simpler. Using the 'color-scheme' property on the root element enables automatic switching based on the visitor’s OS preference. Native HTML supports both black-on-white (light mode) and white-on-black (dark mode) themes. The 'light-dark()' function provides fine-grained control over color schemes, and you can use JavaScript to toggle modes and remember user preferences using localStorage or sessionStorage. This approach benefits accessibility and user experience, making websites comfortable for a wider audience.

Come to the light-dark() Side

Switching color schemes automatically based on OS preference

Default text and background color variables

What makes using color-scheme and light-dark() better than using @media queries?

Adjusting color-scheme in HTML with JavaScript

Remembering the selection for repeat visits

<p>This new CSS function is very helpful. I’m glad it’s widely supported now as well. It makes writing the dark mode style a lot easier.</p>
