This article provides a collection of CSS demos for dark mode. Hand-picked free CSS Dark mode and light mode toggle functionality using HTML, jQuery, SCSS, Materialize, React, CSS. This collection of demos is a great resource for anyone looking to create a dark mode on their website. I hope you will find these examples helpful. I have included them in order to help you get started on implementing your own dark mode stylesheet for your own project. Updated with 3 items on Oct 13, 2021.
- Michael Richins
- October 10, 2019
About the Code
Light & Dark Mode
CSS Media Query prefers-color-scheme. At the time of the creation of this post, only Firefox v.68 supports this media query. The
prefers-color-scheme CSS 5 Media Query is used to detect if the user has requested the system to use a light or dark color theme. This Pen demonstrates how to use a theme toggle for both legacy and progressive code. If the theme is overwriten by the toggle, it will be persisted via local storage; else the media query will keep that setting. Press the following button to clear that storage.
Note: Chrome 76 and Edge 76 now support this feature
More info: Link