De donkere modus is een populaire voorkeur geworden, dus u moet proberen deze op uw sites en in uw webapps te ondersteunen.
De afgelopen jaren is de donkere modus aanzienlijk populair geworden als optie voor de gebruikersinterface. Het biedt een donkerdere achtergrond aangevuld met lichtere tekst, wat niet alleen de vermoeide ogen vermindert, maar ook de levensduur van de batterij spaart, vooral op OLED-schermen.
Ontdek hoe u een donkere modusoptie kunt toevoegen aan uw websites en webapps, met behulp van een combinatie van CSS en JavaScript.
De donkere modus begrijpen
De donkere modus is een alternatief kleurenschema voor uw website die de traditionele lichte achtergrond verwisselt voor een donkere. Het maakt uw pagina's prettiger voor de ogen, vooral bij weinig licht. Vanwege het gebruiksvriendelijke karakter is de donkere modus op veel websites en applicaties een standaardfunctie geworden.
Uw project opzetten
Voordat u dit implementeert, moet u ervoor zorgen dat u een project heeft opgezet en klaar is om aan te werken. Zorg ervoor dat uw HTML-, CSS- en JavaScript-bestanden op een gestructureerde manier zijn georganiseerd.
De HTML-code
Begin met de volgende opmaak voor de inhoud van uw pagina. Een bezoeker kan gebruik maken van de thema__schakelaar element om te schakelen tussen de donkere en lichte modus.
<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>
De CSS-code
Voeg de volgende CSS toe om het voorbeeld op te maken. Dit zal fungeren als de standaard lichte modus die je later zult uitbreiden met nieuwe stijlen voor een donkere modusweergave.
@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);
}
Op dit moment zou uw interface er als volgt uit moeten zien:
Implementatie van de donkere modus met behulp van CSS en JavaScript
Om de donkere modus te implementeren, definieert u het uiterlijk met behulp van CSS. Vervolgens gebruikt u JavaScript om het schakelen tussen de donkere en lichte modus af te handelen.
Het creëren van de themaklassen
Gebruik voor elk thema één klasse, zodat je gemakkelijk tussen de twee modi kunt wisselen. Voor een completer project moet u overwegen hoe de donkere modus kan elk aspect van uw ontwerp beïnvloeden.
.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}
De interactieve elementen selecteren
Voeg het volgende JavaScript toe aan uw script.js bestand. Het eerste stukje code selecteert eenvoudigweg de elementen die u gaat gebruiken om de schakelaar te bedienen.
// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;
De schakelfunctionaliteit toevoegen
Gebruik vervolgens het volgende JavaScript om te schakelen tussen de lichtmodus (licht) en donkere modus (donker) klassen. Merk op dat het ook een goed idee is om de tuimelschakelaar te wijzigen om de huidige modus aan te geven. Deze code doet dat met een CSS-filter.
// 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);
Hierdoor verandert uw pagina van thema met een klik op de schakelcontainer.
Verbetering van de donkere modus met JavaScript
Overweeg de volgende twee verbeteringen die ervoor kunnen zorgen dat uw sites in de donkere modus prettiger in gebruik zijn voor uw bezoekers.
Gebruikersvoorkeuren detecteren
Dit houdt in dat u het systeemthema van de gebruiker controleert voordat de website wordt geladen en uw site hierop aanpast. Hier ziet u hoe u het kunt doen met behulp van de matchMedia functie:
// 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();
Nu ziet elke gebruiker die uw site bezoekt een ontwerp dat past bij het huidige thema van zijn apparaat.
Blijvende gebruikersvoorkeur met lokale opslag
Om de gebruikerservaring verder te verbeteren, gebruik lokale opslag om de door de gebruiker gekozen modus voor verschillende sessies te onthouden. Dit zorgt ervoor dat ze niet herhaaldelijk hun voorkeursmodus hoeven te selecteren.
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");
}
Het omarmen van een gebruikersgericht ontwerp
De donkere modus gaat verder dan uiterlijk; het gaat erom dat gebruikerscomfort en voorkeuren voorop staan. Door deze aanpak te volgen, kunt u gebruiksvriendelijke interfaces creëren en herhaalbezoeken aanmoedigen. Geef tijdens het coderen en ontwerpen prioriteit aan het welzijn van de gebruiker en zorg voor een betere digitale ervaring voor uw lezers.
