light-dark mode with JS

YvonneDev
Oct 5, 2020

This is a full website demo for light-dark mode.

There is also a simple light-dark mode with sass demo

CODE SEPARATE:

HTML

The toggle is at the right corner with a fixed position.

Four sections with smooth scrolling.

Home: title and a button

About:three toggle images and title

Menu:icons and a menu ,just for demo

Contact: icon and form

CSS

Set the two-mode color sets.

toggle-button is a checkbox.

A gradient background on the background image.

Set the default color of light mode.

JAVASCRIPT

Get the DOM

Check the theme is light or dark,then run the toggleDarkLightMode().

If mode is light, change the nav background color and images links.

If the localStorage theme sets to dark, it will record in the localStorage.

CODE Github

👉Follow me for more useful web development content! love sharing🥰

--

--

YvonneDev

❤️Front-end Web Development self-taught *share what I learned*