w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home Inputs

14 Best CSS Dark Mode

W3TWEAKS by W3TWEAKS
October 13, 2021
in Inputs

You might also like

Custom CSS Checkbox buttons

50+ Free CSS Checkbox Examples to Make Your Site More Interactive

November 12, 2022
jQuery Toggle Menu

20 Cool jQuery Toggle Menu

January 17, 2021

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.

Author

  • Jon Kantner
  • May 12, 2020

Link

Live Demo

Made with

  • HTML / CSS

About the Code

Light/Dark Mode Toggle With Curtain Effect

A light and dark switch where the handle bounces into place while a curtain inverts the scheme.

More info: Link

Dependency: –


Author

  • Jon Kantner
  • October 16, 2020

Link

Live Demo

Made with

  • HTML / Sass / JS

About the Code

Neumorphic Light Switch

The brightness and thumb light are adjusted through dynamically changed CSS variables.

More info: Link

Dependency: –


Author

  • Bruno Massa
  • July 17, 2018

Link

Live Demo

Made with

  • HTML / CSS / JS

About the Code

Day Night switch #codepenchallange

A simple day night switch.

More info: Link

Dependency: jquery.min.js


Author

  • Kevin McCormack
  • February 3, 2017

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Dark -Light Mode Switcher

More info: Link

Dependency: –

Author

  • Demilade Olaleye
  • March 10, 2019

Link

Download

Made with

  • HTML / CSS

About the Code

Pure CSS dark mode toggle switcher

More info: Link

Dependency: –

Author

  • John Riggles
  • August 24, 2020

Link

Download

Made with

  • Slim / SCSS

About the Code

Dark Mode Toggle

More info: Link

Dependency: –

Author

  • Jay Holtslander
  • April 11, 2019

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Materialize – CSS Dark Mode

More info: Link

Dependency: –

Author

  • Rico Mossesgeld
  • March 2, 2017

Link

Download

Made with

  • HTML / SCSS / JavaScript

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

Author

  • Aris Acoba
  • May 24, 2020

Link

Download

Made with

  • Pug / SCSS / JavaScript

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

Author

  • Pavel Rodionoff
  • April 16, 2020

Link

Download

Made with

  • HTML / Sass / JavaScript

About the Code

Day / Night Tumbler

More info: Link

Dependency: google fonts(family: Montserrat:400,700)

Author

  • tris timb
  • March 28, 2018

Link

Download

Made with

  • HTML / SCSS / JavaScript

About the Code

Light and dark page toggle

More info: Link

Dependency: jquery.min.js

Author

  • Dmitriy Levchenko
  • May 18, 2020

Link

Download

Made with

  • Pug / SCSS / JavaScript

About the Code

React

More info: Link

Dependency:

Author

  • Michael Richins
  • October 10, 2019

Link

Download

Made with

  • HTML / SCSS / JavaScript

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: –

Author

  • Maks Akymenko
  • September 18, 2019

Link

Download

Made with

  • HTML / JavaScript

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

Tags: Dark Moderadio switchToggle SwitchToggle Switches
Previous Post

9 D3.js Patterns & Templates

Next Post

jQuery plugin for CSS3 text animations

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

Custom CSS Checkbox buttons

50+ Free CSS Checkbox Examples to Make Your Site More Interactive

by W3TWEAKS
November 12, 2022

If you're looking for a collection of custom CSS checkboxes to spice up your forms, You don't want to search...

jQuery Toggle Menu

20 Cool jQuery Toggle Menu

by W3TWEAKS
January 17, 2021

Hand-picked free jQuery Toggle Menus. All the collections are included with demo and source code. Updated on Jan 17 2020....

jQuery Toggle Switches

15 Cool jQuery Toggle Switches

by W3TWEAKS
October 12, 2021

Hand-picked free jQuery Toggle Switches. All the collections are Included with the demos and source codes. AuthorHimalaya SinghMarch 3, 2019LinkDownloadMade...

Cool CSS Emoji Rating

13 Cool CSS Emoji Rating

by W3TWEAKS
January 14, 2021

Hand-picked Free CSS Emoji Rating. All the collections are Included with the demos and source codes. AuthorAaron IkerMarch 17, 2020LinkDownloadMade...

Next Post
jQuery plugin for CSS3 text animations

jQuery plugin for CSS3 text animations

Discussion about this post

Popular Posts

100 Creative CSS Cards

41 Multi step HTML forms

13 Free HTML & CSS Dashboard Template Designs

20 HTML & CSS pricing tables

49 CSS Tables

14 Best CSS Dark Mode

11 CSS Shopping Cart UI/UX

42 Cool CSS Avatars For Better UI

89 Best CSS Toggle Switches

55 Useful handpicked CSS Buttons with examples and demos

w3tweaks

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools