Mörkt läge har blivit en populär inställning, så du bör leta efter att stödja det på dina webbplatser och i dina webbappar.

Under de senaste åren har mörkt läge vunnit betydande popularitet som ett användargränssnittsalternativ. Den erbjuder en mörkare bakgrund kompletterad med ljusare text, vilket inte bara minskar påfrestningen på ögonen utan också sparar batteritid, särskilt på OLED-skärmar.

Upptäck hur du kan lägga till ett mörkt lägesalternativ på dina webbplatser och webbappar med en kombination av CSS och JavaScript.

Förstå mörkt läge

Mörkt läge är ett alternativt färgschema för din webbplats som byter ut den traditionella ljusa bakgrunden mot en mörk. Det gör dina sidor lättare för ögonen, särskilt i svagt ljus. Mörkt läge har blivit en standardfunktion på många webbplatser och applikationer på grund av dess användarvänliga karaktär.

Konfigurera ditt projekt

Innan du implementerar detta, se till att du har ett projekt inrättat och redo att arbeta med. Du bör ha dina HTML-, CSS- och JavaScript-filer organiserade på ett strukturerat sätt.

instagram viewer

HTML-koden

Börja med följande uppmärkning för innehållet på din sida. En besökare kommer att kunna använda theme__switcher element för att växla mellan mörkt och ljust läge.

<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

Lägg till följande CSS för att utforma exemplet. Detta kommer att fungera som standardljusläget som du senare kommer att utöka med nya stilar för en mörklägesvy.

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

För tillfället bör ditt gränssnitt se ut så här:

Implementera mörkt läge med CSS och JavaScript

För att implementera mörkt läge definierar du dess utseende med CSS. Du kommer sedan att använda JavaScript för att hantera växlingen mellan mörkt och ljust läge.

Skapa temaklasser

Använd en klass för varje tema så att du enkelt kan växla mellan de två lägena. För ett mer komplett projekt bör du överväga hur mörkt läge kan påverka alla aspekter av din design.

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

Välja de interaktiva elementen

Lägg till följande JavaScript till din script.js fil. Den första kodbiten väljer helt enkelt de element du ska använda för att hantera växlingen.

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

Lägga till växlingsfunktionen

Använd sedan följande JavaScript för att växla mellan ljusläget (ljus) och mörkt läge (mörk) klasser. Observera att det också är en bra idé att ändra omkopplaren för att indikera det aktuella läget. Den här koden gör det med ett 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);

Detta gör att din sida ändrar teman med ett klick på växlingsbehållaren.

Förbättra mörkt läge med JavaScript

Tänk på följande två förbättringar som kan göra dina webbplatser i mörkt läge trevligare att använda för dina besökare.

Upptäcker användarinställningar

Detta innebär att kontrollera användarens systemtema innan webbplatsen laddas och justera din webbplats för att matcha. Så här kan du göra det med hjälp av matchMedia fungera:

// 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 kommer alla användare som besöker din webbplats att se en design som matchar enhetens aktuella tema.

Beständiga användarpreferenser med lokal lagring

För att förbättra användarupplevelsen ytterligare, använda lokal lagring för att komma ihåg användarens valda läge över sessioner. Detta säkerställer att de inte behöver välja önskat läge upprepade gånger.

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

Omfamna användarcentrerad design

Mörkt läge går utöver utseendet; det handlar om att sätta användarkomfort och preferenser först. Genom att följa detta tillvägagångssätt kan du skapa användarvänliga gränssnitt och uppmuntra till upprepade besök. När du kodar och designar, prioritera användarnas välbefinnande och leverera en bättre digital upplevelse för dina läsare.