Mørk tilstand er blevet en populær præference, så du bør se efter at understøtte den på dine websteder og i dine webapps.

I de senere år har mørk tilstand vundet betydelig popularitet som en mulighed for brugergrænseflade. Det giver en mørkere baggrund suppleret med lysere tekst, som ikke kun reducerer øjenbelastningen, men også sparer batterilevetid, især på OLED-skærme.

Opdag, hvordan du kan tilføje en mørk tilstandsindstilling til dine websteder og webapps ved hjælp af en kombination af CSS og JavaScript.

Forstå Dark Mode

Mørk tilstand er et alternativt farveskema til din hjemmeside, der bytter den traditionelle lyse baggrund ud med en mørk. Det gør dine sider nemmere for øjnene, især under dårlige lysforhold. Mørk tilstand er blevet en standardfunktion på mange websteder og applikationer på grund af dens brugervenlige karakter.

Opsætning af dit projekt

Før du implementerer dette, skal du sikre dig, at du har et projekt sat op og klar til at arbejde på. Du bør have dine HTML-, CSS- og JavaScript-filer organiseret på en struktureret måde.

HTML-koden

Start med følgende markering for indholdet på din side. En besøgende vil være i stand til at bruge theme__switcher element for at skifte mellem mørk og lys tilstand.

<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

Tilføj følgende CSS for at style eksemplet. Dette vil fungere som standard lystilstand, som du senere vil udvide med nye stilarter til en mørk tilstandsvisning.

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

I øjeblikket skulle din grænseflade se sådan ud:

Implementering af Dark Mode ved hjælp af CSS og JavaScript

For at implementere mørk tilstand skal du definere dets udseende ved hjælp af CSS. Du vil derefter bruge JavaScript til at håndtere skiftet mellem mørk og lys tilstand.

Oprettelse af temaklasser

Brug en klasse for hvert tema, så du nemt kan skifte mellem de to tilstande. For et mere komplet projekt bør du overveje hvordan mørk tilstand kan påvirke alle aspekter af dit design.

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

Valg af interaktive elementer

Tilføj følgende JavaScript til din script.js fil. Den første kodebit vælger simpelthen de elementer, du skal bruge til at håndtere skiften.

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

Tilføjelse af Toggle-funktionen

Brug derefter følgende JavaScript til at skifte mellem lystilstanden (lys) og mørk tilstand (mørk) klasser. Bemærk, at det også er en god idé at ændre vippekontakten for at angive den aktuelle tilstand. Denne kode gø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 din side til at ændre temaer med et klik på til/fra-beholderen.

Forbedring af mørk tilstand med JavaScript

Overvej følgende to forbedringer, der kan gøre dine websteder i mørk tilstand mere behagelige at bruge for dine besøgende.

Registrering af brugerpræferencer

Dette involverer kontrol af brugerens systemtema, før webstedet indlæses, og justering af dit websted, så det matcher. Her er, hvordan du kan gøre det ved hjælp af matchMedia fungere:

// 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();

Nu vil enhver bruger, der besøger dit websted, se et design, der matcher deres enheds aktuelle tema.

Vedvarende brugerpræference med lokal lagring

For at forbedre brugeroplevelsen yderligere, bruge lokal lagring at huske brugerens valgte tilstand på tværs af sessioner. Dette sikrer, at de ikke gentagne gange skal vælge deres foretrukne tilstand.

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 brugercentreret design

Mørk tilstand går ud over udseendet; det handler om at sætte brugerkomfort og præferencer først. Ved at følge denne tilgang kan du oprette brugervenlige grænseflader og tilskynde til gentagne besøg. Når du koder og designer, skal du prioritere brugernes velvære og levere en bedre digital oplevelse for dine læsere.