• 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
  • Script
    • 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
  • Script
    • 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

October 13, 2021
in Inputs

You might also like

Why Multi Page Form HTML is Better than Single Page Forms

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

20 Cool jQuery Toggle Menu

15 Cool jQuery Toggle Switches

13 Cool CSS Emoji Rating

9 Best JavaScript Toggle Menu

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

Related Stories

Why Multi Page Form HTML is Better than Single Page Forms
HTML

Why Multi Page Form HTML is Better than Single Page Forms

February 28, 2023
Custom CSS Checkbox buttons
Inputs

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

November 12, 2022
jQuery Toggle Menu
Inputs

20 Cool jQuery Toggle Menu

January 17, 2021
jQuery Toggle Switches
Inputs

15 Cool jQuery Toggle Switches

October 12, 2021
Cool CSS Emoji Rating
Inputs

13 Cool CSS Emoji Rating

January 14, 2021
JavaScript Toggle Menu
Inputs

9 Best JavaScript Toggle Menu

February 3, 2021
Next Post
jQuery plugin for CSS3 text animations

jQuery plugin for CSS3 text animations

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • 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
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In