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.
About the Code
Day Night switch #codepenchallange
A simple day night switch.
More info: Link
Dependency: jquery.min.js
About the Code
CSS + jQuery Night Mode Toggle
Night mode toggle button demo that targets a specific container.
More info: Link
Dependency: jquery.min.js
About the Code
Instagram CSS Dark Mode
TIL that you can use data-attributes as CSS selectors. Here’s an exploration of Instagram’s dark mode implementing that
More info: Link
Dependency: sanitize.min.css
About the Code
Day / Night Tumbler
More info: Link
Dependency: google fonts(family: Montserrat:400,700)
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
Dependency: –
About the Code
Day/night mode switch toggle with React and ThemeProvider
More info: Link
Dependency: react.production.min.js, react-dom.production.min.js, styled-components.min.js
Discussion about this post