Mørk modus har blitt en populær preferanse, så du bør se etter å støtte den på nettstedene dine og i nettappene dine.

De siste årene har mørk modus vunnet betydelig popularitet som et brukergrensesnittalternativ. Den tilbyr en mørkere bakgrunn supplert med lysere tekst, som ikke bare reduserer belastningen på øynene, men også sparer batterilevetid, spesielt på OLED-skjermer.

Oppdag hvordan du kan legge til et mørkt modusalternativ på nettstedene og nettappene dine, ved å bruke en kombinasjon av CSS og JavaScript.

Forstå mørk modus

Mørk modus er et alternativt fargeskjema for nettstedet ditt som bytter ut den tradisjonelle lyse bakgrunnen med en mørk. Det gjør sidene dine lettere for øynene, spesielt i dårlige lysforhold. Mørk modus har blitt en standardfunksjon på mange nettsteder og applikasjoner på grunn av dens brukervennlige natur.

Sette opp prosjektet ditt

Før du implementerer dette, sørg for at du har et prosjekt satt opp og klart til å jobbe med. Du bør ha HTML-, CSS- og JavaScript-filene dine organisert på en strukturert måte.

instagram viewer

HTML-koden

Start med følgende markering for innholdet på siden din. En besøkende vil kunne bruke theme__switcher element for å veksle mellom mørk og lys 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>

CSS-koden

Legg til følgende CSS for å style eksemplet. Dette vil fungere som standard lysmodus som du senere vil utvide med nye stiler for en mørk modusvisning.

@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);
}

For øyeblikket skal grensesnittet ditt se slik ut:

Implementering av mørk modus ved hjelp av CSS og JavaScript

For å implementere mørk modus, vil du definere utseendet ved hjelp av CSS. Du vil da bruke JavaScript for å håndtere vekslingen mellom mørk og lys modus.

Opprette temaklassene

Bruk én klasse for hvert tema slik at du enkelt kan bytte mellom de to modusene. For et mer komplett prosjekt bør du vurdere hvordan mørk modus kan påvirke alle aspekter av designet ditt.

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

Velge de interaktive elementene

Legg til følgende JavaScript til din script.js fil. Den første kodebiten velger ganske enkelt elementene du skal bruke for å håndtere vekslingen.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

Legge til vekslefunksjonalitet

Deretter bruker du følgende JavaScript for å veksle mellom lysmodus (lys) og mørk modus (mørk) klasser. Merk at det også er en god idé å endre vippebryteren for å indikere gjeldende modus. Denne koden gjør det med et CSS-filter.

// Function to set the theme
functionsetTheme(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);

Dette får siden din til å endre tema med et klikk på bryteren.

Forbedre mørk modus med JavaScript

Vurder følgende to forbedringer som kan gjøre mørkemodusnettstedene dine mer behagelige å bruke for de besøkende.

Finner brukerpreferanser

Dette innebærer å sjekke brukerens systemtema før nettstedet lastes og justere nettstedet ditt for å matche. Her er hvordan du kan gjøre det ved å bruke matchMedia funksjon:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// 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();

Nå vil enhver bruker som besøker nettstedet ditt se et design som samsvarer med enhetens gjeldende tema.

Vedvarende brukerpreferanse med lokal lagring

For å forbedre brukeropplevelsen ytterligere, bruke lokal lagring for å huske brukerens valgte modus på tvers av økter. Dette sikrer at de ikke trenger å velge sin foretrukne modus gjentatte ganger.

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");
}

Omfavner brukersentrisk design

Mørk modus går utover utseendet; det handler om å sette brukerkomfort og preferanser først. Ved å følge denne tilnærmingen kan du lage brukervennlige grensesnitt og oppmuntre til gjentatte besøk. Mens du koder og designer, prioriter brukervelvære og lever en bedre digital opplevelse for leserne dine.