Taken from my YouTube Video: https://www.youtube.com/watch?v=1KPd51v3Cok
In today's video I'll be showing you how to add Dark Mode to your Web Apps and Sites using HTML, CSS and JavaScript. This is easy to do, and has a positive impact to your overall user experience.
| <!DOCTYPE html> | |
| <head> | |
| <title>Toggle Dark Mode</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta charset="utf-8"> | |
| <link rel="shortcut icon" href="/assets/favicon.ico"> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <img src="./images/dcode-logo.png" | |
| alt="dcode" | |
| class="header__logo"> | |
| <div class="select"> | |
| <i class="material-icons">palette</i> | |
| <select class="select__input" id="selTheme"> | |
| <option value="auto">Auto</option> | |
| <option value="light">Light</option> | |
| <option value="dark">Dark</option> | |
| </select> | |
| </div> | |
| </header> | |
| <main class="main"> | |
| <h1>Welcome to dcode!</h1> | |
| <p> | |
| Mauris et neque tincidunt, sagittis mauris sit amet, elementum quam. Quisque sed laoreet neque. Nulla est | |
| augue, porttitor non laoreet tristique, pellentesque quis nisi. Integer sodales blandit sapien non ultrices. | |
| Proin porta eu neque a elementum. Cras id tortor rhoncus, lacinia justo eu, luctus nisi. Etiam ac tempus | |
| enim. Mauris fermentum erat eu ligula mattis faucibus. Morbi volutpat et erat vel cursus. | |
| </p> | |
| <p> | |
| Aenean eu odio dui. Aenean posuere ultricies ullamcorper. Donec fermentum orci in ullamcorper tristique. | |
| Proin porta ante quis feugiat scelerisque. | |
| </p> | |
| </main> | |
| </body> |
| function applyTheme(theme) { | |
| document.body.classList.remove("theme-auto", "theme-light", "theme-dark"); | |
| document.body.classList.add(`theme-${theme}`); | |
| } | |
| document.addEventListener("DOMContentLoaded", () => { | |
| const savedTheme = localStorage.getItem("theme") || "auto"; | |
| applyTheme(savedTheme); | |
| for (const optionElement of document.querySelectorAll("#selTheme option")) { | |
| optionElement.selected = savedTheme === optionElement.value; | |
| } | |
| document.querySelector("#selTheme").addEventListener("change", function () { | |
| localStorage.setItem("theme", this.value); | |
| applyTheme(this.value); | |
| }); | |
| }); |
| :root { | |
| --dark-background-color: #111111; | |
| --dark-background-color-alt: #222222; | |
| --dark-trim-color: #333333; | |
| --dark-text-color: #eeeeee; | |
| } | |
| body { | |
| /* Light Theme */ | |
| --background-color: #ffffff; | |
| --background-color-alt: #eeeeee; | |
| --trim-color: #dddddd; | |
| --text-color: #333333; | |
| --primary-color: #009578; | |
| --font-family: 'Quicksand', sans-serif; | |
| margin: 60px 0 0 0; | |
| color: var(--text-color); | |
| font-family: var(--font-family); | |
| background: var(--background-color); | |
| } | |
| body.theme-dark { | |
| --background-color: var(--dark-background-color); | |
| --background-color-alt: var(--dark-background-color-alt); | |
| --trim-color: var(--dark-trim-color); | |
| --text-color: var(--dark-text-color); | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| body.theme-auto { | |
| --background-color: var(--dark-background-color); | |
| --background-color-alt: var(--dark-background-color-alt); | |
| --trim-color: var(--dark-trim-color); | |
| --text-color: var(--dark-text-color); | |
| } | |
| } | |
| .header { | |
| display: flex; | |
| justify-content: space-between; | |
| box-sizing: border-box; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 60px; | |
| padding: 10px; | |
| background: var(--background-color-alt); | |
| border-bottom: 1px solid var(--trim-color); | |
| box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); | |
| } | |
| .header__logo { | |
| height: 100%; | |
| } | |
| .header__button { | |
| background: none; | |
| border: none; | |
| outline: none; | |
| } | |
| .header > *:not(:last-child) { | |
| margin-right: 10px; | |
| } | |
| .main { | |
| margin: 0 auto; | |
| max-width: 1000px; | |
| padding: 25px; | |
| } | |
| .main p { | |
| line-height: 1.6; | |
| font-weight: 500; | |
| } | |
| .select { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 5px 8px; | |
| border-radius: 10px; | |
| } | |
| .select__input { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| padding: 7px 14px; | |
| background: none; | |
| border: none; | |
| outline: none; | |
| cursor: pointer; | |
| color: var(--text-color); | |
| font-weight: 500; | |
| font-family: var(--font-family); | |
| } | |
| .select__input option { | |
| color: #000000; | |
| } |