Dark mode has become a popular preference, so you should look to support it on your sites and in your web apps.
In recent years, dark mode has gained significant popularity as a user interface option. It offers a darker background complemented by lighter text, which not only reduces eye strain but also conserves battery life, especially on OLED screens.
Discover how you can add a dark mode option to your websites and web apps, using a combination of CSS and JavaScript.
Porozumění temnému režimu
Dark mode is an alternative color scheme for your website that swaps the traditional light background for a dark one. It makes your pages easier on the eyes, especially in low-light conditions. Dark mode has become a standard feature on many websites and applications due to its user-friendly nature.
Nastavení vašeho projektu
Before you implement this, ensure you have a project set up and ready to work on. You should have your HTML, CSS, and JavaScript files organized in a structured manner.
Kód HTML
Start with the following markup for the content of your page. A visitor will be able to use the Téma__switcher element to toggle between dark and light mode.
<body>
<navclass="navbar">
<spanclass="logo">Company Logospan><ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul><divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav><main>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Odit deserunt sit neque in labore quis quisquam expedita minus
perferendis.
main>
<scriptsrc="./script.js">script>
body>
Kód CSS
Add the following CSS to style the example. This will act as the default light mode which you’ll later augment with new styles for a dark mode view.
@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html { font-size: 62.5%; }
body { font-family: "Quicksand", sans-serif; }
.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}
.navbarspan { margin-right: auto; }
.logo { font-weight: 700; }
.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}
#theme__switcher { cursor: pointer; }
main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}
At the moment, your interface should look like this:
Implementing Dark Mode Using CSS and JavaScript
To implement dark mode, you’ll define its look using CSS. You’ll then use JavaScript to handle the switching between dark and light mode.
Creating the Theme Classes
Pro každé téma použijte jednu třídu, abyste mohli snadno přepínat mezi dvěma režimy. Pro úplnější projekt byste měli zvážit jak dark mode may affect every aspect of your design.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
Selecting the Interactive Elements
Add the following JavaScript to your Script.js soubor. První bit kódu jednoduše vybere prvky, které použijete k ovládání přepínače.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
Adding the Toggle Functionality
Dále použijte následující JavaScript k přepínání mezi světelným režimem (světlo) a tmavý režim (temný) třídy. Všimněte si, že je také dobré změnit přepínač, aby indikoval aktuální režim. Tento kód to dělá s CSS filtr.
// Function to set the themefunctionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
bodyEl.classList.toggle("dark", theme "dark");
// If the theme is "light," add the "light" class, remove "dark" class,
bodyEl.classList.toggle("light", theme !== "dark");
// adjust filter of the toggle switch
themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}
// Function to toggle the theme between light and dark
functiontoggleTheme() {
setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}
themeToggle.addEventListener("click", toggleTheme);
Díky tomu změníte motivy stránky kliknutím na přepínací kontejner.
Enhancing Dark Mode With JavaScript
Zvažte následující dvě vylepšení, která mohou vašim návštěvníkům zpříjemnit používání vašich stránek v tmavém režimu.
Detecting User Preferences
To zahrnuje kontrolu systémového motivu uživatele před načtením webu a úpravu vašeho webu tak, aby odpovídal. Here’s how you can do it using the matchMedia funkce:
// Function to detect user's preferred themefunctiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
setTheme(prefersDarkMode);
}
// Run the function to detect the user's preferred theme
detectPreferredTheme();
Nyní každý uživatel, který navštíví váš web, uvidí design, který odpovídá aktuálnímu tématu jeho zařízení.
Persisting User Preference With Local Storage
To enhance the user experience further, používat místní úložiště zapamatovat si režim zvolený uživatelem napříč relacemi. To zajistí, že nebudou muset opakovaně volit preferovaný režim.
functionsetTheme(theme) {
bodyEl.classList.toggle("dark", theme "dark");
bodyEl.classList.toggle("light", theme !== "dark");themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
// Setting the theme in local storage
localStorage.setItem("theme", theme);
}// Check if the theme is stored in local storage
const storedTheme = localStorage.getItem("theme");
if (storedTheme) {
setTheme(storedTheme);
}functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}
Embracing User-Centric Design
Tmavý režim přesahuje vzhled; jde o to, aby byl na prvním místě uživatelský komfort a preference. Dodržováním tohoto přístupu můžete vytvářet uživatelsky přívětivá rozhraní a podporovat opakované návštěvy. Při kódování a navrhování upřednostňujte pohodu uživatelů a poskytujte svým čtenářům lepší digitální zážitek.